聊聊动画

前言

动画主要的目的是让UI的变动变柔和，增强用户体验。

优秀的动画让用户感觉不到页面的跳转、感觉一切操作很自然。

如果动画过于浮夸，风格跟不上潮流，或者动画的时间把握不好，反而会造成用户体验下降的尴尬情况。

首先聊聊动画怎么实现（只谈原理不聊代码）

关键帧动画

大概就像折线图一样，取其中的关键点，确定其位置，然后将各个点连接起来。

关键帧动画就是将动画拆散成几段，将关键点的状态实现，然后为其创建补间动画。

跟flash、PS、AE之类的没什么区别。

最基础的关键帧动画只要两帧就够了。那么你只要能把起止状态的页面画出来，就足够了。比如透明度渐变、缩放、位移、旋转等等。

复杂一点的，也就多几个关键帧而已，一般是组合动画，比如一个按钮点击之后，放大一个单位，缩小两个单位，再放大一个单位，一个有点弹性的动画就做好了。当然用阻尼这些东西会更简单，但是有些情况阻尼参数不好拿捏，像这种简单动画我更倾向于用关键帧实现它。

路径动画

路径动画就复杂一点了，如果让你位移的动画转弯，关键帧方式就比较难处理了。路径动画的难点在于路径的绘制，如果你把你的动画的过程所走的路径画出来，那么路径动画就手到擒来了。需要注意的就是，绘制路径其实是无数个关键路径组成的，其实就是多关键帧的位移动画。所以想要动画顺畅，要注意关键路径的分布。

交互式动画

交互式动画跟以上两个都不同，比如我要做一个复杂的位移动画，关键帧和路径方式当然都能做，但是无论怎么做，路径之间都会有很大的间隔，而如果用户用手指去拖动一个视图移动呢？如果每毫秒都能获取到当前拖动到的位置，那么这个路径将会有无数个关键帧组成，无数个关键帧意味着什么？动画将会非常流畅。配合手势，交互式动画会让用户有掌控一切的感觉。

阻尼系数和变速动画

阻尼系数这个概念我也说不准，就像弹簧一样，拉伸的弹簧突然放松，弹簧会收紧，但由于惯性，收紧会超过一点，然后弹簧又会拉伸，超过一点又会收紧，像这样逐渐衰退的过程。动画中使用带阻尼的动画，会让动画效果更加俏皮，有些动画也能更加拟物化，比如果冻动画之类的。

变速动画主要就是动画过程的速度不是匀速的，说着简单，但是体验大不相同，加速的下落动画，会更加真实，就像自由落体那样。

动画时间的艺术

动画的持续时间是个很关键的问题。过快的动画会体现不出动画的作用，而过慢的动画会让用户不耐烦。

比如一个按钮，连续点击会增加积分，一般人最快点击速度按照每秒5下来算，那么0.2秒的动画效果，就不会阻碍用户的交互，非常自然，如果1秒的动画，那么用户就会反感了。卧槽？？？我特么点了5下才成功1次？不打断用户交互的动画，才算好的动画。

总结

每一次投入实践的好动画，都是要一点点体验，一点点修改才能做好的，差距在毫秒之间，体验千里之别。