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

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

原作者:设计师 Kazuki Akamine

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

案例二十五|SpinFade

1、新建尺寸大小合适的矩形,给旋转和不透明度分别打上关键帧;

2、调整参数:旋转90/透明度0%;

3、复制矩形,选中关键帧右键时间反向关键帧;

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

案例二十六|Slide

1、观察动效节奏,会发现动效是在正方形内由四边形上下穿插组成,透明度从中间到两边依次由先至后变亮;

2、新建尺寸合适的正方形,作为图层蒙版和参考图形使用;

3、新建矩形并把它转化为贝塞尔曲线,选中锚点调整为尺寸合适的四边形;

4、复制这个四边形命名并减去上下两个锚点得到参考线线条;

5、选中四边形,分别给透明度与位置打上关键帧(位置移动可根据参考线与正方形位置调节参数);

6、单个四边形动效做好后,根据参考线/参考图形复制多个四边形,直至填满正方形面积;

7、通过相同的步骤完成从上至下和从下至上的两排四边形动效,再在把穿插的四边形删除让图形不重复;

8、选中全部四边形新建预合成,把正方形放在最上面,选择Alpha遮罩正方形;

9、四边形消失的效果用时间反向帧实现;

10、所有步骤完成后给关键帧添加缓动;

案例二十七|FindEdges

效果和预设 —— 马赛克/查找边缘

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

2、给六边形添加效果和预设当中的马赛克效果(参数调整水平块11/垂直块16);

3、再给六边形添加效果和预设当中的查找边缘效果;

4、给与原始图像混合打上关键帧,让混合从100%~0%再到100%;

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

案例二十八|Scribble

效果和预设 —— 涂写

1 、新建矩形并添加效果和预设当中的涂写效果;

2、参数调整-描边选项:曲度2%/曲度变化0/间距4/间距变化1/路径重叠5/路径重叠变化5;

3、给起始和结束分别打上0%~100%~0%关键帧,使动效首尾循环;

4、这时动效已完成,但线条是动态效果,可在摆动类型中选择静态;

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

案例二十九|Blind

效果和预设 —— 百叶窗

1、新建矩形并添加效果和预设当中的百叶窗效果;

2、方向参数调整为45;

3、给过渡打上从100%~0%关键帧;

4、复制矩形并调整方向为-45;

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

案例三十|LineSweep

效果和预设 —— CC Line Sweep

1、新建矩形并添加效果和预设当中的CC Line Sweep效果;

2、参数调整:Direction(方向)45/Thickness(厚度)36/Slant(倾斜)48;

3、给Completion(完成)打上从100~0关键帧,效果/矩形从消失到出现;

4、复制矩形,选中它的关键帧右键时间反向关键帧,角度调整为-135其他不变,使动效首尾循环;

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

案例三十一|Text

效果和预设 —— 解码淡入

1、新建文本并添加效果和预设当中的解码淡入效果;

2、在动画1-范围选择器1-起始打上从0%~100%关键帧,效果/字母从消失到出现并字母滚动;

3、新建矩形放在文本图层下;

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

案例三十二|Random

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

2、按住Option键给位置添加表达式:

t1 = random(150);

t2 = random(150);

h = thisComp.height/2;

w = thisComp.width/2;

[t1+w-70,t2+h-60];

备注:random/随机性

案例三十三|Sin

效果和预设 —— 写入

1、新建纯色层并添加效果和预设当中的写入效果(曲线);

2、按住Option键给画笔位置添加表达式:

veloc = 120; //horizontal velocity (pixels per second) 水平速度(像素/秒)

amp = 70; //sine wave amplitude (pixels) 正弦波振幅(像素)

freq = 1; //oscillations per second 频率(震荡/秒)

x = time*veloc //x = 时间*速度(确定横坐标)

y = amp*Math.sin(freq*time*2*Math.PI+11) + thisComp.height/2+20;

//y = 振幅*Math.sin(角频率*时间±横轴偏移量)+ 纵轴偏移量

[x,y]

3、新建虚线和圆球,把虚线的父子级关系绑定给圆球并给圆球位置添加表达式:

veloc = 120; //horizontal velocity (pixels per second);

amp = 70; //sine wave amplitude (pixels);

freq = 1; //oscillations per second;

x = thisComp.width/2;

y = amp*Math.sin(freq*time*2*Math.PI+11) + thisComp.height/2+20;

[x,y]

