阅读模式:

Web 动画原则及技巧浅析

阅读量:12  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:在 Web 动画方面,有一套非常经典的原则 -- Twelve basic principles of animation,也就是关于动画的 12 个基本原则(也称之为迪士尼动画原则),网上对它的解读延伸的文章也非常之多:Animation......

Web 动画原则及技巧浅析

在 Web 动画方面,有一套非常经典的原则 -- Twelve basic principles of animation,也就是关于动画的 12 个基本原则(也称之为迪士尼动画原则),网上对它的解读延伸的文章也非常之多:

  • Animation Principles for the Web
  • [译文]网页动画的十二原则

其中使用的示例 DEMO 属于比较简单易懂,但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习,并且替换其中的最基本的 DEMO,换成一些到今天非常实用,非常酷炫的动画 DEMO 效果。

Squash and stretch -- 挤压和拉伸

挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体,如弹跳球,或更复杂的结构,如人脸的肌肉组织。

应用在动画中,这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸,它的宽度(三个维度,还有它的深度)需要相应地水平收缩。

看看上面这张图,很明显右边这个运动轨迹要比左边的真实很多。

原理动画如下:

类似的一些比较有意思的 Web 动画 DEMO:

CodePen Demo -- CSS Flippy Loader

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: