动画

前端教程SVG

CSS3 中我们通过 transition``animation等属性来定义和使用动画效果，这些属性同样也适用于 SVG 元素，例如：

新窗口打开

尽管 CSS 动画使用起来方便快捷，但是 SVG 提供了功能更加丰富的动画系统，首先我们从 <animate> 元素学起。

<animate>

此元素可以修改几乎所有 SVG 元素的属性值；并且可以设置属性值的开始值、结束值，动画间隔时间，触发动画的方式及时机等。

基本语法

<svg width="200" height="200" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <ellipse id="myEllipse" cx="50%" cy="50%" rx="0" ry="0">
    <animate attributeName="rx" values="0;40%;0" dur="3s" repeatCount="indefinite" />
  </ellipse>
  <animate href="#myEllipse" attributeName="ry" values="0;20%;0" dur="6s" repeatCount="indefinite" />
</svg>

有2种使用 <animate> 的方式：

1. 嵌套在需要应用动画的元素内部，即作为一个子元素，此时 <animate> 默认会应用到父元素上；
2. 作为单独的元素，然后通过 href 引用需要应用动画的元素的 id，例如上面的语法：href="#myEllipse"。

常用属性解释

• attributeName="xxx" 指定需要被改变的属性的名字
• dur="1h | 1m | 1s | 100ms | mm:ss.iii | hh:mm:ss.iii"
  • 1h 表示 1 小时；1m 表示 1 分钟；1s 表示 1 秒钟；100ms 表示 100 毫秒
  • 2:22.222 表示 2分钟22秒222毫秒
  • 1:2:22.222 表示 1小时2分钟22秒222毫秒
• values="value1;value2;value3...;valueN" 表示在 dur 时间段内，attributeName 所指定的属性从 value1 一直过渡到 valueN
• from="startValue" 表示动画开始时的值，注意：如果 values 已定义，from 会被忽略
• to="endValue" 表示动画结束时的值，注意：如果 values 已定义，to 会被忽略
• by="offsetValue" 假如初始值为 startValue，那么在动画结束时的值为 startValue + offsetValue
  • startValue 可以由 from 来决定，或者元素本身自带了初始值
  • 注意：如果 values 已定义，by 会被忽略
• repeatCount="<number> | indefinite" 动画重复的次数，indefinite 表示无限重复
• repeatDur="<timeValue> | indefinite" 总共重复的时长，例如：dur="1s" repeatDur="5s"，则表明重复5次动画
• fill="freeze | remove(默认)" 表示动画结束时的最终状态
  • freeze 保持最后动画帧的状态，也就是停留在动画结束时最后一个画面
  • remove 保持起始动画帧的状态，也就是回到最初的状态
• begin="<timeValue> | <realtimeValue> | indefinite | <event>" 表示动画什么时候启动
• end="<timeValue> | <realtimeValue> | indefinite | <event>" 表示动画什么时候结束
• keyTime="timeValue1;timeValue2;...;timeValueN" 表示 values 中的值分别什么时候应用
  • 必须和 values 中的值一一对应
  • 每个值范围为 0 ~ 1的浮点数，表示 dur 的占比，例如 values="value1;value2;value3" dur="10s"，keyTime="0.1; 0.2; 1s"，则表示在 0.1×10=1s 时应用 value1、0.2×10=2s 时应用 value2、1×10=10s 时应用 value3

示例：基础示例

• <ellipse id="myEllipse"> 拥有2个 <animate>，一个是子元素 <animate>，另一个是单独的元素 <animate href="#myEllipse">
• attributeName="rx" values="0;40%;0" dur="3s" 表示在 3s 内 rx 的值从 0 线性增加到40%、再减少到0
• attributeName="ry" values="0;20%;0" dur="6s" 表示在 6s 内 rx 的值从 0 线性增加到20%、再减少到0
• repeatCount="indefinite" 表示无线重复动画

新窗口打开

示例：更多选项

新窗口打开

示例：动画序列1

