如何让你的交互动效更Q弹!

用户头像
深圳/设计爱好者/3年前/300浏览
如何让你的交互动效更Q弹!

非常好用的回弹表达式,赶快一起试试吧!

作为动效小白的我们总是羡慕那些大佬做的交互动效很细腻、很Q弹,而自己又不太会,除了通过针对性的深入学习来增强,难道就只能眼睁睁的羡慕别人了么?


NO,今天给大家分享一个“万能回弹表达式”的应用,让你的交互动效也能轻轻松松变得Q弹。


应用场景效果展示:



使用方法:


1、在AE里面创建一个新合成,随便添加一个形状作为演示对象,给该对象在0帧和20帧分别添加位置关键帧(位置关键帧快捷键:P),注意:0帧和第20帧的位置要不一样,可以适当位移一下,然后键盘按住Alt的同时+鼠标点击位置关键帧前面的小马表,即可展开表达式输入框。

2、复制红框内的万能回弹表达式代码,粘贴到已打开的表达式输入框内,不要按Enter键,要在表达式输入框以外的地方鼠标点击一下。

undefined

3、点击完后,查看位置坐标数值是否变红,是的话表达式即添加成功,点击预览按钮或者快捷键:空格键,进行效果预览。

4、如何取消已添加的表达式:键盘按住Alt的同时+鼠标点击位置关键帧前面的小马表,即可取消已添加的表达式效果。


如何调整回弹效果:


在不需要修改表达式代码的前提下,可通过动效对象执行时间长短来进行调整回弹效果。

执行20帧时长展示:

同样的对象,同样的动作,从开始到结束执行20帧的回弹效果;

执行10帧时长展示:

同样的对象,同样的动作,从开始到结束执行10帧的回弹效果;

对比展示:

将同样的对象,同样的动作,不同执行时长的两个对象放在一起进行对比,执行时间越短即速度越快,回弹效果越明显;执行时间越长即速度越慢,回弹效果越弱;

所以大家在应用“万能回弹表达式”的时候,可以通过执行动效对象的时长来调整它的回弹效果。


适用范围:位置、缩放、旋转;


应用场景效果展示:


探索:有兴趣的同学可以通过改变该表达式代码里的amp/freq/decay数值来调整回弹效果。

注意:该表达式尽量不要应用在真实项目动效中,因为添加了该表达式后,会造成动效体积增大,不利于真实项目展示,可以在自己练习作品中应用和研究。


“万能回弹表达式”已放在下方,可直接复制粘贴使用。

你还等什么,不赶紧去试试!


n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){

n--;

}

}

if (n == 0){

t = 0;

}else{

t = time - key(n).time;

}

if (n > 0){

v = velocityAtTime(key(n).time - thisComp.frameDuration/10);

amp = .03;

freq = 2.5;

decay = 4.0;

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}else{

value;

}


10
举报
|
1
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
新能源APP应用UIKit
UI_3D图标炮仗<新春促销>
【新年UI图标】酒店icon
【新年UI图标】家具icon
UI_3D图标火箭炮<新春促销>
科技医疗透明柜UI界面设计
我的钱包-UI界面设计-app
【新年UI图标】游戏/娱乐icon
智能家居中心 简约 UI设计组件库
【新年UI图标】美食icon
【新年UI图标】影音icon
UI界面 组件
【新年UI图标】珠宝icon
UI 登录界面设计模板包
盲盒APP UI设计
矢量立体简约UI蓝白图标
高级感金属拟物 UI设计组件库
钱包ui模板
柠檬黄主题UI作品集模版
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
UI应用平面图标
Security Camera UI kit
新拟态风格 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册