AE铃铛动画_AE用表达式制作可爱小铃铛

效果图

1、绘制铃铛

2、整理图层关系。使用AEUX插件将在Sketch中绘制的铃铛图标同步到AE中，用AI绘制的铃铛也可以导入到AE中，设置合成帧率为60帧/秒，并将图层关系组织成下图的样子，组织完毕将在合成窗口中得到右侧的图形。

3、打关键帧。设置铃铛罩的旋转中心点并在旋转属性上打下关键帧，由于铃铛芯是被罩子带动而进行摆动的，所以复制罩子的旋转关键帧粘贴到铃铛芯并往后一点错位放置，利用两个部件运动的时间差就能做出铃铛罩子先动带动铃铛芯后动的效果。

4、播(bē)放。

在AE中图层或图形的属性都会对应一个或者一组参数，动画的本质就是特定属性参数的持续变化。比如，一个图形在1秒内顺时针旋转了90度，即该图形的旋转属性(Rotation)参数在1秒内在初始值的基础上累加了90，按住Alt键并点击旋转属性左端的小秒表时就会在右边原来打关键帧的区域出现表达式的输入框，在这个框中输入数值，就相当于把这个值赋给所对应的属性，在旋转属性下的表达式输入框中输入90就表示该图层/图形的旋转角度为90度，即便时间指针走动，它依然保持90度，这种情形下这个图层/图形是静态的。

输入一个公式，这个公式能根据某个参数变化产生不一样的值，比如能根据时间的变化(时间指针的走动)持续计算出新的结果，那动画就产生了，这个公式就是表达式了。在旋转属性下填入公式。

time是AE系统时间变量，从0开始累加，当累加到1的时候表示时间从0秒走到1秒，time*90则意味着在1秒时间内，该图层/图形旋转角度从0度逐渐变成90度，再走0.5秒，就再旋转45度。

永不停摆的铃铛罩子，用到的表达式只有一句：r=Math.sin(time*10)*100;

Math.sin是AE中正弦函数，time*10是为了使铃铛摆动的频率更高，*100是为了使铃铛摆动的幅度更大，也就是旋转的角度更大。

在公式后面加上一个跟随time变大的减数，比如r=Math.sin(time*10)*100-time*10，随着时间值越来越大，r的值也会越来越小，r值越来越小却不会停留在0附近，它会变成越来越小的负数，铃铛就会往逆时针方向继续甩下去。

把公式改造成r=Math.sin(time*10)*100/(time*10+1)，得到一条逐渐变平的波浪线，但线性增大的除数使r值的衰减过程非常缓慢，这个波变平的时间非常漫长，铃铛会在较剧烈晃动几下之后持续摆动许久。

用r=Math.sin(time*10)*100/(Math.exp(time))表达式，得到一条这样的曲线和动画。

铃铛罩摆动至停止动画

接下来要实现的就是铃铛芯的摆动，跟K帧动画思路一样，同样要对铃铛芯做一个延迟动画，在这个60帧/s的合成里，当指针刚走1帧，铃铛罩子“内壁”就已经挨到了铃铛芯，故延时时间可以设为1/60≈0.0167s。写成0.02s。

复用罩子摆动的表达式，替换上延迟的时间并作条件判断，芯子的旋转属性下的表达式为：

delay=0.02;//定义铃铛芯开始运动相对于罩子延时0.02s

delay_t=time-delay;//结合上一句，铃铛芯的时间应减去0.02s的时间差

if(time>delay){//如果时间大于0.02s时

amp=100;//定义铃铛芯的振幅初始值为100

r=Math.sin(delay_t*10)*amp/Math.exp(delay_t);//铃铛芯

}

else{

r=0;

};//时间小于0.02s时，铃铛芯旋转角度为0，就是时机不到按兵不动

r;//表达式最终需要传出一个或者一组参数给到相应属性，涉及到较多的运算时，最后最好再把变量名/参数拎出来一下。

铃铛芯运动衰减比较快

在时间大于1秒时强行加大芯子的摆动幅度, amp=time*50+50，amp的值仍然是初始值amp=1*50+50=100，这样1秒前后的动画曲线就会顺滑衔接，动画当然就不会出现跳跃。类似的写法还有：amp=time*75+25，甚至直接是amp=time*100，同样能保证1秒处的自然衔接，但是这个芯子浪的有点过头，维持amp=time*50+50的写法。

delay=0.02;

delay_t=time-delay;

if(time>delay){

amp=100;

r=Math.sin(delay_t*10)*amp/Math.exp(delay_t);

if(time>1){

amp=time*50+50;

r=Math.sin(delay_t*10)*amp/Math.exp(delay_t);

};

}

else{

r=0;

};

r;

铃铛芯运动衰减变慢

对比上一个比较安分的铃铛芯(黄色)，红色是更浪的铃铛芯，从曲线部分也可以看出红线在一开始规规矩矩与黄线完全重合，后面就逐渐冒尖。