4、选中曲线图层添加透明度消失, 效果完成;

案例三十四|Bend

效果和预设 —— CC Bend

1、新建6个矩形创建为合成,并给合成添加效果和预设当中的CC Bender效果;

2、给Amount(数量)和 Style(风格)分别打上关键帧;

3、图形往右时Amount调整为80/Style选择Sharp,往左时Amount调整为-80/Style选择Marilyn;

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

案例三十五|WaveWarp

效果和预设 —— 波形变形

1、新建圆形并添加效果和预设当中的波形变形效果;

2、参数调整:波浪类型选择正方形/波形高度0/波形宽度8/方向0/波形速度0;

3、给波浪类型和波形高度打上关键帧;

4、圆球分开距离效果/在波形高度根据需要调节,样式改变/在波浪类型添加关键帧选择正弦;

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

案例三十六|Twirl

效果和预设 —— 旋转扭曲

1、新建矩形并添加效果和预设当中的旋转扭曲效果;

2、给旋状扭曲下的角度/变换下的旋转分别打上关键帧;

3、角度和旋转分别调整为270,停顿几帧后恢复为0;

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

案例三十七|Scatter

效果和预设 —— 散布

1、新建圆形并添加效果和预设当中的散布效果;

2、给散布数量打上从0~1000~0关键帧,让效果从无到有再消失;

案例三十八|Median

效果和预设 —— 中间值

1、新建六边形并添加中继器;

2、参数调整:变换-旋转90/效果-变换-中继器下的副本4/位置0/比例70%/旋转20;

3、给六边形添加效果和预设当中的中间值效果;

4、勾选在Alpha通道上运算,在中间值下的半径打上从0~100(停顿几帧)~0关键帧;

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

案例三十九|Mosaic

效果和预设 —— 马赛克

1、新建六边形并添加效果和预设当中的马赛克效果;

2、给马赛克下的水平块和垂直块分别调整为15;

3、给六边形旋转添加0~60的关键帧,动效完成;

案例四十|Opacity

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

2、按快捷键T给不透明度添加关键帧;

案例四十一|Flare

效果和预设 —— 镜头光晕/色相饱和度

1、新建深色纯色层并添加效果和预设当中的镜头光晕效果;

2、镜头光晕参数调整:镜头类型选择105毫米定焦;

3、按住Option键给光晕亮度添加表达式:wiggle(10,20);

4、给纯色层添加效果和预设当中的色相饱和度效果;

5、色相饱和度参数调整:主饱和度调整为-100;

案例四十二|CrossBlur

效果和预设 —— CC Cross Blur

1、新建矩形并添加效果和预设当中的CC Crose Blur效果;

2、给Radius X / Radius Y分别打上0~240(停顿几帧)~0关键帧;

3、在Transfer Mode(传输模式)选择Add,动效完成;

案例四十三|Blur

效果和预设 —— 高斯模糊

1、新建圆形并添加效果和预设当中的高斯模糊效果;

2、给高斯模糊下的模糊度添加0%~200%(停顿几帧)~0%关键帧;

3、给图层变换下的不透明度添加100%~0%(停顿几帧)~100%关键帧;

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

案例四十四|DepthofField

1、新建描边圆环和正方形并调整好位置;

2、在空白处右键新建摄像机勾选启用景深;

3、调整摄像机参数:光圈1200像素/模糊层次300%;

4、给正方形打上位置关键帧0~180(停顿几帧)~0让景深效果来回循环;

5、选中圆环打上参数与其相反的关键帧;

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

案例四十五|MotionBlur

效果和预设 —— CC Force Motion Blur

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

2、给圆形位置添加表达式:

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);

3、添加效果和预设当中的CC Force Motion Blur效果;

4、参数调整:Motion Blur Samples 100 / 勾选 Override Shutter Angle / Shutter Angle 1000;

案例四十六|Glow

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

2、在编辑栏图层-图层样式-选择外发光;

3、给外发光下的大小打上10~100~10的关键帧;

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

案例四十七|ZoomBlur

效果和预设 —— CC Radial Blur

1、新建纯色层并在纯色层上添加矩形,蒙版类型选择相加;

2、把纯色层新建为预合成并添加效果和预设当中的CC Crose Blur效果;

3、参数调整:Type选择Fading Zoom/Center调整为300,540;

4、Amount打上从0~240(停顿几帧)~0关键帧;

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

第二部分结束啦

下期再见👋

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