一个例子上手 SVG 动画

CSS3动画已足够强大,不过还是有一些它做不到的地方。配合SVG,让Web动效有更多的可能性。这次要做的效果是一个loading动画(如图):其中旋转通过CSS来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。

img

Step1、声明SVG视口

指定一个宽高都为100像素的区域,width=”100”和width=”100px”是等价的,当然也可以使用其他的合法单位,例如cm、mm、em等

阅读器会设置一个默认的坐标系统,见图:左上角为原点,其中水平(x)坐标向右递增,垂直(y)坐标向下递增。

img

在没有指定的情况下,所有的的数值默认单位都是像素。

Step2、绘制购物袋

购物袋由两个部分组成,先画下面的主体:

任何形状都可以使用路径元素画出,描述轮廓的数据放在它的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坐标

img

接下来绘制购物袋上面的部分

上面的部分是一个半圆弧,我同样用路径来画出,也可以使用基础形状来完成。

样式中的stokestroke-width分别用来设置描边色和描边的宽度。

img

Step3、绘制眼睛

使用基础形状,画两个个小圆点。四个属性分别是位置坐标、半径和填充颜色。
img

Step4、绘制嘴巴

嘴巴是一段圆弧,我绘制了一个圆,然后描边了其中的一段,并且做了一个旋转,来让它的角度处于正确的位置。

  • stroke-linecap:用来定义开放路径的终结,可选round|butt|square
  • stroke-dasharray:用来创建虚线
  • stroke-dashoffset:设置虚线位置的起始偏移值,在下一步骤里,它会和stroke-dasharray一起用来实现动效。

img

Step5、给嘴巴部分添加动效

动画分为两个部分:

  1. 圆弧旋转
  2. 旋转之后缩短变形

在一个循环里,最后留有30%的时间保持一个停留。

img

Step6、给眼睛添加动画

两只眼睛都是沿着圆弧运动 ,例如左眼,首先用一个路径来规定它的运动轨迹:

然后使用animateMotion来设置动画:

  • dur:动画的时间
  • repeatCount:重复次数
  • keyPoints:运动路径的关键点
  • timePoints:时间的关键点
  • calcMode:控制动画的运动速率的变化,discrete | linear | paced | spline四个属性可选
  • mpath:指定一个外部定义的路径

img

Step7、将不同部位的动画组合到一起

  • 眼睛的动画是从嘴巴旋转完成开始,到嘴巴变形完成结束,因此和嘴巴的动画一样,我设置了四个对应的关键时间点。
  • 为了让衔接更顺畅,眼睛的动画开始比嘴巴变形开始稍微提前了一点点。

img

参考:

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部