阻尼动画提到阻尼,需要介绍三个概念:临界阻尼、过阻尼、欠阻尼。 临界阻尼生活中一些高档的门或橱柜。他们在开合的过程中为了不造成太大的声响,他们的机械结构阻尼会尽量设计接近临界阻尼。这个过程最容易让人接受,不会感觉有外界干扰。过阻尼和欠阻尼,通常能让你感觉到有一只隐形的手,阻碍或促进运动。 过阻尼从字面上会容易理解,就是阻尼很大,阻碍运动的发展。有些自动门或电梯门在闭合的过程中,在最后段里往往需要更长的时间。另外,记忆枕的恢复的过程也是过阻尼。 欠阻尼阻尼不够,继而形成了振荡的特征。生活中的一些弹簧门,在关闭的过程中,会多次摆动,最终趋于闭合。 做一个比较细腻的界面动画时候,如果追求理性一些,可以把动画的成果拆解成三个阶段。启动、运行、收尾。设计师需要花更多的时间去考虑启动与收尾过程。
举个例子请大家关注启动与收尾阶段。 动画曲线仅作示意感受,可能与实际动画有所出入。 呼吸动画呼吸动画,常用于界面元素的提醒。 对于这个动画,设计师最直观的印象就是闪烁。在实施的过程中,对于闪烁一词会被赋予不同的理解。
如何把动画做得更细腻,就在于如何将渐显与渐隐的过程如何描述得更加仔细。 对于最早的渐显、渐隐动画,我首先想到了三角函数。 仔细观察这个函数,可以发现他的特点是在一个周期里是启动渐增、收尾减缓的过程。适合开发利用简单代码实现的动画效果。 有兴趣的同学可以用原型感受一下。做闪烁动画,用到三角函数其实就可以满足大部分场景。 我在尝试的动画的时候,把他作为呼吸函数来看,总觉得哪里还是不太自然。看起来“呼吸比较急促”。 |