H5动画：轨迹移动

在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。

直线移动

通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。

1 2 3 4 5 6 7 8 9 10

.cray { animation: move 2s alternate infinite; } @ keyframes move { 0% { transform: translate(0, 0); } 30% { transform: translate(100px, 0); } 60% { transform: translate(100px, 100px); } 100% { transform: translate(200px, 0); } }

曲线移动

在 CSS 中可以通过 transform-origin 配合 rotate 实现曲线移动，不过这种 曲线 都是圆的一部分且不太好控制。

这种移动我们可以把它拆分成两个方向的运动叠加，如

更详细的说明可以参考这篇文章 《curved-path-animations-in-css》。

路径移动

这也是曲线移动，但是想像上面那样，这个很难拆分成几个方向的运动叠加。这样的移动路径可以尝试以下几个方法：

• SVG Animation

这样的路径可以比较好的用 SVG path 来描述，然后使用 SVG Animation 做跟随动画，并可以达到预期的轨迹效果。

主要代码（在线示例）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="#979797" stroke-width="1" fill="none"> <path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 ..." > path> g> <g id="cray" transform="translate(0, -24)" stroke="#979797"> <image id="cray-img" xlink:href="http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png" x="0" y="0" width="100px"/> g> <animateMotion xlink:href= "#cray" dur= "5s" begin= "0s" fill= "freeze" repeatCount= "indefinite" rotate= "auto-reverse" > <mpath xlink:href="#motionPath" /> animateMotion> svg>

效果：

• JavaScript

使用 JavaScript 可以直接操作元素进行运动，理论上可以实现任何动画，只是实现一些复杂的动画成本比较高，好在有各种已经开发好了的工具库可以供我们使用。例如，使用 Greensock 的 TweenMax 和 MorphSVGPlugin（收费），通过 MorphSVGPlugin 提供的 pathDataToBezier 方法将 SVG path 转成曲线数组，然后给 TweenMax 使用：

1 2 3 4 5 6 7 8 9 10 11 12

var hill = document.getElementById( 'hill') var path = MorphSVGPlugin.pathDataToBezier( "#motionPath"); TweenMax.to(hill, 5, { bezier:{ values:path, type: "cubic", autoRotate: 180 }, ease:Linear.easeNone, repeat: -1 })

在线示例

• CSS

实现动画，其实就是在相应的时间点做相应的“变化”。再回头看直线移动的实现方式，其实如果能给出足够多点的位置和该点的时间与持续时间的比值，那其实曲线也可以直接用 CSS 来实现。

很多时候设计师使用 AE 来设计动画，当我们拿到设计稿后，可以给动画增加关键帧，然后借助一些工具把关键帧的信息导出来，这里介绍一个 keyframes-cli，可以导出这样结构的数据

从属性名字可以判断出来 X_POSITION 和 Y_POSITION 是 x 和 y 的位置信息，而 key_values 里的 data 就是我们需要的点位置， 该点的时间与持续时间的比值 可以根据 start_frame 得出，
写个脚本把这些数据处理下，可得到类似下面的 CSS 代码

设置的关键帧越多，动画会越流畅，但 CSS 也会增多。