恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE 表达式应用——萤火虫
0.0°
2018-02-27 原创文章 教程 举报 9109 94 64 6

常用表达式 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

更新:2018-02-27

下载
收藏

94人已收藏

Jerlin

Live Curious

  • 38

    作品

  • 890

    粉丝

  • 177

    关注

  • 正弦表达式 Math.sin( )
  • circle wave 表达式动画
  • Starry Night 表达式动画实验
  • 用户体验设计要素:移动应用中的动态微交互

    猜你喜欢

      2018-02-27 原创文章 教程 举报 9109 94 64 6

      AE 表达式应用——萤火虫

      0.0°

      你确定要举报AE 表达式应用——萤火虫

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年08月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      64
      94
      6

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录