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

动画、交互和产品体验

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

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

触发式动画和伴随式动画

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

复杂伴随式动画的分析

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

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

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

伴随式动画实例分析

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

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

这里变化的属性中有图片的位置和显示范围，好比向上的过程当中图片位置上移，向下的过程当中显示范围变大。这种效果经过图片标签作起来比较麻烦：位置的改变还能够经过改变图片标签的位置来实现，可是显示范围的变化却须要开始隐藏部分显示部分，而后交互的时候经过改变位置来显示所有，比较麻烦。若是经过背景图片来实现会简单不少：位置的变化直接修改background-position，不须要修改元素位置因此也不会触发reflow；显示范围的变化能够经过修改元素高度，不须要考虑隐藏和位置的变化。

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

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

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

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

总结

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