前言

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的更多相关文章

  1. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  2. Android中四种补间动画的使用示例(附代码下载)

    场景 Android中四种补间动画. 透明度渐变动画 旋转动画 缩放动画 平移动画 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程 ...

  3. iOS项目中常见的文件

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. iOS开发中常见的一些异常

    iOS开发中常见的异常包括以下几种NSInvalidArgumentExceptionNSRangeExceptionNSGenericExceptionNSInternallnconsistency ...

  5. Android中常见的内存泄漏

    为什么会产生内存泄漏? 当一个对象已经不需要再使用了,本该被回收时,而有另外一个正在使用的对象持有它的引用从而导致它不能被回收,这导致本该被回收的对象不能被回收而停留在堆内存中,这就产生了内存泄漏. ...

  6. Android中Service的一个Demo例子

    Android中Service的一个Demo例子  Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding.  本文,主要贴代码,不对Servic ...

  7. Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案

      为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...

  8. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  9. Mono For Android中简单实现按钮的动画效果

    Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...

随机推荐

  1. .NET Core/.NET5/.NET6 开源项目汇总3:工作流组件

    系列目录     [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...

  2. Pytest学习笔记3-fixture

    前言 个人认为,fixture是pytest最精髓的地方,也是学习pytest必会的知识点. fixture用途 用于执行测试前后的初始化操作,比如打开浏览器.准备测试数据.清除之前的测试数据等等 用 ...

  3. MySQL:一条更新语句是如何执行的

    目录 引言 更新流程图 更新流程说明 第一步:更新数据 数据页内存 Change Buffer 第二步:缓存日志内容 redo log buffer binlog cache 第三步:日志写入磁盘 两 ...

  4. 玩转STM32MP157-开发环境搭建

    (一)STM32MP 1.什么是 STM32MPU STM32MPU是 ST 推出的 Cortex-A7 + Cortex-M4 多核异构处理器 STM32MPU151 是单核 A7+M4,.STM3 ...

  5. .NET Core/.NET5/.NET6 开源项目汇总9:客户端跨平台UI框架

    系列目录     [已更新最新开发文章,点击查看详细] .NET Core 实现了跨平台,支持在 Windwos.Linux.macOS上开发与部署,但是也仅限于Web应用程序.对于Windows桌面 ...

  6. 什么是CAP?

    1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...

  7. Linux-NFS存储

    1.什么是NFS NFS是Network File System 的缩写,中文意思是网络文件共享系统,它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录. 2.NFS存储服务 ...

  8. 44、wget和curl的常用参数

    1.wget: wget是文件下载的工具: 不加任何参数是直接下载该文件: (1)-O: 将下载的文件指定为特定的文件名: wget -O baidu.html www.baidu.com --201 ...

  9. webpack(2)webpack核心概念

    前言   本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具.当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph) ...

  10. mongodb的基本命令与常规操作

    1. 查看当前数据库的版本号:db.version()2. 查看当前所在数据库:db 默认是test数据库3. 查看当前数据库的连接地址:db.getMongo()4. 查看所有数据库:show da ...