前端迪士尼动画守则上
阅读此文章前，建议大家先观看一下这个迪斯尼的小视频, 本文的灵感来自于该视频的哈
该视频是描述迪士尼这么多年积累的动画开发经验和规则。
有人就好奇了，迪士尼的动画守则跟我们前端有啥关系吖？
当然有关系！
- 我们知道在前端开发中，我们少不了使用css3
transiton(过渡)和animation(动画)来制作页面生动的交互效果。 - 然而生动形象的动画往往建立在正确的动画规则基础下。
看到这些原则的时候，我就在思考，是否在前端开发动画中，能够运用到这些原则呢？故自己根据这些原则动手试了下相应的动画效果。
由于篇幅过长，故分成上下两篇来描述这些原则哈
守则一：squash and stretch 挤压和拉伸
当一个软性物体和地面撞击时，会有压扁和拉伸的状态，其真实的反映了现实中的物理碰撞情况，通过挤压和拉伸，极大的加强了物体碰撞时的动画效果，十分生动抢眼。
如同下面这个css动画，小球的弹跳运用了守则一，显得更为生动
守则二：Anticipation 准备动作
现实中，许多动作的发生都存在着准备过程，如篮球中跳投时的屈膝和手腕手臂弯曲的过程，例如这个手笔直的伸向远方的动作，一般人的动作是直接画A位置然后到B位置。但是为了加深观众对这个动作的印象，就会在AB中间插入一帧预备动作X。这样会更有力度感。预备动作是个神发明啊！！！让动画师们不仅仅只是对于现实生活动作的描摹，而是新的艺术创造。个人认为准备动作的意义在于一方面让观众理解知道接下来将会发生的过程，第二方面事得最终整个动作更加逼真。
如同下面的css动画， 胖子出锤前的抖动准备，增加了出锤的沉重勇猛的感觉，这就是准备动作带来的增效
守则三 : Staging 上演
英文没学好=。=！，（有道翻译的意思是上演）
我个人认为该守则，表达的意思是通过如同舞台出场的方式，来强调物体对象在场景中的展现，可以通过模糊渐变，抖动，闪烁，光影的等场景变化来突出想要强调的对象。
如下面的大棒！！，运用闪烁的阴影和色彩的变化，营造出定海神针的威武。
查看源代码
守则四：Straight Ahead 和 Pose to pose 逐帧画法和关键帧画法
顾名思义逐帧画法是一帧一阵接着画，关键帧则是先画出关键的动作点帧，然后再再有加中间帧画手画中间的画。例如 原画师画好了这些关键帧
然后交给另外一个人补充完整
我们在设计css动画时，也是通过先写关键帧的状态，然后通过浏览器渲染引擎去计算关键帧之间的状态差值，然后补齐关键帧之间状态变化的每一帧，这里就不做展示了。
守则五：Follow Through & Overlapping Action 动作惯性跟随和动作重叠
比如说做投掷的动作，投球出去后胳膊因为惯性没有停下来而是继续向前摆，所谓的动作惯性跟随就是发生在这个时刻，胳膊没有停在本应该停止的位置上而是靠惯性继续摆动一段时间然后反方向摆回来。动作重叠本质上是因为其他动作的连带性而产生的跟随动作，而且时间上动作间有互相重叠部分。比方说，如果一只奔跑的小狗突然停下来，她的耳朵可能仍然继续向前因为惯性运动着。
守则六：Slow in and Slow out （缓入缓出）
动作的起势和收势都是慢的，而中间的部分则是快的。这样一个动作才不会特别平板匀速，而会更有力度感一些。 例如一个硬币主动由1处滚到25处。
如下面的css动画
