在Web动画方面，有一套非常经典的原则--Twelvebasicprinciplesofanimation[1]，也就是关于动画的12个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：
AnimationPrinciplesfortheWeb[2][译文]网页动画的十二原则[3]其中使用的示例DEMO属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的DEMO，换成一些到今天非常实用，非常酷炫的动画DEMO效果。
Squashandstretch--挤压和拉伸挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。
应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。
看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。
原理动画如下：
类似的一些比较有意思的Web动画DEMO：
Squashandstretch-1CodePenDemo--CSSFlippyLoader??ByJhey[4]
仔细看上面这个Loading动画，每个块在跳起之前都会有一个压缩准备动作，在压缩的过程中高度变低，宽度变宽，这就是挤压和拉伸，让动画看上去更加真实。
OK，再看两个类似的效果，加深下印象：
Squashandstretch-2CodePenDemo--CSSLoadingAnimation[5]
Squashandstretch-3CodePenDemo--CSSAnimationLoader-JellyBox[6]
简单总结一下，挤压和拉伸的核心在于保持对象的体积一致，当拉伸元素时，它的宽度需要变薄，而当挤压元素时，它的宽度需要变宽。
Anticipation--预备动作准备动作用于为主要的动画动作做好准备，并使动作看起来更逼真。
譬如从地板上跳下来的舞者必须先弯曲膝盖，挥杆的高尔夫球手必须先将球杆向后挥动。
原理动画如下，能够看到滚动之前的一些准备动作：
看看一些实际应用的chang场景，下面这个动画效果：
Anticipation1CodePenDemo--Never-endingboxByPawel[7]
小球向上滚动，但是仔细看的话，每次向上滚动的时候都会先向后摆一下，可以理解为是一个蓄力动作，也就是我们说的准备动作。
类似的，看看这个购物车动画，运用了非常多的小技巧，其中之一就是，车在向前冲之前会后退一点点进行一个蓄力动作，整个动画的感觉明显就不一样，它让动画看起来更加的自然：
AnticipationStaging--演出布局Staging意为演出布局，它的目的是引导观众的注意力，并明确一个场景中什么是最重要的。
可以通过多种方式来完成，例如在画面中放置角色、使用光影，或相机的角度和位置。该原则的本质是