可以巧用 begin 属性来控制动画的开始时间点，让一组动画按照顺序启动：

• begin="1s" 延迟1s后启动动画
• begin="2s" 延迟2s后启动动画

新窗口打开

示例：动画序列2

values + keyTimes 实现连续的动画

新窗口打开

示例：交互动画

begin``end还支持：当某个元素的某个事件发生时启动、停止动画：

• 点击黑色小球，启动动画
• 点击红框内的空白区域，停止动画

新窗口打开

其他属性

<animate> 还支持其他属性，由于不是很常用，所以留给大家自行阅读和学习了：

• restart
• min
• max
• calcMode
• keySplines
• additive
• accumulate

<set>

此元素设置指定的属性在指定的时间间隔内为某个指定的值。

基本语法

<rect id="me" width="10" height="10">
    <set attributeName="class" to="round" begin="me.click" dur="2s" />
</rect>

<set> 的语法和 <animate> 非常类似，不过仅支持以下属性：

• attributeName：同 <animate>
• dur：同 <animate>
• to：在 dur 时间段内应用的属性值
• begin：同 <animate>
• end：同 <animate>
• repeatCount，repeatDur：同 <animate>，但是这两属性的意义对 <set> 不大
• fill：同 <animate>

示例：基础示例

点击黑色矩形触发<set>：

新窗口打开

示例：动画序列3

点击黑色矩形触发第一个 <set>，第一个结束后自动触发第二个，第二个结束后自动触发第三个。

新窗口打开

<animateMotion>

此元素定义了沿着一个 motion path 移动的动画。

基本语法

<path id="myPath" fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

<circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite" path="..." rotate="auto">
        <mpath href="#myPath" />
    </animateMotion>
</circle>

<animateMotion> 语法和 <animate> 语法非常类似，大部分属性也都支持，下面仅仅列举 <animateMotion> 常用的属性：

• path：motion path，即沿着此 path 移动；注意：为了复用代码，一般会使用 <mpath> 来引用单独定义的 path，正如上面语法中所示。
• rotate="<angleValue> | auto | auto-reverse"：指定元素沿着路径移动时该如何旋转
  • <angleValue>：固定的旋转角度，取值范围为 0~360°
  • auto：根据路径的方向自动旋转
  • auto-reverse：与 auto 类似，但是反过来
• keyPoints="0; 0.2; 0.5; 1"：结合 keyTimes 使用，表示在指定的时间段内，移动多少距离
  • 例如：dur="4s" keyTimes="0; 0.5; 1" keyPoints="0; 0.2; 1" 表示：0~0.5×4s 即 0~2s 内从位置 0 移动到 0.2×100% 即 20%的位置，然后 2s ~ 1×4s 即 2s ~ 4s 内从 20% 移动到 1×100%的位置

示例：小车

黑车、红点、蓝车、绿点都沿着指定的 path 移动：

新窗口打开

示例：变速小车

使用 keyPoints & keyTimes 可以实现变速效果：

• 蓝色小车匀速运动，黑色小车变速运动，但是移动一圈所费时间是相同的 5s

新窗口打开

CSS Motion Path

CSS 也支持 Motion Path，请参考 MDN - CSS Motion Path 。

Web Animation API

除了使用 CSS 动画 和 SVG 动画之外，你还可以通过 JavaScript 来实现动画：

• requestAnimationFrame() / setTimeout() / setInterval()
• Element.animate()

其中，Element.animate() 是 Web Animation API 中的核心函数，更多请参考 MDN - WAAPI

动画库

你还可以使用成熟的 CSS, JavaScript 动画库：

1. LottieFiles
2. Animate.css
3. Bounce.js
4. AnimeJS
5. Popmotion
6. Mo.js
7. Greenstock Animation Platform (GSAP)
8. Velocity.js
9. CSShake
10. Hover.css
11. Magic Animations

小结

本节介绍了 SVG 动画系统，也是本小册全部的教程，接下来我们以一系列实用案例来作为收官之节吧。