Web 动画原则及技巧浅析
Posted ChokCoco
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web 动画原则及技巧浅析相关的知识，希望对你有一定的参考价值。
在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：
其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。
Squash and stretch -- 挤压和拉伸
挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。
应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。
看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。
原理动画如下：
类似的一些比较有意思的 Web 动画 DEMO：
CodePen Demo -- CSS Flippy Loader 以上是关于Web 动画原则及技巧浅析的主要内容，如果未能解决你的问题，请参考以下文章