使用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的新特性介绍
Oct 31 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python网络爬虫学习笔记(1)
2018/04/09 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python如何实时获取tcpdump输出
2020/09/16 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
社区工作者思想汇报
2014/01/13 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
《长征》教学反思
2014/04/27 职场文书
学校募捐倡议书
2014/05/14 职场文书
公司承诺书格式
2014/05/21 职场文书
公司感谢信范文
2015/01/22 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP