AE动效周期表Part1

动效周期表是由日本设计师 Kazuki Akamine按照基础动效的特点属性,制作成类似元素周期表的形式。我在无意中看到这个系列,所以开始跟着做一下,复习一下AE基本功,回忆各种效果预设及表达式的用法,顺便为每一篇写个简单做法总结,最后会附上我的ae工程文件,总共有73个动效,我会分成三篇来更新。

1.轨道

制作方法1:关键帧。在rotation码表中0s打关键帧,4s打关键帧n=1

制作方法2:表达式。在rotation码表利用表达式:time*90(代表一秒钟旋转90度)

2.偏移量

制作方法:利用描边中的虚线属性进行偏移,固定虚线长度,偏移量码表中利用表达式:time*n,此处表达式用在旋转属性中,代表1s中旋转n度。

3.勾画

制作方法:利用勾画的效果去完成

4.循环

制作方法:利用偏移的效果去完成

相比单纯位置变换的优势在于可以自动填充多个主体,图例仅用了一个六边形

5.平铺

制作方法:利用CC Tiler的效果去完成

6.极坐标

制作方法:利用极坐标的效果去完成

7.线宽

制作方法:利用属性中的描边属性

8.形状变化

制作方法:利用多边形中的属性(点数/外径/内径)

9.重复变化

制作方法:在上一步形状的变化的基础上,利用时间差值做出,并没有特别的技法,但是在做的过程中要想清楚图层变化的顺序。eg:由六边形变成三角形是最上面的图层先动,而从三角形变六边形则是最下面的图层先动

10.投影

制作方法:投影用到了CC Scale Wipe的效果去完成,中间形状变化的地方通过调整中心点保持投影粗细始终相同;空心部分用到了轨道遮罩。

细节注意:形状变化时为保持描边粗细的一致,需要在形状变化的地方调整缩放大小,除此之外,需要把各部分变化节奏调整一致,动效才会比较和谐。

11.改变形状


制作方法:在AI中绘制好形状(作为蒙版),复制进同一个纯色层,利用改变形状完成效果,设置好初始蒙版与终止蒙版,需要连续变化的话可以多复制几个效果。

知识点:在变化过程中发现图形产生了旋转是因为各个图形的起始点不同,如果想消除旋转的话,可以将各个蒙版的起始点设置在差不多的位置,这样就可以基本消除旋转效果(设置起始点方法,在蒙版中选中想要设置为起始点的点,单击右键-蒙版和路径形状-设置为第一个顶点)

⚠️这个效果运行起来很卡,因为要在蒙版间做大量运算,谨慎使用

12.缓动

制作方法:在关键帧单击右键-关键帧辅助,有三种模式可以转换关键帧,缓入/缓出/缓动,其实本质上都是让变化更加有节奏,不是一直保持匀速,除了预设的三种运动模式以外,还可以打开速度图标编辑速度,使变化更加丰富。图例为先快后慢的小球运动。

13.节奏

制作方法:图形的变化是通过调整多边形的外圆度完成的,再加上旋转动画。主要要注意调整两个动画的节奏匹配,有快有慢,有收有放,让整个动画有呼吸感而不是呆板的。

14.计步器


制作方法:主要用到了表达式Math.floor(time*n)*m,此处表达式用在旋转中,n代表1s旋转次数,m代表旋转幅度。

知识点1:刻度的做法。创建一个刻度大小的矩形,添加-中继器-调整副本个数(这里取了20),然后在中继器的属性中选择旋转,因为我这里是20个刻度,一整圈是360度,360度/20个,所以这里度数是18,然后在矩形路径中的位置属性进行调整(其实就是调整这个圆的半径),调整到合适的大小即可。

知识点2:为指针添加表达式的时候记得要把指针的中心点放在底边中点,调整中心点位置的方法,点击锚点图标,勾选对齐,在拖动中心点到某些特殊位置时就会自动吸附。

15.时间置换

制作方法:主要用到了无线电波与时间置换效果。

1.用无线电波创建电波形状,这里通过调整多边形的参数可以获得不同的形状;

2.再创建渐变图层,调整为角度渐变(这里的渐变形态决定了不同的置换方式,也可以试试换成径向或者不同角度的线性渐变),并将图层设置为不可见;

3.创建调整图层,添加时间置换效果,时间置换图层选择为渐变图层,原理是通过渐变的梯度来调整时间置换的区域,渐变的规律是从白到黑,再通过调整其他参数得到不同效果。

16.尖端形状

制作方法:主要用到了滑块效果和表达式。

1.绘制一个形状(这里是正六边形),将形状转化为贝塞尔曲线路径,或在创建时勾选贝塞尔曲线路径(这个形状作为路径),在效果和预设中找到滑块添加到形状,为形状添加修剪路径动画,为修剪路径添加表达式,并将表达式关联到滑块(将螺旋形状的图标拖到滑块上即可),为滑块添加关键帧,0s的时候为0,2s的时候为100;

2.绘制滑块形状(这里是圆形),复制六边形的路径到滑块位置属性下(如果没有对齐的话,要手动调整对齐,调整时选中全部关键帧),为滑块添加表达式valueAtTime(t),选中t后将表达式关联到滑块,这个表达式我自己觉得可以理解为特定时刻对应的值,在这里也就是修剪路径的动画,但是修剪路径的动画又关联给了滑块,所以现在将滑块与路径关联起来了,因为滑块总共走了100步,运动时间为2s,所以要在表达式后面添加/100*2;

3.效果优化,在每一个拐点添加关键帧,并添加缓动,调整速度曲线即可。

(以上是画出图形的步骤,再增加关键帧可以完成图形消失的结果,可以自己试试)

17.音频波动

制作方法:利用音频频谱效果完成。

1.新建纯色层,赋予音频频谱效果,拖进音乐素材,将音频层的源调整为音乐素材(不同的音乐也会有不同的波形效果);

2.为纯色层新建蒙版,将蒙版调整到差不多中心位置,将蒙版的叠加方式改为无,在音频频谱的效果中将路径修改为蒙版1;

3.复制纯色层,通过调整参数获得不同形态的音频频谱,参数可以多调整试着玩一下,感受不同效果,我这里主要调节了最大高度/厚度(即描边宽度)/颜色/显示选项(不同的波图形态)/面选项(波形扩展的位置),组合在一起即可。

知识点:调整蒙版大小的方法。选中蒙版command+T进行缩放,缩放时command+shift可以进行中心缩放。

18.无线电波

制作方法:利用无线电波效果完成。

拓展:通过等高线可以做出3d效果,通过蒙版形状可以做出丰富的形状

19.链接

制作方法:利用光束效果建立连接。

1.新建两个圆点;

2.新建纯色层,赋予光束效果,更改参数,我这里调整了起始厚度与结束厚度(即线条粗细)/长度/颜色/柔和度;

3.为光束的起始点与结束点添加表达式,关联到两个圆点。

这样就建立好了一对圆点且他们之间的光束会跟随位置移动,其他复制即可,最终有4个点,点两两连接,然后通过调整位置发生变化,移动过程中线不够长时,可以在光束效果里修改长度,让两点连接。我这里还对线的透明度进行了一点调整,更有空间感。

20.粒子

制作方法:利用粒子效果调节参数,也可以用插件,我用的是Red Giant的粒子插件。

通过设置粒子的发射速度/随机大小/随机透明度等等参数,粒子插件中可以调整的参数非常多,可以自己去试着玩一下,红巨人的插件也有汉化版本的,可以自己调整尝试。

21.网格

制作方法:利用网格效果完成,通过对网格宽度的变化完成效果。

22.遮罩擦除

制作方法:利用alpha反转遮罩。绘制两个同样的圆形,添加缩放动画,将两个圆形错开播放,第一个圆形缩放完毕后第二个圆形开始缩放,并为第一个圆形添加alpha反转遮罩即可。

alpha反转遮罩的原理,我觉得有点类似ps里的剪辑蒙版,eg:想给一段文字添加纹路,PS中文字路径在下,纹路图片在上,纹路图片添加剪辑蒙版;在ae中文字路径在上,纹理图片在下,为文字路径添加alpha反转遮罩。

23.粉碎

制作方法:利用碎片效果,调节参数,我这里选用了玻璃效果,调节形状/作用力/物理等参数可以形成不同效果。

24.卡片舞

制作方法:利用卡片动画效果完成。

1.绘制矩形,添加卡片动画效果,设置行数与列数;

2.在第1帧给z转旋转偏移打上关键帧,第15帧为z轴旋转添加45度的偏移,这样第一步的z轴旋转卡片舞蹈就完成了,其他y轴和x轴的方法也是一样。

知识点:为形状图层添加卡片动画和为纯色图层添加卡片动画的区别,卡片动画的行数与列数均是以合成大小为界;为形状图层添加卡片动画时,我们可以理解为形状图层是全合成的一个蒙版,此时行与列仅显示形状图层区域内,eg:此时我的行与列分别是12与10,但在卡片内可能只能显示6与4,其他均在卡片意外的的区域看不到;为纯色图层添加卡片动画时,纯色图层与合成大小相等,所以行与列显示完全。

在这里为什么要使用为形状图层添加卡片而不是对纯色图层添加卡片再将其进行缩放,是因为如果我们对对纯色图层添加卡片再将其进行缩放的话,我们在添加z轴旋转偏移的时候,旋转后卡片不在合成内的部分会被截去,使卡片不完整。

Part1到此结束,未完待续。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容

  • 今天分享下粘性融合的制作方法!!! (一)UI动效常用快捷键(更新中) enter重命名Com+Shift+Alt...
    redBlue_阅读 7,787评论 5 14
  • 官网中文版 1 简易天空替换## 技能:线性擦除,追踪运动,用颜色键K出人物,用色彩曲线调色。(1)天空图片素材放...
    朱细细阅读 10,680评论 4 82
  • 一、工作区和工作流程 1.工作区和面板 保存、删除、重置工作区停靠、编组、浮动面板 2.首选项 常规、预览、导入、...
    朱细细阅读 7,461评论 0 52
  • NO.01 偏移旋转系:轨道 1、可以改变 锚点 位置,而不改变图形的 中心点(位置) 2、旋转:time*90:...
    jiexia0629阅读 963评论 0 0
  • UI基础动效设计需要考虑的点: ①逻辑 ②空关系 ③层次感 ④架构 UI动效的三个特性: 功能性:动效对交互引导和...
    九喵CAT阅读 1,117评论 0 6