AE 表达式应用——萤火虫

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
9658 6 64 2016-08-20

常用表达式 loopOut("type"); 以及 Math.sin( ); 的应用。偷懒才是人类第一生产力!AE 表达式带你史诗装逼。 


如何应用 AE 表达式科学地偷懒,今天我们来探索一下


温馨提示:本教程需要一点 AE 基础。不熟悉的童鞋,请配合源文件阅读。


先上实验效果

Image title


细节实现


1.翅膀

国际惯例,对称的玩意先搞定一边。


先思考需要的效果:

翅膀,来回扇动,不停地扇......

•-• ... 

(ㅎ‸ㅎ)  不停打帧?

(๑و•̀ㅂ•́๑)و✧ 初中的正弦函数有木有!周期性的往返。


如果你也年少轻狂不爱打帧,表达式完美命中需求。


在 AE 表达式中,sin 函数的写法是:

Math.sin( );


话不多说,折出右翼。

锚点挪到翅膀左上合适的旋转支点处,按 调出旋转属性,按住 Alt 用左键猛击秒表,码下:

a = 1;// a 控制幅度
f = 1;// f 控制频率
value - Math.sin(time * f ) * a ;


value 代表当前的「属性值」Math.sine(time) 返回一个在 [-x,x] 之间周期变化的数值,两者配合就可以实现周期的扇动了。

time 返回当前的时间(秒),作为时间变量来控制动画。


根据需调整频率幅度,得到:

value - Math.sin(time * 30 ) * 15 ;


在 AE 表达式中,-1 表示反向,于是我们也得到了左翼

value + Math.sin(time * 30 ) * 15 ;

ps:此处相当于 value 后面的数值变化「乘与 -1」


空格键预览。细调频率和幅度,直到效果满意,进入下一步。


2.触须

这里需要一个不规则的小幅度抖动,翻牌!抖动表达式就你啦:

wiggle(freq,amp);


瞄准两触须的旋转属性秒表,分别码下 wiggle 表达式。

频率 5,幅度 8°,感觉妥了,一起摇摆~~~

wiggle(5,8);


似有非有,但很重要。

ps:freq 表示频率;而 amp 这个幅度参数对应不同的属性有不同的单位。对应位置,单位是 px、对应不透明度,当然就是 % 了。以此类推。


3.尾部闪光

Bling~bling~一个典型的循环动画,召唤最常用的循环表达式来对付它:

loopOut(type="cycle",numkeyframes=0);


平时我喜欢最简形态

loopOut("type");

最常用的 type cyclepingpong。(轮子和乒乓球嘛~分别对应首尾相接的循环不断往返的循环。)


目标效果,一闪一闪对不对?

添加一个「外发光」效果,对发光不透明度打帧 0-100%。

接着对不透明度属性码下:

loopOut("pingpong");


就这样?

就这样。


4.效果加强

屁股的闪光还不够亮骚,所以给整个「萤火虫」加了一个「外发光」

由于还是周期循环,如法炮制。

发光不透明度打帧 0-50%。(适当点缀就好。)


然后对不透明度属性码下:

loopOut("pingpong");


至此,效果拼装完成

可萤火虫只是在原地飞啊,为了配合下面的强行安利,画个圆形路径给它试飞:


让对象沿路径运动的实用技巧


  1. 绘制需要的运动「路径」。(蒙版也行,随你习惯)
  2. 选择路径参数,复制。
  3. 粘贴到对象的位置属性上。(注意,复制粘贴时都要认准目标属性的秒表
  4. Ctrl+Alt+O 召唤神奇的隐藏命令,勾选「along path」。

 ( •̀∀•́ )」叮!乖乖地沿着路径方向飞了~~~


作为社会主义的接班人,抠细节很重要。添加「勾画」「修剪路径」,来点拖尾

这回是首尾相接循环,套用 loop表达式

loopOut("cycle");


赠送另一种 0关键帧的周期旋转控制。

旋转属性,码下:

a = 1;
time *360 * a;
// time * 360 代表转速 1 秒 1 圈(360度),a 为转速倍率。


这下是真的搞定了。


回顾效果

你俩飞会儿~~~

Image title


各部件应用的表达式

可改动参数值 DIY。

Image title


秘技 • 辞典

对频繁使用的工具,当然要想点办法「花式偷懒」。

由于沉迷玩耍颜文字,某天发现「输入法辞典」很适合解决这个问题


举个栗子

Image title



  • 输入码 lp 对应 loopOut("cycle");
  • 输入码 wg 对应 wiggle(freq,amp);

常见的系统输入法都带这样的功能,大家自己挖掘。


唯一的坑

辞典不支持换行!复杂的自定义自己执生。


举一反三

作为平时练习的重要环节,想尽办法玩起来也是必要的。

这里我把「萤火虫」作为单元贴图,用 Trapcode Particular 插件撸了一团粒子

一大群,看起来果然比较有工作量 ∠( ᐛ 」∠)_

Image title



更多的玩法

附上源设计文件AE 工程文件,欢迎下载参考。

任何疑问请留言探讨。

大家玩得开心 \\\\ ( ᐛ ) ////


THX

全部评论:6

  • hyper

    2016-09-02 16:16

    教程很赞,学习了

  • lissaling90

    2016-08-29 09:43

    @Jerlin: 谢谢,做出来了。

  • Jerlin

    2016-08-27 17:09

    @lissaling90: 练习棒哦 粒子的话,需要先安装trapcode particular插件。 首先新建固态层,添加trapcode particular效果。 然后解决贴图: 1.Particle 下有个 Particle type(粒子类型),选择 sprite(贴图) 2.接着 Particle下的 Texture(材质)会被激活 3.找到 Texture 下的 Layer(图层),选中目标图层即可。

  • lissaling90

    2016-08-26 14:40

    交个作业 http://www.ui.cn/detail/165541.html 怎么用[萤火虫」作为单元贴图,用 Trapcode Particular 做一团粒子??

  • Jerlin

    2016-08-22 09:34

    @窗外有阳光: 就简单的一句短语,自己动动手即可。

  • 窗外有阳光

    2016-08-21 23:27

    词典是网上下的还是自己自定义的?

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票