共计 2296 个字符,预计需要花费 6 分钟才能阅读完成。
源码: https://github.com/any86/any-…
ios/android
web 常用的 loading 图标有 2 种, 一种是 ios 的 ” 菊花 ”, 一种是 android 的 ” 环 ”. 今天我们用 svg 实现 android 的 ” 环 ” 动画, 下节课实现 ios 的 ” 菊花 ”.
注意 : gif 帧数少的原因, 实际动画效果是很 平滑 的.
demo
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 的画布尺寸为 50×50, 在浏览器中缩放为36×36 显示 (这个 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;}
}
}
本文代码参考iview, 一个 vue 框架.