MartinRGB
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
在UI动效制作中，设计者会经常使用到AE。利用AE组织界面流程，制作动态原型，可以极大的加速我们的工作流程。
AE具备一个强大的功能，那就是表达式，通过表达式，建立图层属性与关键帧的相关关系，无需手动K帧，便可以制作出动画效果。本文将讲解表达式基础，表达式的含义，并传授一些调整表达式的方法，以满足你的工作需求。
那么，什么是表达式呢？
对于经常阅读Thougtbot的读者来说，他们可能会对表达式非常熟悉。因为大部分Thoughtbot的读者对于web上使用的脚本非常熟悉，这些脚本除了能够演化成应用本身，还可以定义元素的属性和行为。Adobe基于JavaScript构建了表达式，因此对于JS使用者来说，他们能很快上手表达式。当然，在有些情况下，制作原型动效不一定会用到表达式，但是我发现，对于一些可复用效果，比如说惯性和弹性，使用表达式就非常的高效。
对于新手来说，他们往往不知道哪些表达式才能达成他们想要的效果。实际上，有些表达式早就写好了等着各位去复用。Dan Ebberts对此贡献良多，在他的网站 motionscript.com 中，他详细的解析了表达式，并讲述了表达式高效使用的方法，非常适合AE进阶者。
今天，我们就来创建一个比较流行的惯性表达式。通过在正弦函数中插入 振幅（amplitude），振频（frequency），decay（衰减）等变量，让运动数值稍微超出最终目标值，然后再通过振动返回最终目标值。你只需复制粘贴下面的代码，编辑上述变量，便可达成此动效。
nearestKeyIndex = 0;
if (numKeys > 0){
nearestKeyIndex = nearestKey(time).index;
if (key(nearestKeyIndex).time > time){
nearestKeyIndex--;
}
}
if (nearestKeyIndex == 0) {
currentTime = 0;
} else {
currentTime = time - key(nearestKeyIndex).time;
}
if (nearestKeyIndex > 0 && currentTime < 1) {
calculatedVelocity = velocityAtTime(key(nearestKeyIndex).time - thisComp.frameDuration / 10);
amplitude = 0.1;
frequency = 2.0;
decay = 4.0;
value + calculatedVelocity * amplitude * Math.sin(frequency * currentTime * 2 * Math.PI) / Math.exp(decay * currentTime);
} else {
value;
}
在AE中添加表达式
现在，建立一个位置属性动画，K 2个帧就好。创建完关键帧后，右键单击第二个关键帧，关键帧辅助中，选择缓动。当然，也可以不选择缓动，但是缓动可以减缓最后下降的速度，让效果看起来更好。
下一步，按住'alt'左击位置属性旁边的秒表开启表达式，然后将表达式复制进去。
效果如下
如果运动感不够，加点运动模糊，能够让动画看起来更流畅。
技法掌握了，那么可以试着调节变量。
减少振频 增加衰变 减少振幅 增加振频 减少衰变 增加振幅
通过表达式，只需2个关键帧就可以打造栩栩如生的动画效果。各位可以举一反三，为其他属性添加此回弹效果。
全部评论：33条
更多作品
发表评论