在网页前端中正确使用动画的终极指南:缓和

阅读 5 · 发布日期 2020-11-19 · 添加人:有品网络

在网页前端中正确使用动画的终极指南:缓和

平和帮助物体移动更自然,这是动画的一个基本原理。《迪士尼动画原理》(TheIllusionofLife:DisneyAnimation)一书对此进行了详尽的描述,该书由两位著名的迪士尼动画师奥利·约翰斯顿和弗兰克·托马斯撰写。

要想让动画看起来不像是机械的和人工的,物体的运动应该有一个加速或减速的过程,就像所有在物理世界活动的物体一样。

具有缓动效果的动画比线性动画看起来更自然(在这里提示:注意看每段竖格的间隔)

两分半直线运动。

物体在没有任何物理力作用下作直线运动,即匀速运动。由于这个原因,它们看起来很不自然,而且在人眼看来是人造的。

所有的动画应用程序都使用动画曲线,我将试图解释如何去阅读它们,以及它们意味着什么。这些曲线表示物体的位置在同一时间间隔内如何变化(xaxis=time)(yaxis=position)。目前的情况是,运动是线性的,所以物体同时走同样的距离。

移动直线型曲线

比如,直线运动只能用来改变物体的颜色或透明度。通常我们可以用它来表示一个物体的状态而不改变它的位置。

缓入或加速1/2曲线。

在曲线上,我们可以看到物体在一开始的位置会变得很慢,而速度会逐渐增加,这意味着物体会以一个确定的加速度运动。

加速曲线

这个曲线应该用于当一个物体以全速飞出屏幕时,例如系统通知或界面卡。但是要记住,只有在对象永远离开屏幕,并且不能调用或者返回它们的时候,才应该使用这种曲线。

从屏幕上滑出卡片的加速曲线。

动画片的曲线帮助表达正确的情绪。以下例子中,我们可以看到所有物体移动的时间和距离都是一样的,但即使曲线上很小的变化也会影响动画的气氛。通过改变曲线,你当然可以让物体尽可能的接近现实世界。

时长与距离相同,但气氛不同。

两分半的缓动或减速曲线。

这是一条相反的缓入线,所以物体会快速地覆盖很长的距离,然后缓慢地下降,直到最后停止。

减慢曲线

这种曲线应该在元素出现在屏幕上时使用——它以全速向上飞入屏幕,然后逐渐减速直至完全停止,这也适用于其他卡片或从屏幕外出现的物体。

缓慢的曲线,使得动画表现得更好。

四分之一缓入缓出曲线或标准曲线。

这条曲线让物体在一开始就得到速度,然后慢慢地把速度回到零。这类动作在界面动画中使用得最多。使用标准曲线时,你可能会犹豫在动画中使用哪种运动。

标准化曲线

在材料设计指南中,使用不对称曲线会更好,使运动看上去更自然、更真实。为了使加速的持续时间小于减速的持续时间,曲线的终点必须比起始点更明显。这样,用户就会更多地关注元素的最终移动,因此也就关注了元素的新状态。

看一下对称与不对称标准曲线的区别。

使用缓入缓出功能,将对象从屏幕的一部分移动到另一部分。这样,动画就避免了引人注目的戏剧效果。

纸牌在屏幕上的移动以及相应的曲线不对称。

屏幕上的元素消失后,应该使用同样的移动类型,但是用户可以随时将其恢复到以前的位置。其中包括抽屉导航等。

抽屉导航将标准曲线隐藏在屏幕上。

通过这些例子,你可以看到很多初学者忽视了一个基本规律:开始动画并不等于结束动画。和抽屉导航一样,它也是以速度下降曲线出现,以标准曲线消失。此外,根据谷歌的物料设计语言,物品应该出现更久,以吸引更多的注意力。

侧菜单的出现与消失,分别由减速与标准曲线完成。

用cubic-bezier函数()描述曲线。因为它基于四个点,所以叫做立方。第一个点0;0(左下)和最后一个点1;1;1(右上)已在图上定义。

根据这个方法,我们只需要描述通过函数的四个参数给出cubic-bezier()()的图上的两个点:前两个是坐标x和y的第一个点,后两个是坐标x和y的第二个点。

建议使用easings.net和cubic-bezier.com网站,以简化曲线的工作。首先列出了最常用的曲线,你可以把它们的参数复制到原型中。另一个来源允许您使用曲线的不同参数,并立即看到物体如何移动。

不同类型的函数三次贝塞尔曲线及其参数。

以上由东莞网站制作——有品网络编写,如有不足之处,欢迎指出。