小编给大家分享一下使用css实现android系统的loading加载动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
10年积累的网站设计、
成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
建设网站后付款的网站建设流程，更有
沁源免费网站建设让你可以放心的选择与我们合作。
web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环".
注意 : gif帧数少的原因, 实际动画效果是很平滑
的.
xml(svg)
首先我们定义svg的画布尺寸为50x50 , 在浏览器中缩放为36x36 显示(这个36你可以根据实际需要调整), 定义环的圆心坐标为25,25 ,半径为20 (算下周长大概为125 , 后面会用到), 颜色为currentColor 获取父元素的color属性的值, 环的宽度为5像素, 看下在没写css前的效果:
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的虚线:
试想一下, 如果环也用虚线表示, 并且让单位实线 部分的长度在环的周长范围内变化,这不就实现了(半环/满环等形态), 下面分别是stroke-dasharray 的值为25, 200 /50, 200 /100, 200
:
注意 : 这里的200
是随意定义的, 表示虚线的间隙, 只要值大于环的周长即可.
stroke-dashoffset
偏移, 值为正数的时候, 虚线逆时针回退, 负数顺时针前进(左图的stroke-dashoffset:0, 环的起点在3点方向, 右图设置为-10以后, 环的起点被顺时针偏移了一段距离):
因为动画中, 环在增加长度的同时尾部在收缩长度 , 所以需要配合stroke-dashoffset
实现.
动画的3个关键时刻
**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; , 用","分割多个动画.
所以我们其实还可以对上面的动画进行扩展, 比如旋转的同时还有颜色变化 :
&-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;
}
}
}以上是“使用css实现android系统的loading加载动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
新闻标题：使用css实现android系统的loading加载动画-创新互联
文章链接：
http://bjjierui.cn/article/dgsojo.html
