H5 动画:轨迹移动

 

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

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

直线移动

straight-line

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

曲线移动

curve

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

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

curve-gif

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

路径移动

path

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

  • SVG Animation

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

主要代码(在线示例):

效果:

cray-gif

  • JavaScript

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

在线示例

  • CSS

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

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

ae

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

ae-css

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

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

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

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2017/11/06/path-animation/
1 收藏 评论

相关文章

可能感兴趣的话题



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