动效周期表学习指南(叁)

用户头像
深圳/设计爱好者/2年前/185浏览
动效周期表学习指南(叁)

原作者:设计师 Kazuki Akamine

动效周期表链接:http://foxcodex.html.xdomain.jp/

案例四十八|Move

1、新建矩形并给位置添加从左到右关键帧;

2、按住Option给位置添加表达式:loopOut();

案例四十九|SymmetricMove

1、新建矩形并在内容右侧添加中继器;

2、参数调整:中继器副本2/矩形路径1位置0,0/变换:中继器1位置0,0/变换:中继器1旋转180;

3、在变换:矩形1下的位置添加-198~198关键帧,这样两个矩形会从左到右移动且位置相反;

4、调整好后,在变换:矩形1下的位置Y轴调整为40(使两个矩形产生间距),效果完成;

案例五十|RepeatMove

1、新建矩形并在内容-矩形1-变换:矩形1调整旋转参数为45;

2、内容右侧添加中继器,把中继器1-副本调整为5,中继器1-变换:中继器1-位置0,0;

3、中继器1-变换:中继器1-给位置X轴打上0~108~0~-10关键帧;

4、选中所有关键帧添加缓动完成动效;

案例五十一|WiggleMove

1、新建圆球给位置添加表达式:

freq = 2;

amp = 200;

loopSec = 4;

t = time%loopSec;

wiggle1 = wiggle(freq,amp,1,0.5,t);

wiggle2 = wiggle(freq,amp,1,0.5,t-loopSec);

ease(t,0,loopSec,wiggle1,wiggle2);

备注:freq = 频率,amp = 幅度,loopSec = 时间

案例五十二|Delay

1、新建圆球命名为“1”并给位置添加表达式:

freq = 1;

amp = 240;

loopSec = 4;

t = time%loopSec;

wiggle1 = wiggle(freq,amp,1,0.5,t);

wiggle2 = wiggle(freq,amp,1,0.5,t-loopSec);

ease(t,0,loopSec,wiggle1,wiggle2);

2、复制图层“1”得到图层“2”,把图层2透明度修改为40%;

3、给图层2位置添加表达式: thisComp.layer("1").transform.position.valueAtTime(time-0.1)

备注:("1") = 图层名称,(time-0.1) = 拖尾时间

4、再依次复制三次并把每个位置表达式“-0.1”依次减0.1,拖尾效果完成;

案例五十三|Rotate

1、新建矩形并调整至合适大小;

2、打开旋转参数将角度调整为45;

3、给旋转打上0x~1x关键帧;

案例五十四|SymmetricRotate

1、新建矩形并在内容-矩形1右侧添加中继器;

2、参数调整:副本2/内容-中继器1-变换中继器1-位置修改为0,140/锚点设置居中;

3、打开旋转属性添加表达式:Math.sin(time*Math.PI/2)*100;

案例五十五|RepeatRotate

1、新建矩形并旋转45度;

2、在内容右侧添加中继器,修改中继器副本为5;

3、在内容-中继器1-变换中继器1-旋转添加表达式:Math.sin(time*Math.PI)*15;

案例五十六|WiggleRotate

1、新建圆形并调整至合适参数;

2、给圆形添加修剪路径,在内容-修剪路径1-修改结束为80%;

3、给圆形内容-椭圆1-变换:椭圆1-旋转添加表达式:

freq = 1;

amp = 250;

loopSec=4;

t = time % loopSec;

wiggle1 = wiggle(freq, amp, 1, 0.5, t);

wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopSec);

ease(t, 0, loopSec, wiggle1, wiggle2);

案例五十七|SolidRotation

1、新建160*160圆形,填充无/描边1;

2、打开圆形三维开关;

3、在内容-变换- Y轴旋转添加表达式:time*180;

4、复制得到圆形2,X轴旋转表达式:time*90 / Y轴旋转表达式:time*180;

5、复制得到圆形3,X轴旋转表达式:time*180 / Y轴旋转表达式:time*180;

6、复制得到圆形4,X轴旋转表达式:time*180;

7、复制得到圆形5,X轴旋转表达式:time*90;

案例五十八|Scale

1、新建矩形并调整至合适参数;

2、打开缩放属性并给长宽比解锁;

3、给缩放打上 0,0%~200,200%~400,200%~400,400%~0,0% 关键帧;

4、选中所有关键帧添加缓动完成动效;

案例五十九|SymmetricScale

效果和预设 —— 滑块

1、新建150*150正方形,点击左对齐合成(当前设置的尺寸与动效尺寸无关,但方便调整位置属性);

2、在内容下复制矩形1得到矩形2,给内容-矩形2-矩形路径1-修改位置为150,0;

3、分别给矩形1和矩形2的大小按住Option键添加表达式(不输入表达式但需添加);

4、选中形状图层1,锚点设置居中,在效果和预设添加滑块效果;

5、在内容-效果-滑块控制-滑块添加表达式:Math.sin(time*Math.PI)*150(150是单个图形尺寸,可根据需要进行调节);

6、把矩形1/矩形2大小表达式父子级关系绑定给滑块;

7、给矩形2大小下的表达式添加*-1效果完成;

案例六十|RepeatScale

1、新建120*120正方形并旋转45度;

2、给正方形添加中继器,修改副本为5;

3、把全部位置和锚点修改为0,0;

4、给内容-中继器1-变换:中继器1-比例添加表达式:P = Math.sin(time*Math.PI/4)*160;[P,P];

案例六十一|WiggleScale

1、新建圆形并调整至合适参数;

2、给椭圆1-椭圆路径1-大小添加表达式:

freq = 10;

amp = 50;

loopSec= 4;

t = time % loopSec;

wiggle1 = wiggle(freq, amp, 1, 0.5, t);

wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopSec);

ease(t, 0, loopSec, wiggle1, wiggle2);

3、给变换-位置添加表达式:

freq = 10;

amp = 10;

loopSec= 4;

t = time % loopSec;

wiggle1 = wiggle(freq, amp, 1, 0.5, t);

wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopSec);

ease(t, 0, loopSec, wiggle1, wiggle2);

案例六十二|Dot

1、新建90*90圆形并添加中继器;

2、给中继器1副本调整为20,中继器1-变换:中继器1-调整位置为60,0(修改锚点和其他位置0,0);

3、给中继器1添加中继器得到中继器2;

4、给中继器2副本调整为20,中继器1-变换:中继器1-调整位置为0,60(得到横竖排圆点);

5、给内容-椭圆1-椭圆路径1-大小打上90~0~90的关键帧;

6、新建160*160正方形;

7、选择中继器圆形,在TrkMat下选择Alpha遮罩正方形(正方形在上/圆形在下);

8、选中所有关键帧添加缓动完成动效;

案例六十三|TrimLine

1、选择钢笔工具新建24描边线段;

2、给线段添加修剪路径;

3、在内容-修剪路径1-给结束打上0~100的关键帧;

4、间隔几帧后,给开始打上0~100的关键帧;

5、选中所有关键帧添加缓动完成动效;

案例六十四|TrimCircle

1、新建160*160圆形,填充无/描边16;

2、给圆环添加修剪路径;

3、在内容-修剪路径1-给结束打上0~100的关键帧;

4、间隔几帧后,给开始打上0~100的关键帧;

5、选中所有关键帧添加缓动完成动效;

案例六十五|RepeatTrim

1、复制day64案例到65中;

2、重复复制2次圆环,得到3个圆环动效效果;

3、修改圆环颜色并依次调整每个圆环的出场/结束顺序;

4、选中所有关键帧添加缓动完成动效;

案例六十六|TrimPie

1、新建100*100圆形,填充无/描边100;

2、给圆环添加修剪路径;

3、在内容-修剪路径1-给结束打上0~100的关键帧;

4、间隔几帧后,给开始打上0~100的关键帧;

5、选中所有关键帧添加缓动完成动效;

案例六十七|FlowingLine

1、新建360*360圆形,填充无/描边10;

2、给圆环添加修剪路径;

3、在内容-修剪路径1-把结束参数修改为25%;

4、给修剪路径1-开始打上25%~0%关键帧,间隔几帧后给结束打上25%~0%关键帧;

5、重复复制7次并每次将大小依次-40,得到8个1/4圆消失到出现然后再消失的效果;

6、选中8个图层,鼠标右击选择关键帧辅助-序列图层,使时间轴依次错开;

7、再次新建360*360圆形(制作圆环背景),在内容-椭圆路径1重复复制7个圆形,大小调整为动效圆形一致,颜色调整为更暗;

8、给圆环/背景添加修剪路径,结束修改为25%(背景效果完成);

9、选中所有关键帧添加缓动完成动效;

案例六十八|FractalNoise

效果和预设 —— 分形杂色

1、新建纯色层,添加效果和预设当中的分形杂色效果;

2、在分形杂色-变换-取消勾选统一缩放;

3、变换下参数调整:缩放宽度调整为1/缩放高度调整为1200;

4、给演化打上0~1x,180~0关键帧(效果完成);

案例六十九|RoughEdge

效果和预设 —— 毛边

1、新建160*160正方形并旋转45度(这样边缘不会有割裂);

2、给正方形添加效果和预设当中的毛边效果; uuu2、参数修改:边界调整为100;

3、给演化打上0~1x~0关键帧(效果完成);

案例七十|Turbulentdisplace

效果和预设 —— 湍流置换

1、新建点6/外径120六边形;

2、给六边形添加效果和预设当中的湍流置换效果;

3、参数修改:数量140/大小120/复杂度10;

4、给演化打上0~2x关键帧(效果完成);

案例七十一|Noise

效果和预设 —— 杂色 Alpha/填充

1、新建纯色层并添加效果和预设当中的杂色 Alpha效果;

2、参数调整:数量200%/给随机植入添加表达式:time(效果完成);

备注:如在黑背景下显示:再次添加填充预设,将颜色修改为白色

案例七十二|WigglePath

内容添加 —— 摆动路径

1、新建180*180圆形;

2、在内容-添加-选择摆动路径;

3、参数修改:大小300、详细信息20、摇摆/秒2.5(效果完成);

案例七十三|Thunder

效果和预设 —— 高级闪电

1、新建纯色层并添加效果和预设当中的高级闪电效果;

2、参数调整:雷电类型选择回弹/核心设置-核心半径1;

3、发光设置:发光半径10/发光不透明度32%/发光颜色白(雷电基本样式);

4、给Alpha障碍打上-2~-8关键帧(出现动效效果);

5、给源点根据位置需要打上关键帧,调整位置参数可以使动效更加丰富;

73个案例全部完结啦

后会有期👋

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