网页中复杂伴随式动画的分析

动画、交互和产品体验

动画能够给平淡的交互增彩不少，利用好动画，能够设计出很棒的交互，增强产品体验。我们常常会为一些炫酷的效果而惊叹，这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外，交互和体验也是一个很重要的方向，但这却被很多前端所忽视，国内的产品交互大多也比较平淡无奇，可能是考虑到迭代速度，可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。

说实话我很少接触到一些复杂的交互效果的需求，可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求，花了一天多的时间基本实现，过程中收获很多，让我对交互动画有了更深的认识。

触发式动画和伴随式动画

动画分为触发式动画和伴随式动画，触发式动画是指当用户触发之后，动画就从开始一直运行到结束，不需要再次交互，比如基于css3的animation实现的各种动画。而伴随式动画是随着用户的交互过程而逐步进行，用户可以控制动画的过程，比如滚动视差动画。伴随式动画因为用户可以控制动画的过程，交互性和体验更强，当然难度也会更大一些。

复杂伴随式动画的分析

复杂的动画都是有很多变化的，到了某个值或者百分之多少换成另一种效果。就像滚动视差动画，滚动的不同方向，滚动的不同位置会有不同的动画效果。

从设计图开始，通过样式和模版组合各种资源形成静态的页面，之后的动画和业务逻辑都是对这些模版、样式、资源的处理。动画其实就是某一些样式从某个值变化到某个值的过程，当然这里指的是属性动画。

分析一个复杂的伴随式动画，首先要找出主要变化的是什么属性，然后这个属性变化有哪些阶段，每个阶段有哪些属性值变化，是以怎么样的规律变化的。也就是“阶段”、“属性”、“变化规律”这3个要点。

伴随式动画实例分析

比如这个动画，阶段分为向上和向下两个阶段。向上阶段变化的属性是蒙层的透明度和图片的位置，蒙层透明度变化规律是从0到1匀速变化，图片位置的变化规律是scrollTop变化值的一半。向下的阶段变化的属性是图片的高度，变化的规律是初始高度加scrollTop的绝对值。

我最近做的那个动画比这个例子更复杂一些，向上的阶段又细分成了2个小阶段，第一个阶段是不变的，到第二个阶段才开始变。

这里变化的属性中有图片的位置和显示范围，比如向上的过程中图片位置上移，向下的过程中显示范围变大。这种效果通过图片标签做起来比较麻烦：位置的改变还可以通过改变图片标签的位置来实现，但是显示范围的变化却需要开始隐藏部分显示部分，然后交互的时候通过改变位置来显示全部，比较麻烦。如果通过背景图片来实现会简单很多：位置的变化直接修改background-position，不需要修改元素位置所以也不会触发reflow；显示范围的变化可以通过修改元素高度，不需要考虑隐藏和位置的变化。

划分清楚有几个大小阶段，每个阶段有哪些属性值变化，每个属性值变化的规律是什么之后实现就变得简单了。

小程序实现伴随式动画的坑

在h5中实现了比较满意的效果，但放到小程序中发现有很大问题。因为小程序是把渲染和逻辑分来处理的，两者需要异步的传消息来通信，随着滚动，逻辑进程计算出很多新的属性值，通过setData异步批量的传给渲染进程，在高端机中几乎是同步的实时地，但在一些性能较差的手机中能明显感觉出这种异步来，现象是我滚动完了一段时间之后，相关的元素的位置和其他属性才开始变化，慢很多拍。

小程序这种逻辑和渲染分开然后异步通信的方式是独一份，所以这样的坑我也是第一次遇见，目前在想解决的方式，估计要改变交互效果的方案了。

总结

合理的设计一些动画能增强产品的体验。动画分为触发式动画和伴随式动画，分析伴随式动画需要先划分出有哪几个阶段，然后每个阶段有哪些属性值变化，变化规律是什么。如果涉及到图片位置和显示范围的变化，用背景图片实现会简单很多。另外，小程序的渲染和逻辑分离的特殊性，会导致低端机下伴随式动画的和交互行为的不同步，需要特别注意。