H5动画：轨迹移动

小咪咪 2022-05-20 01:10 351阅读 0赞

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

#### 直线移动 ####

![straight-line][]

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

#### 曲线移动 ####

![curve][]

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

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

![curve-gif][]

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

#### 路径移动 ####

![path][]

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

*  SVG Animation

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

主要代码（[在线示例][Link 1]）：

<table style="border:none;font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;border-spacing:0px;"> 
 <tbody style="font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
  <tr style="border-top:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(102,102,102);line-height:1.6;text-align:right;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      1 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      2 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      3 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      4 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      5 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      6 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      7 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      8 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      9 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      10 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      11 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      12 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      13 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      14 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      15 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      16 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      17 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      18 
    </div></td> 
   <td style="font-style:inherit;font-family:inherit;font-size:12px;vertical-align:baseline;color:rgb(51,51,51);"><pre style="border:none;font-style:inherit;font-family:'Input Mono', 'PT Mono', Consolas, Monaco, Menlo, monospace;vertical-align:baseline;background:rgb(247,247,247);color:rgb(77,77,76);line-height:1.6;"></pre> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">svg</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">width</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"420px"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">height</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"260px"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">viewBox</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"0 0 420 260"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">version</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"1.1"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">xmlns</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"http://www.w3.org/2000/svg"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">xmlns:xlink</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"http://www.w3.org/1999/xlink"</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">g</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">stroke</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"#979797"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">stroke-width</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"1"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">fill</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"none"</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">path</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">id</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"motionPath"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">d</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"M370.378234,219.713623 C355.497359,218.517659 ..."</span> &gt;</span> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">path</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">g</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">g</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">id</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"cray"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">transform</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"translate(0, -24)"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">stroke</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"#979797"</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">image</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">id</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"cray-img"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">xlink:href</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">x</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"0"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">y</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"0"</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">width</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"100px"</span>/&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">g</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">animateMotion</span></span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">xlink:href</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"#cray"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">dur</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"5s"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">begin</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"0s"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">fill</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"freeze"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">repeatCount</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"indefinite"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">rotate</span>= 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"auto-reverse"</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">
      &gt; 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">mpath</span> <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">xlink:href</span>=<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(113,140,0);">"#motionPath"</span> /&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">animateMotion</span>&gt;</span> 
    </div> 
    <div style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;"> 
     <span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;color:rgb(200,40,41);">&lt;/<span style="border:0px;font-style:inherit;font-family:inherit;vertical-align:baseline;">svg</span>&gt;</span> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

效果：

![cray-gif][]

*  JavaScript

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

[在线示例][Link 2]

*  CSS

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

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

![ae][]

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

![ae-css][]

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

[straight-line]: https://misc.aotu.io/booxood/path-animation/straight-line.png
[curve]: https://misc.aotu.io/booxood/path-animation/curve.png
[curve-gif]: https://misc.aotu.io/booxood/path-animation/curve.gif
[curved-path-animations-in-css]: http://tobiasahlin.com/blog/curved-path-animations-in-css/
[path]: https://misc.aotu.io/booxood/path-animation/path.png
[Link 1]: https://codepen.io/booxood/pen/MOjyVe
[cray-gif]: https://misc.aotu.io/booxood/path-animation/cray.gif
[Link 2]: https://codepen.io/booxood/pen/BRJNyQ
[keyframes-cli]: https://www.npmjs.com/package/keyframes-cli
[ae]: https://misc.aotu.io/booxood/path-animation/ae.png
[ae-css]: https://misc.aotu.io/booxood/path-animation/ae-css.jpeg