AEJoy —— 表达式之模拟超越与反弹(一)【JS】

453 阅读2分钟

效果图

超越(Overshoot) —— 应用于旋转属性的基础衰减正弦波振荡

00.gif

反弹(Bounce) —— 一个基本的反弹表达式已经应用到旋转属性

01.gif

引言

有时你可能想要用一点物理现实主义来修饰你的动画动作。例如,你可能有一个图层快速地从 0 放大到 100% ,你想添加一点超越(overshoot)和振荡,最终让它稳定在 100% 。另一个例子是,如果你有一个物体落入帧,你想让它在触底时反弹(bounce)一点。这两个场景看起来很相似,但它们代表了非常不同的物理过程。这些模拟都可以用表达式来创建,但重要的是要选择正确的表达式。在本文中,我将详细介绍这些动画工具,并提供一些关于如何以及何时应用它们的技巧。

超越 vs. 反弹

在反弹和超越两种情况下,你都在处理衰减的振幅。

对于超越,你通常处理的是谐波振荡,就像钟摆或弹簧一样。这意味着当振幅衰减时,频率保持不变(在物体的共振频率处)。这通常用指数衰减的正弦波来模拟。这是一个简单的解决方案,尽管肯定有一个技巧可以让初始振幅与传入动画正确匹配)。

这是一个指数衰减的正弦波的波形,用来模拟谐波共振。注意,当振幅衰减时,频率是不变的

image.png

反弹是一个完全不同的情况。当一个物体反弹时,每次弹跳都会失去能量,这会影响振幅和频率。当反弹的幅度减小时,它们发生得更频繁。这意味着正弦波模拟不足以应对反弹。事实上,弹跳波形实际上是一系列振幅递减的抛物线。物体在反弹的顶部停止,然后加速(由于一些类似重力的现象),所以涉及的数学是完全不同的。

此波形由弹跳模拟表达式生成。请注意,当物体失去能量时,反弹发生得更频繁

image.png