After Effects 移动UI动效设计 案例精粹

978-7-115-45540-6
作者: 汪兰川 刘春雷
译者:
编辑: 赵轩

图书目录:

详情

本书全面阐述了UI图标AE设计动态效果的入门基础课程,以及后续的提升部分课程均有详细的介绍讲解。利用AE软件中各种常用的工具,有针对性的剖析UI 设计动态效果的制作过程和设计思路,将UI图标AE动态效果设计进行进一步的介绍。本书可作为普通高等院校数字媒体技术、计算机多媒体技术等专业的教学用书和参考书,也可供从事UI设计的广大设计师和设计爱好者参考。

图书摘要

版权信息

书名:After Effects 移动UI动效设计案例精粹

ISBN:978-7-115-45540-6

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。

• 著    汪兰川 刘春雷

  责任编辑 赵 轩

• 人民邮电出版社出版发行  北京市丰台区成寿寺路11号

  邮编 100164  电子邮件 315@ptpress.com.cn

  网址 http://www.ptpress.com.cn

• 读者服务热线:(010)81055410

  反盗版热线:(010)81055315


本书共分为6个部分,24个精彩制作案例,每一部分先介绍重要的知识点,然后借助具体的示例进行讲解,步骤详细、重点明确,手把手教你如何进行实际操作。书中全部制作案例围绕移动UI动效设计展开,由易到难、由浅入深,步骤清晰、简明、通俗易懂,适用于不同层次的制作者。书中提供了与案例相对应的各类素材,读者可以根据需要进行练习和使用。


继计算机、互联网后,移动互联网已成为 IT 业的第三次浪潮向人们袭来。随着移动 3G、4G 网络的成熟与推广,以及移动设备硬件技术的发展,各种移动终端用户群体有了显著增加。移动设备作为一种新的媒介,在人类生活中开始扮演着重要的角色。移动互联网产品的社交化、位置化以及移动化特性吸引了大量用户,越来越多的用户开始使用并依赖各种移动互联网产品。随着移动互联网产业的兴起,移动客户终端已经成为移动互联网中一项重要产业,吸引了国内外众多企业的关注,同时促使大量公司投入人力、物力去进行移动互联网产品的设计开发。越来越多的企业将产品移植至各种移动操作平台上,将移动互联网作为公司后续的发展方向。然而,虽然国内外有大量的设计团队进行移动客户终端的移植与设计,但作为新兴事物的移动客户终端由于相对产生时间较短,在其设计中并没有一套完整的设计流程提供理论上的支持。多数设计团队在照搬PC 端软件开发流程或Web网站开发流程进行设计的过程中,已经发现了设计流程过长、设计无法根据市场做出敏捷改变等不足之处。

移动客户终端界面设计中全新的动画为界面视觉感受带来“深度”和“活力”。界面图形的动态效果也通过创新表达出视觉空间的新维度。以往,我们在进行交互设计的时候,大部分时间是基于界面和功能逻辑的考虑,也适当地进行了交互效果的考虑。那么我们如何把交互的动态效果直观地表现出来呢?除了用Axure做出交互的动态效果,PS绘制GIF图,代码设计动效外,还可使用一个非常容易上手的工具,那就是After Effects(AE)。After Effects是Adobe公司推出的一款图形视频处理软件,利用After Effects基于层的工作方式,可以非常方便地调入Photoshop、Illustrator等“层”文件,对多层图像进行控制;关键帧、路径概念的引入,使After Effects对于控制高级的二维动画游刃有余;而令人眼花缭乱的特技、特效系统,更能够实现使用者的设计创意。

本书以UI动效为出发点,结合精彩的制作案例详尽解析,深入分析讲解了After Effects的各个功能和命令,内容涵盖界面、工作流程、工具、菜单、常用视窗、其他视窗、如何使用特效、特效应用、第三方特效插件、层、遮罩、动画关键帧、文本效果、3D效果、表达式、渲染、输出等诸多知识要点。本书共分为6个部分,24个精彩制作案例,每一部分先介绍重要的知识点,然后借助具体的示例进行讲解,步骤详细、重点明确,手把手教你如何进行实际操作。书中全部制作案例围绕移动UI动效设计展开,由易到难、由浅入深,步骤清晰、简明、通俗易懂,适用于不同层次的制作者。书中提供了与案例相对应的各类素材,读者可以根据需要进行练习和使用。

汪兰川 刘春雷

二零一七年春 写于沈阳盛华苑


UI 即 User Interface(用户界面)的简称,从字面上看,用户界面不但包括“用户的界面”,还包括“用户与界面”的含义,涉及用户与界面的交互体验。但不管是用户的界面还是用户与界面,视觉始终是它们的落脚点。移动 UI 的概念是建立在 UI 之上,移动互联网产品中的 UI 便是移动 UI。

移动 UI 设计是指对移动产品软件的美化与设计,包括人机交互、操作逻辑与界面美观的整体设计。而移动 UI 视觉设计是移动 UI 设计的一部分,是针对移动产品界面美观的设计。移动 UI 视觉设计是移动产品的“门面”,必须考虑产品的物理特性和软件的使用特性。要考虑移动产品的尺寸、重量、屏幕大小等物理特性和考虑什么人群使用,什么人群对此感兴趣,是否满足用户需求,用户使用是否方便等使用特性。这些特性使得移动 UI 视觉设计不仅要对构图、色彩搭配、排列、版式设计等视觉设计方面进行思考,而且还必须对页面层级转换效果、对象动态效果、交互的视觉引导等交互层面进行思考。

用户体验(User Experience,UE 或 UX)是指“产品或服务中,用户所能体验到的各个部分,涉及用户对产品的认知、寻找、分类、购买、安装、服务、支持以及升级的各个方面。在当今的移动互联网产业中,一些产品项目经理没有意识到用户体验的重要性,在项目开发中并不采用以用户为中心的设计理念,对他们而言,用户体验设计仅仅是对产品的美化,甚至一部分项目主管会认为用户体验设计是对项目资金及项目时间的浪费。他们将产品设计交由程序员来完成,程序员由于站在编程技术人员的角度思考,在设计时会优先考虑编程效率,而不是使产品去迎合用户或使用者的需求。并且,程序员在项目组中更多的是主要负责程序代码的编写,几乎没有时间与用户进行交谈,在不能详细了解产品的一般用户时即会将自身假定为产品的一般用户,这就造成了用户模型的偏差,使得产品仅适用于类似程序员自身的具有较高电子设备操作能力的用户,而不是去迎合更广泛的一般用户。

在数字电子科技迅速发展的背景下,各类相关产品之间的竞争激烈。用户在使用中的感想和体验,已成为宣告竞争局势状况的晴雨表,势必能够影响数字电子产品的开发者的发展前景。对于 UI 设计师而言,他们需要对 UI 界面实施不断的更新和优化,使其更能够满足用户的操作习惯和情感倾向,为用户提供呈现能力更为高效、更为精准的界面设计,同时满足其在审美体验和使用体验上的要求。今天,UI设计存在着设计过程形式化,设计理念浅薄化的问题。在当下新科技的发展和互联网信息的膨胀的环境下,滋生出了 UI界面承载能力与互联网环境信息量之间的矛盾和新的科技与当下UI设计理念之间的矛盾。信息传输速度的提升加速了信息量的增长速度,导致了 UI界面中信息混乱的问题。新科技的发展过程中旧的UI设计理念中的弊端逐渐凸显。

移动UI图标设计

用户体验要素可以以一个模型图来表现,模型图将用户体验划分了5个层级,从下到上分别是:战略层、范围层、结构层、框架层和表现层。

(1)战略层:战略层是企业寻求自身发展而制定的目标,也是企业根据对自身的一个长期发展的规划与期望而制定的方针政策,为此需要明确用户期望与产品目标。良好的用户体验要求企业能够明确自己的战略,通过分析用户的期望与产品目标来制定自己将要发展的目标方向,并且明确用户期望与产品目标也是企业在用户体验方面的全面方针制定的一个基础出发点。

(2)范围层:明确好目标,下一步就是要做出来。用户体验的范围层也就是明确产品的功能、特性,确定出符合用户期望与目标的产品应该包括哪些内容,且具备什么功能或者特性。范围层是思考应该给用户呈现哪些内容的一个过程,在这个过程中要始终贯穿着一个信念,那就是用户想要什么,我们就呈现什么。

用户体验要素模型

(3)结构层:用户体验的结构层是开始执行实施的阶段,是明确用户期望与产品目标后创建一个结构思路的过程,是对用户期望与产品目标的一个梳理与整合,并且在梳理这些层级关系和交互设计模式时,要站在用户的角度,理解用户的行为习惯、思考方式。

(4)框架层:框架层是对结构层的进一步提取与完善。框架层也可以说是原型层,是将前面的战略层、范围层、结构层的一个原型展现,通过软件绘制出交互模式、界面细节的分布、信息内容等。如果将结构层比喻成骨骼的话,那么框架层就是依附在骨骼上的关节、肌肉。

(5)表现层:表现层也就是最终呈现给用户的视觉层。上述所有的用户期望、产品目标、结构框架等都会通过这层来展现,这一层是用户接触到的第一层,所以表现层的视觉设计是非常重要的,无论是文字排版、配色方案还是整体布局等在这层都需要细细考究,除了完成基本的信息传递外,同时还能满足用户的不同审美需求是表现层的最终目标。

全世界大约有70多亿的人口,不同的皮肤、不同的语言、不同的文化形成了各色各异的人,即使是同一个国家,同一个地区的人,也会因为周围的环境或者接受教育的不同形成不一样的性格,每一个人都有不一样的需求,根据马斯洛需求层次理论的研究方法,可以推断出用户体验的需求层次关系。

(1)感觉需求:感觉需求就如同马斯洛需求里的生理需求,是一个最基本的需求。感觉需求通过人的视觉、听觉、触觉、肤觉等去感受外在的物质而产生的一种需求。这种需求必然是好的需求,比如生活中人们会选择精致的外包装、舒适触感的产品等,而不是丑陋的外表、手感粗糙的产品。

用户体验层次理论梯状图

(2)交互需求:交互需求可以理解为我们常说的产品的能用与易用。能用是一个产品的基本功能,是指用户能在正常的情况下完整的使用该产品;而易用则是用户与产品交互过程中的一个更高层次的需求,旨在交互过程减去繁琐冗长、不必要的步骤,达到易用、简单的交互需求。微信没改版时,曾有一个实时对讲的功能,但是因为步骤太繁琐而被大家放弃使用,甚至至今很多用户都不知道这个实时对讲到底该怎么操作,满足不了用户对简单交互的需求。

(3)情感需求:随着经济的发展、消费水平的提高,用户对商品不仅仅是基本功能的需求,还期待使用产品时能带来愉悦的感受,满足用户的情感需求。用户会对产品产生某种情感的寄托,或是某种心理上的认同感。不同的用户会有不一样的情感需求,如女性因自身的细腻、浪漫等性格特点,在消费时会更加注重产品的品牌寓意、色彩带来的美感需求等,而男性则更加注重功能与便捷的需求。

(4)社会需求:社会需求是满足用户感觉、交互、情感这些基本的需求后出现的更高层次的需求,也是产品在满足基本的功能时还能为用户体现其社会地位的额外需求,特别是现代经济的迅速发展,生活物质的丰富,人们不需再为温饱问题而发愁,人们根据自身的经济条件购买名牌衣服、名牌手表、名牌包等,不仅仅是功能的需求,更是人们利用品牌效应去体现其社会地位的一个社会需求的追求。

(5)自我需求:是对自我个性的一种特殊需求,可通过非大众化的设计或者限量的产品来满足用户对个性化的追求。自我需求的用户一般具备不墨守成规的性格,对创造力的事物保持着极高的兴趣。鉴于用户对个性化的追求,市场上逐渐出现了各种个性化的定制服务,如个性化餐厅、个性化酒店、个性化婚礼、个性化礼品盒等。

通常我们利用手指在界面上的操作来完成我们预期的结果,一般界面上的点击方式主要有单击(Tab)、双击(Double Tap)、拖动(Drag)、滑动(Flick)、横扫(Swipe)、放大(Pinch open)、缩小(Pinch close)、长按(Touch&Hold)等。

(1)单击(Tab):单击是指在界面的有效范围内,用手指进行单击的交互动作。单击是界面中最常用的点击方式,类似于我们使用鼠标时光标控制在电脑界面有效范围内单击鼠标左键的过程。

单击

(2)双击(Double Tap):双击是指在界面的有效范围内,用手指进行两次单击的交互动作。一般用于图片或者页面的放大与恢复原图大小,也用于短信文字编辑时的激活。

双击

(3)拖动(Drag):拖动是指手指长按界面中的页面或者可拖动的移动条进行拖动,在到达指定位置后松手,完成拖动的交互过程。

拖动

(4)滑动(Flick):滑动是指手指在屏幕接触面上不断地移动,以达到界面的切换、图片的移动或者界面的上下翻页等。

滑动

(5)横扫(Swipe):横扫手势主要运用在激活界面中隐藏的菜单栏,通过向左、向右或者上下方向的横扫,弹出菜单列表。

(6)放大(Pinch open):放大一般用于查看图片细节或者阅读文章时字体太小时,可以单击界面中放大镜图标实现放大的操作,或者是使用双指同时反方向拉伸来实现放大的效果,其中后者的交互方式使用较多。

放大

(7)缩小(Pinch close):缩小是与放大手势相对的一种交互方式,实现与放大相反的交互效果,缩小图片或者阅读的页面,在有的界面中,缩小也可以是关闭当前页面的交互命令。

缩小

(8)长按(Touch&Hold):长按手势是现在界面的交互方式中运用的比较多的手势,长按通常可以激活页面里隐藏的编辑模式,例如长按图标时,可出现删除程序、移动程序、程序组合排列等模式;长按文字时,可出现复制、收藏、删除文字等命令。长按图片时,也可出现复制、转发、收藏、删除图片等命令。

移动UI界面设计要求向用户传递信息的过程中,通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系,将空间深度变化为能帮助传递一定信息的视觉表达元素,其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形,通过有组织、有目的的设计理念和设计手段把时间与空间串联,结合现实中的三维空间及时间,从而扩大界面视觉语言的表现力。由于手机在其屏幕尺寸大小以及交互方式与PC端的差异性,用户在与界面交互时常常需要面对界面切换的操作,界面通过用户的点击或者滑动等手势来完成切换。

为了给用户带来好的交互体验,设计师一般会采用平滑过渡的方式来引导用户完成界面的切换。这些方式主要有:平行滑动切换、旋转切换、变形切换、黑色背景切换、放大切换、多种方式同时使用等。

(1)平行滑动切换:平行滑动是界面中最常用也是接受度最高的切换方式,由于手机屏幕大小的限制,平行滑动让视觉达到一个屏幕延伸的错觉,在界面设计上要求达到风格统一,在平行滑动时使用户觉得界面是一个连续的整体。

(2)旋转切换:旋转切换一般指界面采用180°旋转的方式切换到下一个界面,如微信相册就采用了这种方式,方便用户查看相册的评论内容,旋转后就点击完成回到无评论的相册图片中。

(3)变形切换:变形切换类似于旋转切换,是对界面进行一个旋转或者压缩的变形,最后再恢复成正常的大小过渡到下一个界面。一般这种方式在界面中运用的很少,主要在手机开机或者关机的界面中会经常用到,变形能够增加界面切换时的趣味性,但不适合在点击率高的界面使用,容易增加软件的内存以及消耗用户的忍耐度。

(4)黑色背景切换:一般黑色背景切换的方式用户不会轻易地发觉,因为黑色背景的停留时间非常短,不仔细看的话会认为是直接弹出了下一个界面,在手机游戏的界面中会经常用到黑色背景的切换,单击play或者settings的按钮时,会出现0.5秒甚至更短的黑色背景的切换,一般不易察觉。

(5)放大切换:放大切换一般用于单击小的图标或者按钮等元素后,向完整的界面切换的过渡。

(6)多种方式同时使用:一些界面为了达到某种特定的效果,往往需要借助多种切换的方式来完成,比如在平行滑动的同时也可加入放大的效果,以达到最佳的、生动自然的使用效果。

