AE表达式：利用wiggle和Math.sin制作蝴蝶动画

AE表达式：利用wiggle和Math.sin制作蝴蝶动画
B站链接：

课程准备

• 蝴蝶AI素材

• wiggle的用法，上次录了一节视频，链接

• Math.sin三角函数 ,函数原型 :
  y = A ∗ s i n ( ω ∗ x + φ ) + b y = A*sin(\omega*x+\varphi)+b y=A∗sin(ω∗x+φ)+b
  各常数值对函数图像的影响：

  φ：决定波形与X轴位置关系或横向移动距离（左加右减）

  ω：决定周期

  A：决定峰值（即纵向拉伸压缩的倍数）

  b：表示波形在Y轴的位置关系或纵向移动距离（上加下减）

  在这里我们只关心A和ω就可以了。φ和b用不上。我们可以把这个函数转化成和wiggle相关的函数
  y = a m p ∗ s i n ( f r e q ∗ t ) y=amp*sin(freq*t) y=amp∗sin(freq∗t)
  其中amp是振幅 决定wiggle的最大峰值，freq是频率决定wiggle抖动的速度，t就是时间轴

制作步骤

1 新建一个1920x1080的合成，名为butterfly

2 通过overlord把AI矢量图导进来

3 新建一个空对象，命名为controller

4 给空对象添加三个滑块，更改名称：amp(振幅),freq(频率),speed（速度）

amp 设置为100，freq设置为4，speed暂时不设置

5 给左右翅膀Y轴属性 添加表达式

//left
thisComp.layer("controller").effect("speed")("滑块");

//right
thisComp.layer("controller").effect("speed")("滑块")*(-1);

现在这样拖动speed滑块，可以看到左右翅膀可以挥动了。但是因为锚点问题效果不对，我们要调整下锚点。

6 接下来可以给speed滑块 添加关键帧，或者表达式。

• 比如time*80 看看效果如何？

• 问题来了，我们不需要speed的值一直上升，我们需要它来回循环，为了实现这个，我们需要引入三角函数Math.sin。

• 不要看到三角函数就害怕，很简单。sin( x ) = {-1-1}，不管你x输入多少，它的值都在[-1,1]这个区间，为了直观的观察，我用ggb做了一个动态图。ggb三角函数动态图

• 理解了sin函数后，我们来修改speed的表达式 Math.sin(time) 。引入这个表达式后，你会感觉看不出什么效果。这是因为它的值一直在-1 到1之间，太小了。所以我们要把振幅加大，继续修改

  amp = effect("amp")("滑块");
  amp*Math.sin(time)
  

  现在的效果很不错了。

蝴蝶挥动的速度还是慢了些？ 现在我们把频率引入进来，改变它挥动的快慢。继续完善表达式

amp = effect("amp")("滑块");
freq = effect("freq")("滑块");
amp*Math.sin(freq*time)

蝴蝶挥动的效果就做好了，完美

7 新建一个主合成 main，把butterfly合成拉进来，打开3D开关，以及折叠开关

8 新建一个空对象 并且把空对象的3D开关打开

9 讲butterfly合成的位置属性绑定空对象的位置属性

表达式代码如下（直接用拾取器拖动即可）

thisComp.layer("空 2").transform.position

10 给空对象 位置属性K动画

播放下会发现蝴蝶的方向不对！我们修正下这个问题，操作如下

1. 图层——变换——自动定向——沿路径定向
2. 旋转下蝴蝶合成的方向，X轴旋转270°

11 多复制几只蝴蝶

• 直接复制法 ，每只蝴蝶都会重叠

• 改进——加入wiggle,修改位置属性的表达式

  //这里需要注意 一定要减去value，因为wiggle函数返回的值包含了value
  thisComp.layer("空 2").transform.position + wiggle(1,200) - value;
  

12 错开复制合成的时间，导入一张背景图

完成!