计算机动画推导,AE表达式实现逼真弹性动画

李菲浩

于 2021-07-29 16:54:33 发布

阅读量547

点赞数

文章标签：计算机动画推导

这次分享的内容是非常重磅的！以至于我自己都不舍得拿出分享！虽然分享的是一位强大的老外(http://www.motions cript.com/articles/bounce-and-overshoot.html 是Adobe的推荐博客)写出来的表达式，但还是有占为己有的心态，好吧，那么本次分享到此结束~谢谢观看。

嘿嘿嘿，这次分享的是非常实用且高效的表达式！弹性表达式，Bounce 和 Overshoot！利用这个两个表达式你可以轻而易举地实现各种弹性动画，如抖动、弹跳动画等。是的，你没听错，只要998个赞，你就能轻松获得随意加弹性Buff！赶快拿起你的鼠标点赞吧！

表达式的推导过程可以点击查看上面的链接，原作者非常详细的阐述了他的推导过程，大家快去膜拜吧！而且作者非常无私的贴出了两个(Bounce & Overshoot)可以直接进行关键帧的表达式，再次膜拜(室友问我为什么跪着打字)。后面我会提到怎么去快速理解和掌握这个弹性两个表达式。

首先我们先来了解一下什么是Bounce 和 Overshoot吧！

Bounce

图表：

...........................

Overshoot:

图表：

我可以简单将：

·Bounce 理解为“反弹”，如皮球落地反弹的效果；

·Overshoot(过冲、夸张的)理解为“抖动”，如果冻抖动的效果。

说了这么多，我们来表达式的真容吧！原作者在他的文章末尾贴出了可以直接进行关键帧的两个表达式，分别是(斜体部分)：

Keyframe Overshoot

freq = 3;

decay = 5;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time) n--;

}

if (n > 0){

t = time - key(n).time;

amp = velocityAtTime(key(n).time - .001);

w = freq*Math.PI*2;

value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

}else

value

...........................

Keyframe Bounce Back

e = .7;

g = 5000;

nMax = 9;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time) n--;

}

if (n > 0){

t = time - key(n).time;

v = -velocityAtTime(key(n).time - .001)*e;

vl = length(v);

if (value instanceof Array){

vu = (vl > 0) ? normalize(v) : [0,0,0];

}else{

vu = (v

}

tCur = 0;

segDur = 2*vl/g;

tNext = segDur;

nb = 1; // number of bounces

while (tNext

vl *= e;

segDur *= e;

tCur = tNext;

tNext += segDur;

nb++

}

if(nb <= nMax){

delta = t - tCur;

value + vu*delta*(vl - g*delta/2);

}else{

value

}

}else value

...........................

其中运用了很多数学知识，反正我是看醉了。幸运的是，要想使用它却不需要我们完全搞懂表达式的原理。

Ok，那么怎么使用它呢？

第一步，将上面两套表达式ctrl+c复制到你的云笔记中，方便你的随时随地的调用它(如果你可以复制到脑子里的话也行)。

看到这步，恭喜你！你已经学会了80%了。

...........................

下面我将拿 Keyframe OverShort 来举例。

该表达式的工作原理需要采样关键帧运动速率，你想要表达式正常工作，就要给最后一个关键帧一个速度值。也就是说抖动效果是由关键帧的速度值及表达式中的频率(freq)、衰减(decay)共同来控制的。简单的讲，使用了该表达式的某属性的最后一个关键帧的速度值将会很大程度的影响表达式的抖动效果(好绕口啊)。所以当你感觉抖动效果不明显时，也可以试试改变一下关键帧速率。(我第一次分享该表达式给其他同学时，很多人反映

没有效果，往往都是因为起关键作用的最后一个关键帧速度值为0所导致的)

如下图所示，OverShort表达式中的freq、decay保持不变，改变最后一帧的速率，弹性效果随之改变(红圈表示最后一帧的速度值)。

a：

...........................

[温馨提示]

1.点击“显示后表达式图表”，方便我们更好的感受弹性带震撼(同时计算机的处理负荷会变大哦，所以看完记得随手关掉)。

2.该表达式可以用在一维、二维及三维属性(例如位置、旋转、缩放等等)。

...........................

不知道到这里大家能否学会Bounce 和 Overshoot的用法。其实很简单，只是可能被我说复杂了。没关系，请看下面我蹩脚的演示：

step 1：打好关键帧：

step 2：给关键帧加上运动曲线(由于录屏大小的限制，看不到右键菜单，其实就是给关键帧加了一个缓动)：

step 3：让最后一个关键帧的速度值不为0(纵坐标表示速度，我选中其中一个关键帧之后按了F9，让其缓动)：

step 4：将表达式复制到位置属性中并轻点小回车键：

step 5：准备好可乐和炸鸡，然后慢慢欣赏你的成果...

相信看到这里你应该已经学会了Bounce 和 Overshoot表达式的用法，是不是超简单，超实用！再次感谢原作者(http://www.motions cript.com/articles/bounce-and-overshoot.html )的无私分享！表达式着实能为我们省下不少宝贵的时间，同时效果还不会打折反而更佳。表达式只是一门语言，当你掌握足够多的“词汇”，“语法”，“语句”你也可以尝试编写更实用的表达式，随时调用。期待大家脑洞打开！

分享到此结束，如果你觉对你有帮助就点个赞吧！感谢观看！