- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【动画消消乐】仿ios、android中常见的一个loading动画 074

海轰Pro 发表于 2023/04/22 21:37:10 2023/04/22

【摘要】前言Hello！小伙伴！非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～自我介绍 ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！【动画消消乐】平时学习生活比较枯燥，无...

前言

Hello！小伙伴！
非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

自我介绍 ଘ(੭ˊᵕˋ)੭
昵称：海轰
标签：程序猿｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！

效果展示

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>

    <body>
        <section>
            <div class="loading">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </section>
    </body>

</html>

CSS

html,body{
  margin: 0;
  height: 100%;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}
section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 红色边框仅作提示 */
    border: 2px solid red;
}

.loading{
  position: relative;
}
.loading>div{
  position: absolute;
  width: 4px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
}
.loading>div:nth-child(1){
  top: 20px;
  left: 0px;
  background-color: white;
  animation: loading infinite 1s;
}
.loading>div:nth-child(2){
  top: 14.1442px;
  left: 14.1442px;
  transform: rotate(-45deg);
  background-color: white;
  animation: loading infinite 1s 0.125s;
}
.loading>div:nth-child(3){
  top: 0px;
  left: 20px;
  transform: rotate(90deg);
  background-color: white;
  animation: loading infinite 1s 0.25s;
}
.loading>div:nth-child(4){
  top: -14.1442px;
  left: 14.1442px;
  transform: rotate(45deg);
  background-color: white;
  animation: loading infinite 1s 0.375s;
}
.loading>div:nth-child(5){
  top: -20px;
  left: 0px;
  transform: rotate(0deg);
  background-color: white;
  animation: loading infinite 1s 0.5s;
}
.loading>div:nth-child(6){
  top: -14.1442px;
  left: -14.1442px;
  transform: rotate(-45deg);
  background-color: white;
  animation: loading infinite 1s 0.625s;
}
.loading>div:nth-child(7){
  top: 0px;
  left: -20px;
  transform: rotate(90deg);
  background-color: white;
  animation: loading infinite 1s 0.75s;
}
.loading>div:nth-child(8){
  top: 14.1442px;
  left: -14.1442px;
  transform: rotate(45deg);
  background-color: white;
  animation: loading infinite 1s 0.875s;
}

@keyframes loading {
	50% {
	  opacity: 0.3;
	}
	100% {
	  opacity: 1;
	}
}

原理详解

步骤1

使用一个div盒子，用于放置整个loading动画，只需要设置为相对定位

<div class="loading"></div>

.loading{
  position: relative;
}

步骤2

分别使用8个div充当8个条状物

            <div class="loading">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

每个div 样式设置为

绝对定位
宽度：4px 高度：20px
border-radius: 10px
背景色：白色

.loading>div{
  position: absolute;
  width: 4px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
}

效果如下图

如果没有设置为绝对定位

效果如下

说明：

当没有设置为绝对定位的时候，因为每个div都是宽4px 高20px的小长条，所以会从上到下依次展示；
当设置为绝对定位后，只看到一个白色长条，其实这是8个长条的叠加态（每个长条div的位置重合了）

步骤3

使用 :nth-child() 操作其中的每一个div

先看最后的效果图

我们对每一个小白条标号1、2、3…8

从小白条1开始设置

top: 20px left: 0px（下移20px 水平方向不动）
背景色：红色

.loading>div:nth-child(1){
  top: 20px;
  left: 0px;
  background-color: red;
}

效果如下图

注：

因为在开始的时候，每个div已经设置了为绝对定位，再:nth-child()单独对每个div设置的时候，只需要设置具体的所在位置，比如top、left、bottom等即可
这里设置红色是为了区分便于观察
此时白色条状是7个div的重叠态红色条状是第一个div的最终位置

再设置小白条3

top: 0px left: 20px;（竖直方向不动右移20px）
背景色：橙色

.loading>div:nth-child(3){
  top: 0px;
  left: 20px;
  background-color: orange;
}

效果如下图

再旋转90度

.loading>div:nth-child(3){
  transform: rotate(90deg);
}

效果如下图

较难的是小白条2位置关系的确定

设置为

top: 14.1442px left: 14.1442px（下移：14.1442px 右移：14.1442px）
背景色：为淡黄色

.loading>div:nth-child(2){
  top: 14.1442px;
  left: 14.1442px;
  background-color: yellow;
}

效果如下图

再旋转 -45度

难点：为什么下移、右移距离是14.1442px呢？

海轰的理解：

以最开始的div的重心建立坐标轴（图中蓝色部分表示初始位置）

红色圆圈表示重心

小白条1、3可以很简单的表示出来（图中水平、竖直方向的浅橙色部分）

其中红色圆圈的距离是20px（因为移动的就是20px）

为了使得每个条状形成一个圆圈

我们规定每个圆圈的重心在同一个圆上

那么小白条2的位置关系如下（右下角的那个浅橙色部分）

再旋转-45度

仔细观赏是不是三个条状围成了一个圆哈哈

那么距离如何计算呢？

可以很清楚的观察出一个等腰直角三角形

圆半径是20px

那么x=20/根号2=20/1.414=14.1442 px

右上角、左上角、左下角的规律也是一样的，这里就不多阐述了

设置小白条4为

top: -14.1442px left: 14.1442px;
背景色：绿色
旋转45度

  top: -14.1442px;
  left: 14.1442px;
  transform: rotate(45deg);
  background-color: green;
}

效果如下图

按照相同的规律设置小白条5、6、7、8（理清楚方向就可以了数据都差不多）


.loading>div:nth-child(5){
  top: -20px;
  left: 0px;
  transform: rotate(0deg);
  background-color: cyan;
}
.loading>div:nth-child(6){
  top: -14.1442px;
  left: -14.1442px;
  transform: rotate(-45deg);
  background-color: blue;
}
.loading>div:nth-child(7){
  top: 0px;
  left: -20px;
  transform: rotate(90deg);
  background-color: purple;
}
.loading>div:nth-child(8){
  top: 14.1442px;
  left: -14.1442px;
  transform: rotate(45deg);
  background-color: white;
}

效果如下图

步骤4

设置动画

每一个白条的动画都一样只是错序进行即可

动画效果描述为：

50%时，透明级别为0.3
100%，透明级别为1

@keyframes loading {
	50% {
	  opacity: 0.3;
	}
	100% {
	  opacity: 1;
	}
}

以小白条1运行此动画为例

设置为

无限循环
动画持续时间：1s

.loading>div:nth-child(1){
  animation: loading infinite 2s;
}

效果如下图

类似流水灯的原理

8个白色条状

每次只亮1个其余7个都不亮

以1、0代表亮与不亮

则有8种状态

1000 0000（小白条1亮）
0100 0000（小白条2亮）
0010 0000（小白条3亮）
0001 0000（小白条4亮）
0000 1000（小白条5亮）
0000 0100（小白条6亮）
0000 0010（小白条7亮）
0000 0001（小白条8亮）

动画持续时间为1s

有8个小白条

为了使得当8个白条亮完后第一个白条又开始新一轮循环

设置每个相邻条状动画间隔时间为1/8=0.125s

所以设置动画为：

.loading>div:nth-child(1){
  animation: loading infinite 1s;
}
.loading>div:nth-child(2){
  animation: loading infinite 1s 0.125s;
}
.loading>div:nth-child(3){
  animation: loading infinite 1s 0.25s;
}
.loading>div:nth-child(4){
  animation: loading infinite 1s 0.375s;
}
.loading>div:nth-child(5){
  animation: loading infinite 1s 0.5s;
}
.loading>div:nth-child(6){
  animation: loading infinite 1s 0.625s;
}
.loading>div:nth-child(7){
  animation: loading infinite 1s 0.75s;
}
.loading>div:nth-child(8){
  animation: loading infinite 1s 0.875s;
}

效果如下图

步骤5

最后将所有div的颜色修改为白色

得到最终效果

结语

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

写作不易 「点赞」+「收藏」+「转发」

谢谢支持❤️

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

【动画消消乐】仿ios、android中常见的一个loading动画 074

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

结语

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

【动画消消乐 】仿ios、android中常见的一个loading动画 074

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

结语

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

【动画消消乐】仿ios、android中常见的一个loading动画 074