使用css实现android系统的loading加载动画


Posted in HTML / CSS onJuly 25, 2019

web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".

使用css实现android系统的loading加载动画

注意 : gif帧数少的原因, 实际动画效果是很 平滑

的.

xml(svg)

<svg width="36" height="36" viewBox="0 0 50 50" class="a-loading-android">
    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor"  stroke-width="5"></circle>
</svg>

首先我们定义svg的画布尺寸为 50x50 , 在浏览器中缩放为 36x36 显示(这个36你可以根据实际需要调整), 定义环的圆心坐标为 25,25 , 半径为20 (算下 周长大概为125 , 后面会用到), 颜色为 currentColor 获取父元素的color属性的值, 环的宽度为5像素, 看下在没写css前的效果:

使用css实现android系统的loading加载动画

scss

.a-loading {
    &-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            animation: dash 1500ms ease-in-out infinite;
            stroke-linecap: round; // 端点是圆形
            color: currentColor;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }

            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }

            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
    }
}

stroke-dasharray

先解释 stroke-dasharray , 他是用来定义虚线的, 比如 stroke-dasharray="50, 20" 表示实线部分为50, 间隙20的虚线:

使用css实现android系统的loading加载动画
使用css实现android系统的loading加载动画

试想一下, 如果环也用虚线表示, 并且让 单位实线 部分的长度在环的周长范围内变化,这不就实现了(半环/满环等形态), 下面分别是 stroke-dasharray 的值为 25, 200 / 50, 200 / 100, 200

:

使用css实现android系统的loading加载动画

注意 : 这里的 200

是随意定义的, 表示虚线的间隙, 只要值大于环的周长即可.

stroke-dashoffset

偏移, 值为正数的时候, 虚线逆时针回退, 负数顺时针前进(左图的stroke-dashoffset:0, 环的起点在3点方向, 右图设置为-10以后, 环的起点被顺时针偏移了一段距离):

使用css实现android系统的loading加载动画

因为动画中, 环在增加长度的同时 尾部在收缩长度 , 所以需要配合 stroke-dashoffset

实现.

动画的3个关键时刻

使用css实现android系统的loading加载动画

**0%**的时刻

让圆环只呈现一个点, 为了让循环一周后动画不突兀(你可以改成0对比下效果).

**50%**的时刻

为了让圆环呈现80%的环, 所以设置实线部分长度为100(125*0.8, 125是周长): stroke-dasharray: 100, 200; , 同时尾部在收缩, 所以设置 stroke-dashoffset: -45; .

**100%**的时刻

回到一个点的状态, 和0%状态一致, 这样动画循环起来不突兀, 但是从50%到100%的动画只是"尾部收缩", 所以我们用 stroke-dashoffset:-124 实现, 125-124=1 正好是一个像素, 好了动画到此就实现完毕了.

整体旋转

为了和安卓系统的动画一致, 让整体也进行旋转. 这里代码比较简单不赘述.

animation属性的扩展

如果大家仔细看过css的 animation 的文档, 会发现 animation 可以同时支持多个过度动画, 比如 animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; , 用","分割多个动画.

所以我们其实还可以对上面的动画进行扩展, 比如 旋转的同时还有颜色变化 :

使用css实现android系统的loading加载动画

&-android {
        animation: rotate 2s linear infinite;
        transform-origin: center center;
        >circle {
            display: inline-block;
            // 增加颜色变化的代码
            animation: color 6s ease-in-out infinite, dash 1.5s ease-in-out infinite; 
            stroke-linecap: round;
            color: currentColor;
        }
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes dash {
            0% {
                stroke-dasharray: 1, 200;
            }
            50% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -45;
            }
            100% {
                stroke-dasharray: 100, 200;
                stroke-dashoffset: -124;
            }
        }
        @keyframes color {
            0%,
            100% {
                stroke: #6b5c5b;
            }
            40% {
                stroke: #0057e7;
            }
            66% {
                stroke: #008744;
            }
            80%,
            90% {
                stroke: #ffa700;
            }
        }
    }

本文代码参考 iview , 一个vue框架.

总结

以上所述是小编给大家介绍的使用css实现android系统的loading加载动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 #HTML / CSS
详解css3中 text-fill-color属性
Jul 08 #HTML / CSS
解决margin 外边距合并问题
Jul 03 #HTML / CSS
css3实现蒙版弹幕功能
Jun 18 #HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 #HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 #HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
You might like
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python的exec、eval使用分析
2017/12/11 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
用python读取xlsx文件
2020/12/17 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
销售经理工作职责
2014/02/03 职场文书
音乐幼师求职信
2014/07/09 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
开平碉楼导游词
2015/02/06 职场文书
立案决定书范文
2015/06/24 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Javascript webpack动态import
2022/04/19 Javascript
Golang 遍历二叉树
2022/04/19 Golang