【动画消消乐 】仿ios、android中常见的一个loading动画 074
前言
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的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～
我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧
写作不易 「点赞」+「收藏」+「转发」
谢谢支持️
【动画消消乐 】仿ios、android中常见的一个loading动画 074的更多相关文章
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- Android中四种补间动画的使用示例(附代码下载)
场景 Android中四种补间动画. 透明度渐变动画 旋转动画 缩放动画 平移动画 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程 ...
- iOS项目中常见的文件
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- iOS开发中常见的一些异常
iOS开发中常见的异常包括以下几种NSInvalidArgumentExceptionNSRangeExceptionNSGenericExceptionNSInternallnconsistency ...
- Android中常见的内存泄漏
为什么会产生内存泄漏? 当一个对象已经不需要再使用了,本该被回收时,而有另外一个正在使用的对象持有它的引用从而导致它不能被回收,这导致本该被回收的对象不能被回收而停留在堆内存中,这就产生了内存泄漏. ...
- Android中Service的一个Demo例子
Android中Service的一个Demo例子 Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding. 本文,主要贴代码,不对Servic ...
- Lottie在手，动画我有：ios/Android/Web三端复杂帧动画解决方案
为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- Mono For Android中简单实现按钮的动画效果
Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...
随机推荐
- Java-Lambda相关使用介绍
频繁使用的语句 Lambda又涉及到comparator和comparable区别(Comparable是实现comparable接口,实现后可以使用Collections.sort或Arrays ...
- Go语言Slice作为函数参数详解
Go语言Slice作为函数参数详解 前言 首先要明确Go语言中实质只有值传递,引用传递和指针传递是相对于参数类型来说. 个人认为上诉的结论不对,把引用类型看做对指针的封装,一般封装为结构体,结构体是值 ...
- Kubernetes使用节点亲缘性将POD调度到特定节点上
节点污点可以用来让pod远离特定的节点,尽量在不修改已有pod信息的前提,通过在节点添加污点信息,来拒绝pod在某些节点上的部署. 而现在介绍一种叫做节点亲缘性,通过明确的在pod中添加的信息,来决定 ...
- Redis在linux系统中的优化
通常来看,Redis开发和运维人员更加关注的是Redis本身的一些配置优化,例如AOF和RDB的配置优化.数据结构的配置优化等,但是对于操作系统是否需要针对Redis做一些配置优化不甚了解或者不太关心 ...
- 2.QT浏览器控件设置“透明颜色”
使用样式表或者设置背景颜色,使用 background-color:transparent 但,使用透明的颜色是不可行的: QColor(255,0,0,0)
- 为Centos系统打补丁
4.1.操作系统打补丁: 1.centos更新说明: centos 官方没有发布关于centos操作系统的补丁. centos 操作系统更新可以参考如下建议. 2.更新操作系统软件包,操作系统版本.内 ...
- IDEA详细配置+优秀插件
目录 IDEA破解 Settings配置 配置 settings 字体 关闭IDEA更新 设置IDEA打开为项目选择界面 自动导入包配置 显示方法的分割线 滚轮设置字体大小 智能提示忽略大小写 Tab ...
- centos安装配置和使用 Nexus
Nexus安装配置和使用 第一步安装jdk yum install java-1.8.0-openjdk-devel 第二步下载nexus-3.12.1-01-unix.tar.gzjdk 下载地址: ...
- buu 内涵软件
一.无壳. 并且是32位程序, 二.用ida静态调试一下. 这里我脑子发热啊,flag已经在眼前,活生生被我放跑了,靠,我直接搜索字符串,然后就一脸懵逼的,进入了很多不知名的函数,就炸了,看了wp才知 ...
- Rust 与 Golang - 何时使用它们？
[转自 Fizer Khan的<Rust Vs Golang - When to use them?>(翻译)] 在过去的十年中,Rust 和 Go 两种新的编程语言主要为企业开发而开发和 ...