使用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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 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 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
简单理解Python中的装饰器
2015/07/31 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python找出因数与质因数的方法
2019/07/25 Python
Django之路由层的实现
2019/09/09 Python
方正Java笔试题
2014/07/03 面试题
高考备战决心书
2014/03/11 职场文书
教师节促销方案
2014/03/22 职场文书
应届大专生自荐书
2014/06/16 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
学校中秋节活动总结
2015/03/23 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis