本文源码：https://github.com/any86/5a.c...ios/androidweb有2个常用的加载图标，一个是ios的“菊花”，一个是android的“戒指”。今天我们用svg实现android的“环”动画，下一节课实现ios的“菊花”。注：gif帧数少的原因是实际动画效果很流畅。demoxml(svg)首先，我们定义svg的画布大小为50x50，在浏览器中缩放为36x36显示（这个36可以根据实际需要调整），定义圆心坐标为25、25，半径为20（circumference约为125，后面会用到），color为currentColor获取父元素color属性的值，环宽为5像素，写css前先看效果：scss.a-loading{&-android{动画：旋转2s线性无限；变换原点：中心中心；>circle{显示：内联块；动画：冲刺1500毫秒无限缓入缓出；stroke-linecap:round;//端点是一个圆color:currentColor;}@keyframes旋转{100%{变换：旋转（度）；}}@keyframesdash{0%{stroke-dasharray:1,200;}50%{stroke-dasharray:100,200;笔画偏移量：-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%的时间回到一个1点的状态和0%的状态一致，这样动画循环不突兀，但是从50%到100%的动画只是“缩尾”，所以我们使用stroke-dashoffset:-124来实现，125-124=1正好是一个像素，到这里动画就完成了。整体旋转与Android系统的动画一致，这样也进行了整体旋转。这里的代码比较简单，不再赘述。动画属性的扩展如果你仔细阅读过css文档的动画，你会发现动画可以同时支持多个过渡动画，比如动画：color6sease-in-outinfinite,dash1.5sease-in-outinfinite;，用“,”分割多个动画。所以我们其实可以扩展上面的动画，比如旋转和改变颜色：&-android{animation:rotate2slinearinfinite;变换原点：中心中心；>circle{显示：内联块；//添加变色动画代码：color6sease-in-outinfinite,dash1.5sease-in-outinfinite;stroke-linecap:round;颜色：当前颜色；}@keyframes旋转{100%{变换：旋转（度）；}}@keyframesdash{0%{stroke-dasharray:1,200;}50%{stroke-dasharray:100,200;笔画偏移量：-45；}100%{中风-dasharray:100,200;笔画偏移量：-124；}}@keyframes颜色{0%,100%{描边:#6b5c5b;}40%{行程：#0057e7；}66%{中风：#008744；}80%,90%{中风:#ffa700;}}}本文代码引用了vue框架iview。
