在制作CSS动画的时候,经常会有这样的需求,
让一个方块 沿着给定的路径 运动。
如果运动路径是不规则的,通过设置 top , left 的属性值,就显得非常困难了。
这时候可以借助svg来实现。
path 元素的形状是通过它的 d 属性 定义的,
d 属性的值,是一个“命令+参数”的序列。
其中, M 20 30 L 160 180 ,包含了2个命令序列,
M 20 30 ,表示将画笔移动到坐标 20,30 处,
L 160 180 ,表示从画笔当前位置,到 160,180 位置画直线。
path元素支持多种命令,可以参考这里, curve commands
html元素的CSS样式属性 offset-path ,表示 偏移路径 。
通过指定 offset-path 的值为path元素的 d 属性值,我们可以实现元素沿着给定的 path 路径运动。
其中, offset-distance 指定了元素偏移初始位置的百分比。
通过在 @keyframes 中逐帧更改 offset-distance ,可以实现动画效果。
我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ,
相应的也修改小方块的 offset-path 属性。
就可以实现小方块沿着path运动的效果了。
MDN: paths
MDN: offset-path
MDN: offset-distance
A How-to Guide to SVG Animation
Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths
在生活中比较常见的是直线进度条,但是圆形进度条的实现相对有意思,我个人总结了两种圆形进度条的实现方式。
首先我们得了解什么是svg,它是使用 XML 来描述二维图形和绘图程序的语言。可以直接在html中使用svg标签实现。实现圆形进度条前先讲下svg里面stroke属性。
实现圆形进度条主要用到 stroke-dasharray 和 stroke-dashoffset 。
stroke-dasharray="2*50*3.14" ,代表虚线长314,空白间隔长314
stroke-dashoffset="2*50*3.14" ,代表虚线偏移是314,这样展示出来的部分就是空白间隔。
将圆的周长展开来表示就是这样:
用css实现主要通过用两个div分别画半圆,并结合 overflow:hidden 实现。
这是从100->0,如果是从0->100的话,只需要修改动画旋转角度即可。
以上就是我总结的两种画原型进度条的方法,挺有意思的吧?