Step1、声明SVG视口
<svg width="100" height=“100”></svg>
Step2、绘制购物袋
<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;" />
| 指令 | 说明 |
|---|---|
| M 20 40 | 表示移动画笔到(20,40) |
| L 80 40 | 表示绘制一条线到(80, 40) |
| A 10 10 90 0 1 70 100 | 绘制一个椭圆弧 |
椭圆的x半径和y半径
椭圆的x轴旋转角度
圆弧的角度小于180度，为0；大于或等于180度，则为1
以负角度绘制为0，否则为1
终点的x、y坐标
<path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;” />
Step3、绘制眼睛
<circle cx=“40" cy="60" r="2.5" style="fill: #fff;" />
<circle cx="60" cy="60" r="2.5" style="fill: #fff;" />
Step4、绘制嘴巴
<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|square
stroke-dasharray：用来创建虚线stroke-dashoffset：设置虚线位置的起始偏移值，在下一步骤里，它会和stroke-dasharray一起用来实现动效。
Step5、给嘴巴部分添加动效
@keyframes mouth {
0% {
transform: rotate(-80deg);
stroke-dasharray: 60, 95;
stroke-dashoffset: 0;
}
40% {
transform: rotate(280deg);
stroke-dasharray: 60, 95;
stroke-dashoffset: 0;
}
70%, 100% {
transform: rotate(280deg);
stroke-dashoffset: -23;
stroke-dasharray: 42, 95;
}
}
圆弧旋转
旋转之后缩短变形
Step6、给眼睛添加动画
<path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />
<circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
<animateMotion
dur="0.8s"
repeatCount="indefinite"
keyPoints="0;0;1;1"
keyTimes="0;0.3;0.9;1"
calcMode="linear">
<mpath xlink:href="#eyeleft"/>
</animateMotion>
</circle>
dur：动画的时间
repeatCount：重复次数keyPoints：运动路径的关键点timePoints：时间的关键点calcMode：控制动画的运动速率的变化，discrete | linear | paced | spline四个属性可选mpath：指定一个外部定义的路径
Step7、将不同部位的动画组合到一起
眼睛的动画是从嘴巴旋转完成开始，到嘴巴变形完成结束，因此和嘴巴的动画一样，我设置了四个对应的关键时间点。
为了让衔接更顺畅，眼睛的动画开始比嘴巴变形开始稍微提前了一点点。
MDN-SVG文档
《SVG精髓》- 人民邮电出版社
本文分享自微信公众号 - 凹凸实验室（AOTULabs）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
