android使用html动画,面试官: "用css实现android系统的loading动画"

源码: https://github.com/any86/any-...

ios/android

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

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的虚线:

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;

}

}

}

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