![做动效After Effects跨平台UI动效设计教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/1/49054001/b_49054001.jpg)
1.1.5 【时间轴】面板
【时间轴】面板可谓是动画制作最重要的面板。所有的动画制作,无论是关键帧动画还是表达式动画,都离不开【时间轴】面板上的编辑操作。【时间轴】面板的布局如图1-54所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_29_3.jpg?sign=1738847473-MEObjLlZ6qhsF5LJCfGWu5Xh7bt5hWFe-0-3a141d8e9379e028d5eec1c5847fff32)
图 1-54
1.【时间轴】面板的合成标签切换栏
合成标签切换栏如图1-55所示(红色矩形1框选的区域)。【时间轴】面板上可以有任意数量的合成标签,每个合成标签都有一个属于自己的时间轴。在一个动效设计中,合成内通常包含多个子合成,其中有不同的动画,设计师需要经常在不同的合成之间进行切换。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_29_4.jpg?sign=1738847473-56cP5nQyzlUB2BcFjy8Hy8hQGaPl1ugX-0-cd4269001ffd095604356a541ae681d3)
图 1-55
2.【时间轴】面板的工具栏
【时间轴】面板的工具栏包含合成时长设置、时间定位、内容搜索框与几个功能图标,如图1-56所示(红色矩形2框选的区域)。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_30_1.jpg?sign=1738847473-K5xjrRmcfKMJHqbyCXohPBPBjEB10fYc-0-42da4ab554af75c1ae2a1664da256f27)
图 1-56
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_30_2.jpg?sign=1738847473-amTEb5k2DtjeOZ6hCeflqK6EzNMVh4qK-0-09044bef8cb2e9539526e4960c52bbc8)
图 1-57
单击最左侧字号较大的数字,可以设置当前时间指示器定位到哪一帧,如图1-57所示。
下面的蓝色数字无法单击,仅作为展示用途。展示的两种信息如下。
·:当前时间指示器所在的第N帧,换算为“时/分/秒”显示单位后的时间位置。执行【文件→项目设置】命令后,在【项目设置】对话框中可以选择【时间轴】面板的时间是按帧显示还是按“时/分/秒”显示。
·:帧速率。帧速率即每秒播放多少帧,如动画片常用的是24帧/秒,当前部分电影使用的是120帧/秒。在日常动效设计中,笔者建议采用48帧/秒或60帧/秒的帧速率,这样动画效果更加出色,也更接近手机上真实动效的表现。
3.【时间轴】面板的图层区
【时间轴】面板的图层区如图1-58所示(红色矩形3框选的区域)。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_30_5.jpg?sign=1738847473-bPeiwnRE824mQMnKy1ShNnGI37F7hOXJ-0-2be8d2a9064767d0aa27ca797b2df764)
图 1-58
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_30_6.jpg?sign=1738847473-F3depZfExQz3gXJpke3LGdZTFofHkYfS-0-149399d25ef676fedb0c5b6113efdae8)
图 1-59
多选图层的方式也很常规,就是按住【Ctrl】键或【Shift】键点选。图层区的功能比较多,主要是关于图层属性的各种开关,如显示/隐藏开关、声音开关、3D图层开关等。下面简要介绍动画设计中常用的一些图标。
1)图层显示控制工具
每个图层的前方显示的是通用信息,如图1-59所示。
·【视频:隐藏来自合成的视频(如果有)】(红色矩形1框选的区域):用于显示或隐藏图层。
·【音频:使音频(如果有)静音】(红色矩形2框选的区域):用于控制是否播放声音。
·【独奏:隐藏所有非独奏视频】(红色矩形3框选的区域):用于控制是否只显示当前图层中的内容。
·【锁定:阻止编辑图层】(红色矩形4框选的区域):用于控制是否锁定图层。
·【标签】(红色矩形5框选的区域):用于设置图层标签的颜色。【标签】在一个图层数量非常多的合成中很重要,将图层按照颜色分组对于合成图层的清晰管理很有用。
2)图层功能切换显示工具
底部栏中的3个图标分别用来显示或隐藏不同分区的图层属性。
·【展开或折叠“图层开关”窗格】图标:用于展开或折叠【图层开关】功能。
·【展开或折叠“转换控制”窗格】图标:用于展开或折叠【转换控制】功能。
·【展开或折叠“入点”/“出点”/“持续时间”/“伸缩”窗格】图标:用于展开或折叠【入】、【出】、【持续时间】和【伸缩】等功能。
当3个图标全部处于关闭状态时,【时间轴】面板的图层区只显示【图层名称】和代表父子关系的【父级和链接】,如图1-60所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_31_9.jpg?sign=1738847473-cgNlBiZcW3WjlA3B7uvqBjGr4PnfpALF-0-892bd54ea79988c4675ef69751a9315f)
图 1-60
3)图层功能开关
单击【展开或折叠“图层开关”窗格】图标,【时间轴】面板的图层区会新增显示图层的所有属性参数(红色矩形1框选的区域),如图1-61所示。框选的几个都是在动画设计中经常使用到的图层功能开关。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_31_11.jpg?sign=1738847473-m4jV5SB8yaQBMDpiw4TRbDKEvWX6d8Kx-0-4856246f2227209eccc1e378d5ef8394)
图 1-61
·【质量和采样】(红色矩形2框选的区域):用于切换高质量渲染或低质量渲染。
·【效果:关闭所有效果(如果有)】(红色矩形3框选的区域):用于控制是否显示效果。
·【运动模糊:模拟快门持续时间】(红色矩形4框选的区域):用于控制是否显示运动模糊。
·【调整图层:应用于此图层的效果要用于它之下图层和合成】(红色矩形5框选的区域):用于控制是否将当前图层作为调整图层影响下面的图层。
·【3D图层:允许在三维中操作此图层】(红色矩形6框选的区域):用于控制是否将当前图层设置为3D图层。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_32_1.jpg?sign=1738847473-9wjugZatpM5Tko8OITyi1XELXzyog5y0-0-2913ba296bbec124f50523c7521af311)
图 1-62
单击【展开或折叠“转换控制”窗格】图标,【时间轴】面板的图层区会新增显示【模式】和【T TrkMat】功能。其中,【T TrkMat】是解释起来比较复杂,但是在动效设计中经常使用的功能。其实,【T TrkMat】功能就是将上一个图层的某种通道属性(Alpha透明通道或亮度通道)作为下一个图层的蒙版遮罩,如图1-62所示。
单击【展开或折叠“入点”/“出点”/“持续时间”/“伸缩”窗格】图标,【时间轴】面板的图层区会新增显示【入】、【出】、【持续时间】和【伸缩】的属性(见图1-63),用来调整所在图层的持续时长、时长压缩比例和时长延长比例(如果将【伸缩】属性调整为200%,就表示动画速度调整为原来的一半)。【入】、【出】和【持续时间】可以使用帧数精确调整动画时长;【伸缩】则相对更加常用,在制作动画时长比例伸缩时,使用较粗略的比例伸缩就可以。这里的【伸缩】比例可以理解为同一段动画的播放速度。如果将【伸缩】参数设置为50%,就表示播放速度会快1倍,即快放效果;如果将【伸缩】参数设置为200%,就表示播放速度会慢一半,即慢放效果。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_32_4.jpg?sign=1738847473-VVTHSkKKlK9AVzsL4EcghhdPZyaR0fKu-0-a1036ef6bb80289240098b45cefe27dc)
图 1-63
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_32_5.jpg?sign=1738847473-S41ZsaqZn3w3GnaEo602o7tglKCEyrxm-0-86a362fe0ff5c29e8354bc8905bfbb07)
图 1-64
4.【时间轴】面板的时间线区
【时间轴】面板的时间线区即时间指示器所在的区域,如图1-64所示(红色矩形框选的区域)。可以通过【时间轴】面板中的【图标编辑器】图标(图1-64中的红色三角形图标所指处),切换用于编辑动画曲线的【图表编辑器】模式。图1-64中的A图为用得比较多的常规关键帧编辑模式,B图为动画曲线编辑模式。
1)常规关键帧编辑模式
在常规关键帧编辑模式下,显示的是一个个的图层及其所有的关键帧,通过拖曳每个图层的两端可以调整内容效果能够显示的时长范围,如图1-65所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_33_1.jpg?sign=1738847473-SYQQFpGJKgql4IRuPiDT3tDhWfSDNB3W-0-807d84a150c967f5e422264d7df3e5da)
图 1-65
选中图层的关键帧并右击,弹出的菜单中是针对关键帧进行编辑的命令,最常用的是【关键帧速度】命令和【关键帧辅助】命令(结合动画曲线展开介绍有助于读者理解),如图1-66所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_33_2.jpg?sign=1738847473-is6LEliWXOpyOXJOBw4Ll2Dg582Q4oqS-0-950bcdf1ee095f21e04bacf535cd0f64)
图 1-66
时间线区顶部的第一行和第二行分别有一窄一宽两栏,窄栏代表时间线的显示范围,宽栏代表工作区域的范围,这两栏的两端都有蓝色小手柄。拖曳窄栏两端的蓝色小手柄可以调整时间线的显示范围,而拖曳宽栏两端的蓝色小手柄
可以调整工作区域的长短(控制预览和渲染输出的内容范围),如图1-67所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_33_7.jpg?sign=1738847473-x90luTh5SYqhjkw6uoGwGQavDXWXjhQK-0-d21bbc4c58785d20895659fae6ecfb25)
图 1-67
关于【工作区域】的介绍,请参考1.1.1节。预览时仅播放工作区域内的内容,渲染时也仅渲染工作区域内的内容。有时通过预览观察制作好的动画效果,并不需要花费很长时间缓存整个合成时间线,只需要缓存工作区域内的内容即可,这样可以大大提高工作效率。
在【工作区域】上右击,弹出的菜单中有【提升工作区域】命令、【提取工作区域】命令和【将合成修剪至工作区域】命令,如图1-68所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_33_8.jpg?sign=1738847473-PEFeKJQGibI8mQyScDWT8qGpdqRx7ccy-0-fa55818c28352a488b2f6385a112a433)
图 1-68
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_34_1.jpg?sign=1738847473-dQBIgwfJRlC5Cofg3WAlncMHXjs1rPw5-0-8a489f54f429d10234130c22ab6fbe6f)
图 1-69
关于【提升工作区域】命令和【提取工作区域】命令的介绍,请参考1.1.1节。这里主要介绍【将合成修剪至工作区域】命令。假如合成的完整时长为2000帧,在将工作区域的时长调整为1000帧之后,执行此命令,可以看到整个合成的长度被缩短为1000帧,如图1-69所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_34_2.jpg?sign=1738847473-g2JpzGKPX5ezyDMZq707N1zY3UWu5zM2-0-54305f5638e0cc42037455a647fc12b3)
图 1-70
2)动画曲线编辑模式
如果切换为动画曲线编辑模式,那么时间线区的内容切换为显示当前所选图层的所有选中关键帧的动画曲线,如图1-70所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_34_3.jpg?sign=1738847473-GWO66pwmVDqPV2Sk97AyWWQOd2yreMI8-0-23aa259046fd59a9f663ba6d1f2c7bfb)
图 1-71
默认生成的关键帧动画曲线是线性的,并且没有任何平滑变化(图A),选中关键帧并右击,在弹出的菜单中选择【关键帧辅助→缓动】命令之后(图B),两个关键帧(曲线的两个端点)就新增了手柄(图C),曲线形状变为【缓入-缓出】,拖动黄色的曲线手柄可以调整手柄长度,进而调整曲线形状(图D),如图1-71所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_34_4.jpg?sign=1738847473-6NWsjjHONBGnDDyfID7KSM0LgTvJHxSn-0-d6be339af12bcf20b7ba3acc81cc43e8)
图 1-72
如果想精确地调整关键帧,那么可以在关键帧上右击,在弹出的菜单中选择【关键帧速度】命令,打开【关键帧速度】对话框,并在该对话框中进行设置,如图1-72所示。【进来速度】代表关键帧节点的左侧手柄,【输出速度】则代表关键帧节点的右侧手柄。一般来说,大部分UI动效设计只需要设置【影响】的百分比即可,【影响】的值越大,对应的手柄就越长。如果将【进来速度】的【影响】设置为【100%】(即最大),【输出速度】的【影响】设置为【10%】,那么节点的两端手柄长度显示如图1-72中的红色虚线框选区域所示,曲线形状也会发生相应的变化。
在动画曲线编辑模式下,时间线区的底部有一些与编辑曲线相关的工具,如图1-73所示。
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_35_1.jpg?sign=1738847473-j4WJkHSFpRPnTrw1E7jJpMPaRyeVlMJa-0-afa1259eb8ada6d16d2b4341a20c9165)
图 1-73
![](https://epubservercos.yuewen.com/B166AE/28817433507432906/epubprivate/OEBPS/Images/46955_35_2.jpg?sign=1738847473-mCE3gpqZotUHJ1rvUnD5mnwYqSYFD9ZV-0-39cdc80d29c97baf2166624374bc1c88)
图 1-74
·【将选中的关键帧转换为定格】(标识1):将关键帧转换为定格类型,即从一个关键帧到下一个关键帧之间没有任何过渡,直接跳变。
·【将选中的关键帧转换为线性】(标识2):将关键帧转换为线性类型,即动画曲线为直线,没有任何起伏节奏的快慢变化,这也是生成关键帧后默认的类型。
·【将选中的关键帧转换为自动贝塞尔曲线】(标识3):将关键帧转换为自动贝塞尔曲线类型,转换前后的对比如图1-74所示。
·【缓动】(标识4)、【缓入】
(标识5)和【缓出】
(标识6):选中关键帧之后右击,可以在弹出的菜单中选择【关键帧辅助】命令的二级菜单中的【缓动】命令、【缓入】命令和【缓出】命令。