After Effects是由Adobe公司出品,能够兼容Adobe公司的其他软件,具备优良的兼容性,可以方便地导入Photo Shop、Illustrator等软件的文件,并能完整地保存层的存在,从而对图像中的层进行控制。After Effects中的蒙板、遮罩、滤镜等功能能够实现创作者的创意,并能进行三维层的转变,而且还可以创建灯光和摄像机,实现三维功能,从而将二维和三维融合,在After Effects中把不同的图层素材进行拼合,创造完美的视觉效果,制作出美轮美奂的设计作品。

After Effects CC

After Effects与Photoshop存在很多的相似性,可以说After Effects实现了Photoshop无法完成的动态效果,因此学习After Effects前掌握Photoshop的应用技巧十分重要,掌握了Photoshop中的技巧对于After Effects的应用打下了坚实的基础。

UI视觉设计中对空间的探求主要是形态和形态之间在视觉上形成的框架关系,将这种框架关系设置在二维平面空间(指高、宽二维)的状态之中。有时也能在二维平面的基础上表现出带有纵深感的三维立体空间(指高、宽、深三维)的效果。它需借助明暗、色彩、透视等多种表现手法才能达到,这样的空间效果使界面中形态的构架关系显得更为复杂和丰富。

随着After Effects软件版本的不断更新,对计算机硬件的要求也越来越高。如果硬件配置跟不上,会影响到整个操作的效果,严重的会出现经常死机或重启的现象。对于大多数初学者或在校的学生来说,计算机升级的速度永远没有软件升级的速度快。如果刻意保持计算机配置与应用软件版本同步的话,在经济方面也是一笔不小的开支。因此,建议初学者或在校的学生安装精简版软件或绿色软件,因为精简版软件或绿色软件会占用较小的系统资源,虽然有些特殊功能没法应用,但是对于一些普遍的动态效果制作来说已经足够了。

(1)多层剪辑

无限层电影和静态画面的成熟合成技术,使After Effects可以实现电影和静态画面无缝的合成。

(2)高效的关键帧编辑

After Effects中,关键帧支持所有层属性的动画, After Effects可以自动处理关键帧之间的变化。

(3)无与伦比的准确性

After Effects可以精确到一个像素点的6‰,可以准确地定位动画。

(4)强大的路径功能

如同在纸上画草图一样,使用Motion Sketch可以轻松绘制动画路径,或者加入动画模糊。

(5)强大的特技控制

After Effects使用85种软插件以修饰、增强图像效果和动画控制。

(6)强大的兼容性

After Effects同其他Adobe软件的无缝结合。After Effects在输入Photoshop和Illustrator文件时,保留层信息。

(7)高效的渲染效果

After Effects可以执行一个合成在不同尺寸大小上的多种渲染,或者执行一组任何数量的不同合成的渲染。

After Effects通过对导入到项目中的素材进行组合,按时间排序将图层进行叠加来完成工作。启动After Effects后将会有一个新项目自动建立,而要进行片头制作需要打开或建立一个合成图像窗口——合成(Composition)窗口,即在After Effects中经过加工的作品当打开或建立一个合成图像窗口时,同时打开的还有一个与它相对应的时间线窗口,After Effects中的大部分制作要依靠这两个窗口完成。在After Effects中,基本窗口和面板有项目(Project)窗口、合成(Composition)窗口、时间线(TimeLine)窗口、效果和预设(Effects & Presets)面板、工具(Tools)面板、时间控制(Time Controls)面板、音频(Audio)面板。此外, After Effects还可以通过菜单命令来控制更多的细节。

项目(Project)窗口

合成(Composition)窗口

时间线(TimeLine)窗口

效果和预设(Effects & Presets)

工具(Tools)面板

时间控制(Time Controls)

音频(Audio)面板

应用After Effects制作动画的基本操作技巧对After Effects进行操作,首先需要建立一个项目,并在项目中添加各种所需要的素材,然后建立合成图像,并在合成图像视窗中进行一系列操作,如动画、效果等,最后还要对制作好的影片进行渲染。其中除建立项目文件、层的操作、制作动画这样的基本操作外,对于素材的通道设置、建立合成图像、制作蒙版和效果等都有一些使用技巧。

1.素材的通道设置

素材引入后,根据所引入的素材文件类型的不同,还需要进行一些相应的设置。如果所引入的素材包含有Alpha通道,通常需要确定通道类型。

若由After Effects决定通道类型,选择Guess。若想丢弃透明度信息,选择Ignore。若认定该通道为Straight通道,选择Treat As Straight。这类通道的透明信息保存在一个单独的通道中,其他色彩通道中不包含透明信息。若认定该通道为Premultiplied通道,选择Treat As Premultiplied。这类通道的透明信息除了保存在Alpha通道中外,也保存在色彩通道R、G、B中。Straight类通道更有利于高精度色彩的产生,而Premultiplied类通道更有利于与应用程序的兼容。如果After Effects无法判断所引入素材的通道类型,它将自动弹出对话框,可以在此对话框中设置通道类型。

2.建立合成图像

建立新的合成图像的方法如下:首先单击主菜单中的Composition,执行其中的New Composition命令,便会弹出一个设置对话框,其中包含了合成图像的一些关键信息。用户可根据实际需要进行设置,如合成图像的名称、帧的尺寸、像素的百分比、分辨率、帧速率、持续时间等。要注意以下两点:

(1)帧尺寸越大,预示和渲染时所耗费的时间也就越多,所以不要设置过大的帧尺寸。

(2)After Effects提供了4种可供选择的分辨率。若想渲染合成图像中的每一个像素,则选择Full。而Half、Third和Quarter依次渲染合成图像的1/4、1/9和1/16的像素。使用Full得到的图像质量较好,但所需渲染时间也最长。Half、Third和Quarter的质量不如Full,但耗时相对较少。用户可根据实际需要确定所需分辨率。例如,制作初期,完全可以选用Third或Quarter,从而节约大量的时间,等后期制作时再选择质量较高的Full和Half。

3.制作蒙版和效果

蒙版与效果是After Effects中的关键技术。利用蒙版和效果,可以将多个画面叠加在一起,或对颜色、亮度等属性作特殊处理,从而产生神奇的视觉效果。

在After Effects中,可以直接建立蒙版,并把它应用到其他合成图像中。用户可以利用已建立好的矩形蒙版、椭圆形蒙版和Bezier蒙版。Bezier蒙版的形状为手画的多边形,它所受的限制最少,可以随意建立,产生形状丰富的蒙版。对合成图像的某一层添加效果,可以先在时间布局窗口中或者合成图像窗口中选择一个层,然后在Effect菜单中选择一个效果组,再从子菜单中选择一个效果。

After Effects中的层模式和Photoshop中的层模式效果是相同的,一幅好的平面设计,必不可少地会应用到层模式,但其运用在After Effects中更为广泛和灵活。另外Photoshop中所应用的层模式,可以原封不动地带到After Effects中来。通过设置不同的层模式,可以带来意想不到的合成效果,极大地丰富After Effects画面的色彩表现方式。After Effect中的合成(Composition)窗口相当于Photoshop中的画布,时间线(Timeline)窗口相当于PS中的图层面板。

合成(Composition)窗口

时间线(Timeline)窗口

在After Effects中可以将层想象为透明的玻璃,它们一张张地叠放,通过改变透明度来显示下方的层,然后这些层在时间线中按时间进行排列,从而进行工作,达到设计制作的需要,并且能够将层进行分裂和复制等。在After Effects中,层的透明信息存放在Alpha通道内,当层的Alpha通道不能满足透明要求时,则利用Mask遮罩、Mattes遮罩层、Keying键来达到显示或隐藏层的内容的目的。

Mask遮罩

Mattes遮罩层

Keying键

除此之外,层模式通过层的叠加组合,来产生非凡的视觉效果。层模式用来控制一个层怎样融合到它下面的层。其中,Stencil和Silhouette层模式用来影响下面的A1pha通道,其他层模式则影响某些颜色的显示。同时应用越来越广泛的抠像插件日益增加,如Primatte Keyer、Key Light,这些插件操作简单,支持16bit颜色控制,对于一些包含透明、烟雾、头发丝等复杂的图像有较好的键控效果。

Stenci层模式

Silhouette层模式

