如何使 CSS 动画更加顺滑自然?

4,111 阅读4分钟
原文链接: svgtrick.com

在CSS推出transitionanimation之前,动画设计师和开发者之间是完全割裂开的两个工作。但是,随着transitionanimation的推出,动画与代码有了更多的联系,动画设计师和开发者联系越来越紧密了。设计师必须了解一些代码方面的知识;同样开发者也得了解一些动画设计方面的知识。

比如,当一个设计师让开发人员实现一个弹性的动画,没有其它的动画细节的描述。如果开发人员和设计师没有一些共同的知识储备,沟通起来就很困难了。开发者没有足够的信息去了解设计师想要的动画的具体细节;同样,设计师也没法从技术上来和开发者来沟通动画的一些细节。所以,我们有可能会得到下面这样一个动画效果:

demo地址

上面的效果中规中矩,也许是符合设计师的描述,但是,不够生动自然,非常的僵硬。如果,有一些基本动画只是,完全可以做的更好。

首先,可以改变下动画运动的曲线。在上面的例子中,我们选的匀速的动画曲线,意味着动画对象是匀速运动的。这种效果,当然是不符合真实物体运动的。

我们可以改变下动画的运动曲线即速率,把动画曲线改为ease。这样就可以使动画以低速开始,然后加快,在结束前变慢。这样也就符合自然界的运动规律:

demo地址

虽然,动画看起来比之前看起来舒服一点点,但还是有很多的地方可以优化。比如,这个红色的盒子在整个动画的过程中看起来还是很机械和僵硬。我们可以在盒子落下来之后加点延迟:

现在盒子看起来就像真实世界中的跳跃运动,看起来有个蓄力的过程,我们还是可以使它看起来更加自然一些。

如果,你看过卡通动画,你会注意到,卡通片里的动画都经过了夸张来模拟真实世界中的运动效果。这样,可以使动画更加的真实有魅力。

在这个动画开发的阶段,设计师和开发者之间的沟通也更为重要。设计师可能不是很清楚这些细节,这就要开发者主动和设计师沟通这些细节。

下面,先对盒子加个扭曲变形的效果:

demo地址

现在,盒子的效果就生动了很多,感觉活起来了。但还是还有很多的地方需要调整。

接下来在盒子下落之后增加一点反弹的效果:

demo地址

反弹的时候也需要加一点扭曲变形的动画效果:

demo地址

这样一个符合真实世界的弹性动画就完成了,当然,我们还可以使用贝塞尔曲线来使动画更加自然一些。

demo地址

如果,设计师或者是开发者没有一些动画的基本知识,要去实现这样一个动画效果,还是有点困难的。当然,这篇文章也是触及一点皮毛。总之,对于动画开发来说,一些动画的基本原理还是很重要的。

对于动画原理,迪士尼的The Illusion of Life: Disney Animation这本书讲的非常不错,这本书就是专门针对动画设计提炼了12个基本的动画原则,虽然是用来指导开发卡通动画片的,但是用在网页开发也同样适用,可以好好来读读。

推荐看看这篇译文,这篇文章就结合了迪士尼的12动画原则来阐述来在网页动画开发中怎么来运用这些原则,使动画更加生动自然。

当然,对于CSS3动画,在实现方法上多种多样。这里需要提醒的是贝塞尔曲线的运用非常重要,我们可以使用cubic-bezier()方法来使用自己定制的运动曲线。重要的是需要设计师和开发者都能理解这些参数的意义,这样才能通过设计师和开发者之间的合作,制作出精美的动画。

推荐资源:

12 basic principles of animation-维基百科上对动画原则的一个介绍。

The Guide to CSS Animation: Principles and Examples-Smashing Magazine对原则的介绍。

Animation in Design Systems-Sarah Drasner写的一篇关于动画设计的文章。

Animation property-css-trick对css3动画的一个详细的介绍。

Transition property-css-trick对transition的一个详细的介绍。

CubicBezier.com-制作贝塞尔曲线的在线工具。

本文主要是从Making CSS Animations Feel More Natural这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!