【第1165期】H5动画：轨迹移动

前言

前一段时间被各种H5总结刷屏，除了内容以及设计之外在动画方面在其表现方面也起到了很大的加持作用，渐渐的动画也成为了一个产品所不可缺少的一个元素。2017年1月11号早读文章由凹凸实验室@Avin授权分享。

正文从这开始～

动画，是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。

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

直线移动

straight-line

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

.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); }
}

曲线移动

curve

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

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

curve-gif

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

路径移动

path

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

SVG Animation

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

主要代码（在线示例）：

<svgwidth="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">
<gstroke="#979797"stroke-width="1"fill="none">
<pathid="motionPath"d="M370.378234,219.713623 C355.497359,218.517659 ..." ></path>
</g>
<gid="cray"transform="translate(0, -24)"stroke="#979797">
<imageid="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"
  >
<mpathxlink:href="#motionPath" />
</animateMotion>
</svg>

效果：

cray-gif

JavaScript

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

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，可以导出这样结构的数据

ae

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

ae-css

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

注意：不是 AE 关键帧里所有的信息都可以导出来，还跟 AE 里使用的过渡属性有关，这里有介绍。

最后，总结一下，移动动画就是用一种合适的方式把时间和位置的变化关系展示出来。除了上面方法，肯定还有很多其他的方法和帮助工具。

大家常用的动画库会有哪些呢？欢迎推荐～

最后，为你推荐

【第1110期】SVG 路径动画简易指南

【第892期】功能性动画如何提升用户体验

【第777期】10 个原则让动画带你飞

关于本文
作者：@Avin
原文：https://aotu.io/notes/2017/11/06/path-animation/

【第1155期】如何快速融入新团队？

【图书】CSS世界

【图书】你不知道的Javascript（下卷）