CSS3动画已足够强大,不过还是有一些它做不到的地方。配合SVG,让Web动效有更多的可能性。这次要做的效果是一个loading动画(如图):其中旋转通过CSS来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。
Step1、声明SVG视口
1 | <svg width="100" height=“100”></svg> |
指定一个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也可以使用其他的合法单位,例如cm、mm、em等。
阅读器会设置一个默认的坐标系统,见图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。
在没有指定的情况下,所有的的数值默认单位都是像素。
Step2、绘制购物袋
购物袋由两个部分组成,先画下面的主体:
1 | <path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" /> |
任何形状都可以使用路径元素画出,描述轮廓的数据放在它的d属性中。
a.样式中的fill用来设置填充色。
b.路径数据由命令和坐标构成:
指令 | 说明 |
---|---|
M 20 40 | 表示移动画笔到(20,40) |
L 80 40 | 表示绘制一条线到(80, 40) |
A 10 10 90 0 1 70 100 | 绘制一个椭圆弧 |
圆弧命令以字母A开始,后面紧跟着7个参数,这7个参数分别用来表示:
- 椭圆的x半径和y半径
- 椭圆的x轴旋转角度
- 圆弧的角度小于180度,为0;大于或等于180度,则为1
- 以负角度绘制为0,否则为1
- 终点的x、y坐标
接下来绘制购物袋上面的部分
1 | <path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” /> |
上面的部分是一个半圆弧,我同样用路径来画出,也可以使用基础形状来完成。
样式中的stoke
和stroke-width
分别用来设置描边色和描边的宽度。
Step3、绘制眼睛
1 | <circle cx=“40" cy="60" r="2.5" style="fill: #fff;" /> |
使用基础形状,画两个个小圆点。四个属性分别是位置坐标、半径和填充颜色。
Step4、绘制嘴巴
1 | <circle cx="50" cy="70" r="15" style="fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round;transform: rotate(280deg); transform-origin: 50% 50%; stroke-dashoffset: -23; stroke-dasharray: 42, 95;”> |
嘴巴是一段圆弧,我绘制了一个圆,然后描边了其中的一段,并且做了一个旋转,来让它的角度处于正确的位置。
stroke-linecap
:用来定义开放路径的终结,可选round|butt|squarestroke-dasharray
:用来创建虚线stroke-dashoffset
:设置虚线位置的起始偏移值,在下一步骤里,它会和stroke-dasharray一起用来实现动效。
Step5、给嘴巴部分添加动效
1 | @keyframes mouth { |
动画分为两个部分:
- 圆弧旋转
- 旋转之后缩短变形
在一个循环里,最后留有30%的时间保持一个停留。
Step6、给眼睛添加动画
两只眼睛都是沿着圆弧运动 ,例如左眼,首先用一个路径来规定它的运动轨迹:
1 | <path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" /> |
然后使用animateMotion来设置动画:
1 | <circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;"> |
dur
:动画的时间repeatCount
:重复次数keyPoints
:运动路径的关键点timePoints
:时间的关键点calcMode
:控制动画的运动速率的变化,discrete | linear | paced | spline四个属性可选mpath
:指定一个外部定义的路径
Step7、将不同部位的动画组合到一起
- 眼睛的动画是从嘴巴旋转完成开始,到嘴巴变形完成结束,因此和嘴巴的动画一样,我设置了四个对应的关键时间点。
- 为了让衔接更顺畅,眼睛的动画开始比嘴巴变形开始稍微提前了一点点。
参考:
- MDN-SVG文档
- 《SVG精髓》- 人民邮电出版社