After Effects可以通过对层的持续时间的改变,改变动态效果动画的播放速度,对动画做慢动作播放或快进播放。一般情况下,通过时间延伸(Time Stretch)命令可以非常方便地改变层的持续时间,修改影片播放速度。当需要更自由的时间控制时,例如制作影片由快到慢地过渡或者瞬间加速等特效时,可以使用时间变化(Time—Remapping)技术。该技术可以拉伸、压缩、反向播放或令层的一部分静止。

时间延伸(Time Stretch)命令

After Effects中可以通过对关键帧的设置实现对对象属性的变化,基本动画有5种:轴心点(Anchor point)设置、位置(Position)设置、比例(Scale)设置、旋转(Rotation)设置、不透明度(Opacity)设置。通过这些设置可以实现动画效果,灵活使用这些设置便可以制作出惟妙惟肖的作品。

轴心点(Anchor point)设置

位置(Position)设置

比例(Scale)设置

旋转(Rotation)设置

不透明度(Opacity)设置

After Effects还可以通过线性(Linen)插值、贝塞尔(Bezier)插值、连续贝赛尔(ContinuousBezier)插值、自动贝赛尔(AutoBezier)插值、静止(Ho1d)插值等方式对关键帧进行控制。插值可以使关键帧产生多变的运动,使层的运动产生加速、减速或者匀速等变化。通过时间线窗口中速率图或速度图,也可以对层的动画进行精细地调整。速率图提供所有空间值(如位置)、速度图提供所有非空间值(如旋转)在合成图像中的变化率的全部信息以及值的控制。在合成图像窗口中,运动路径上点的间隔显示速度的变化。在速率或速度图中,高度变化意味着速度的改变:值增高表示速度增加,值水平表示速度正常。同时曲线上点的密集程度,也表示速度变化:点越疏则速度越快,点越密则速度越慢。

After Effects效果所能达到的单独视觉程度与我们在Photoshop所看到的相当,除此之外还能反映效果的变化过程。After Effects的特技效果,是通过效果插件(Plug_in)来实现的,这些插件都放在After Effects安装目录下的P1ug_in路径中。和其他动画一样,通过为效果的属性参数设置关键帧,即可实现效果的动画。After Effects可以为一个层设置多个特技效果,甚至还可以为音频指定效果。除了After Effects自带的效果,作为影视后期工业标准的After Effects拥有最广泛的第三方支持,几乎所有合成软件的插件都首先支持After Effects,其他合成软件也都兼容After Effects插件AEX。著名的After Effects第三方插件有Bori sFX、DigiEffects、Eyecandy等。此外After Effects可以直接应用Photoshop的插件,所以目前市场上为After Effects提供的插件是极为丰富的。

完成动态效果动画的编辑合成之后,最后一步需要将完成的影片渲染输出。After Effects可以以多种格式输出影片,例如各种格式的视频文件或序列图片。通过外挂插件,After Effects还可以输出适用于其他平台的影片,具有广泛的兼容性。

UI动态效果演示动画制作有很多东西是有套路可循的,所以可在平时先将一些格式化的元素制作出来,在需要的时候可以直接调用这些素材,节省创意、制作和渲染的时间,缩短制作的周期。制作中注意细节的处理。片头制作是一门艺术,是完全靠细节取胜的工作,因此,需要有耐心,点滴修饰,不断充实完善制作内容。同时在制作中不但要注意画面内容上的细节的设计,还要注意画面和音乐剪辑的流畅性、细心地调整三维和后期合成软件中的每一个关键帧参数等技术上的细节,只有这样才能制作出画面丰富、结构严谨、让人赏心悦目的演示动画效果。


相关图书

Adobe After Effects CC 2019经典教程 彩色版
Adobe After Effects CC 2019经典教程 彩色版
After Effects CC中文版超级学习手册(第2版)
After Effects CC中文版超级学习手册(第2版)
Adobe After Effects CC 2018经典教程
Adobe After Effects CC 2018经典教程
After Effects印象 影视后期特效插件高级技法精解
After Effects印象 影视后期特效插件高级技法精解
After Effects 动态图形设计—入门技法与基础创作
After Effects 动态图形设计—入门技法与基础创作
零基础学After Effects CC 2018 全视频教学版
零基础学After Effects CC 2018 全视频教学版

相关文章

相关课程