6.3图形动画设计（课件）《电子商务视觉设计》（电子工业出版社）

模块三 电商视觉设计技能提升 《电商视觉设计》 思维导图 目录 CONTENTS 1 动态情景化的设计 项目六 动态情景化的设计 项目背景 在全渠道数字化运营项目中，为了能够吸引更多的用户进行消费，企业不仅要提供具有强大产品力的产品，还需要进行营销推广。在进行营销推广时，除了要选择合适的营销推广渠道，还需对产品或活动进行视觉呈现。为了能够吸引更多用户的眼球，企业在进行视觉设计时，应紧跟时代的潮流，设计一些极具表现力和张力的设计，以此来吸引更多人的关注，为整个项目运营带来流量。 伴随着电商的快速发展，商家与商家之间的竞争愈发激烈，这也致使商家对店铺的视觉设计提出了更高的要求，店铺的视觉设计不能仅停留在普通的平面设计上，而应该积极探索平面设计与三维设计、动画设计的融合，以打造出极具场景化的三维图像或视频，以场景搭建带给用户视觉冲击，引起用户共鸣，以达到店铺营销推广的目的。 要设计出动态情景化的图像或视频，首先要掌握三维设计和动画设计的基础知识和相关操作，只有在掌握了三维设计和动画设计的基础知识和相关操作后，才能更好地去完成电商动态情景化的图像或视频的设计与制作。 研究内容 三维场景搭建与渲染 视频动态文字设计 图形动画设计 产品推介动画设计 学习目标 1.认识C4D软件及其工作界面； 2.了解C4D建模常用的工具及功能； 3.认识AE软件及其工作界面； 4.熟悉与动画制作的基础知识； 5.了解图形动画设计基础知识； 6.了解产品推介动画设计的基础知识。 知识目标 1.能够使用C4D软件搭建出符合营销需求的三维场景并进行渲染； 2.能够使用AE软件制作出符合营销需求的动态文字； 3.能够使用AE软件进行图形动画的设计与制作； 4.能够使用AE软件进行产品推介动画的设计与制作。 技能目标 1.了解社会主义核心价值观，诚实守信，遵守职业道德； 2.具备积极主动的工作态度、较强的视觉审美与设计能力； 3.具备较强的团队协作能力、社会责任意识和诚信的品德。 素养目标 任务三 图形动画设计 预备知识 一、动画设计十二原则 图形动画是一种融合了电影与图形设计，基于时间流动而设计的视觉表现形式。若想打造出有趣又真实的动画，一般需遵循动画设计十二原则。具体内容如下： 1.挤压和伸展（Squash and stretch） 挤压和伸展原则一般是用于促成喜剧效果，而非严格性的人体夸张变形的。目的是赋予动画的重量感和灵活感，三维的挤压和变形可以通过多种技术来实现：例如直接的网格处理和变形、专门的模拟动力学和不寻常的反动力学(IK)系统等。 预备知识 一、动画设计十二原则 2.预备动作（Anticipation） 物体从静止到开始动作前，一般会有预期动作，可以为观众做好心理准备。例如从高空往下跳跃时会先弯曲膝盖再跳，正在跑步的人要停止跑步前会逐渐变慢步伐等等。在动画中适当加入预期动作不仅可增添生动性，亦可给观众惊喜感。 3.表演及呈像方式（Staging） 通常每个角色都有其动作、表态与场景的呈现，使其更接近真实。这个效果可以通过剧情、分镜、画面、动作、光影的方式实现，例如在帧中人物的放置，灯和影子的使用，或者摄像机的角度和位置，使整部动画完整。 预备知识 一、动画设计十二原则 4.连贯动作与关键动作（Straight ahead action and pose to pose） 传统动画是由数张画面连续显示而构成，近代电脑动画也是如此，从第一格画面显示到最后一格画面，就形成了会动的画面。接续动作与关键动作为两种不同的制作动画方式，接续动作适用于较简单的动画，依照连续的动作从第一格画到最后一格的方式；而关键动作适用于较复杂的动画，是先定义重要的动作并作画，再返回关键动作之间绘制需要的画面。 预备知识 一、动画设计十二原则 5.跟随动作与重叠动作（Follow through and overlapping action） 跟随动作与重叠动作代表了两个相互关联的技术，这两个技术将移动渲染得更加逼真，帮助传达人物正在跟随物理原则的印象，跟随动作是指是角色在移动过程中，身上的衣物、头发等附属物件产生的跟随运动，是主要动作的结果。例如角色从高处跳跃下来的时候，他身上系着的披风会跟着下来。重叠动作是角色在移动过程中，身体的其他部分产生的不同速率的运动。例如一女子不动，风吹拂女子的长发使其左右飘摆，长发左右飘摆即为动画师想要让观众注目的重叠动作。 预备知识 一、动画设计十二原则 6.渐快与渐慢（Slow in and slow out） 物体从静止到移动是渐进加速，移动到静止则是渐进减速，也就是物体从开始到结束移动并不会是等速度运动。例如一辆车子不管马力多快，开始移动是渐进加速的，停止移动也会渐缓减速。 7.弧形运动轨迹（Arcs） 现实生活中，除了机械之外，大多数的运动轨迹都是弧形。因此在动画设计时时，要以自然的弧形方式呈现运动。例如走路绝不会是笔直的前进、头部转动也都是弧形方式。 预备知识 一、动画设计十二原则 8.附属动作（Secondary action） 动画中的附属动作，主要指的是依附在主要动作之下的细腻动作，例如触须、尾巴等部分的一些动作，会以附属动作来点缀主要动作的效果。 9.时间控制（Timing） 时间是动画的重要元素，它的作用是控制角色动作和运动的节奏与重量感。例如往前出一直拳的动作是瞬间的、在湖中划船是缓慢前进的。 预备知识 一、动画设计十二原则 10.夸张（Exaggeration） 夸张是动画非常重要的表演形式，这是动画有别于一般表演的重要元素。可以通过夸大的肢体动作、加快或放慢动作来加乘角色的情绪及反应，例如在动画中一个人的脸被揍之后，都会往内凹深得很严重、往前冲刺会附加许多的华丽效果、迅速躲过子弹等等。 11.纯熟的手绘技巧（Solid drawing） 纯熟的手绘技巧是非常基础的原则，传统动画都是纯手工绘制画面，亦即手绘技巧越好，动画呈现就越精致完美。直到近代电脑绘制动画也是需要一定的手绘能力。例如人物结构、骨架、造型、动作、透视、背景等等。 预备知识 一、动画设计十二原则 12.吸引力（Appeal） 吸引力是画面视觉表现力的重要评估方式，动画吸引人的地方如鲜明的人物外型、具有特色的表态、高潮迭起的剧情等。当设计角色时，能够以独特的造型、姿态让观众直觉角色的属性并加深对角色的印象，例如高矮胖瘦可分别代表不同个性的角色。 预备知识 二、表达式 表达式可用于制作规律性动画，能避免通过手动的方式创建大量的重复运动效果所耗费的时间。表达式是AE内部基于Java Script编程语言开发的编辑工具。 表达式的语法及命令都是源自JS语言，如果熟悉JS语言，使用AE里面的表达式相对容易一些。虽然说表达式都是基于JS语言的，但表达式要比正在使用JS语言开发要简单的多得多，大家可以把它看作一个简化版的编程过程。 预备知识 二、表达式 （一）time表达式 原理：time表示时间，以秒为单位，time*n =时间(秒数) *n (若应用于旋转属性，则n表示角度)。 举例:若在旋转属性上设置time表达式为time*60，则图层将通过1秒的时间旋转60度，2秒时旋转到120度以此类推(数值为正数时顺时针旋转，为负数时逆时针旋转)。 预备知识 二、表达式 （二）抖动/摆动表达式 格式：wiggle(freq, amp, octaves= 1, amp_ mult=0.5, t=time) 原理：freq=频率(设置每秒抖动的频率)； amp=振幅(每次抖动的幅度)； octaves=振幅幅度(在每次振幅的基础上还会进行一定的震幅幅度，很少用) ； amp_ mult=频率倍频(默认数值即可，数值越接近0，细节越少，越接近1，细节越多) ； t=持续时间(抖动时间为合成时间，一般无需修改) ； 预备知识 二、表达式 一般只写前两个数值即可。 举例:若在一维属性中，为位置属性添加wiggle(10,20),则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添n=wiggle(1,10)；[n[O],n[0]]， 则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。 预备知识 二、表达式 （三）loopOut表达式(循环表达式) 原理：loopOut(type=" 类型" ,numkeyframes=0)对一组动作进行循环； loopOut(type="pingpong",numkeyframes=0)是类似像乒乓球一样的来回循环； loopOut(type="cycle' ' ,numkeyframes=0)是周而复始的循环； loopOut(type="continue")延续属性变化的最后速度； loopOut(type="offset" ,numkeyframes=0)是重复指定的时间段进行循环； numkeyframes=0是循环的次数，0为无限循环，1是最后两个关键帧无限循环，2是最后三个关键帧无限循环，以此类推。 预备知识 二、表达式 （四）index表达式(索引表达式) 原理:为每间隔多少数值来产生多少变化。 举例:若为图层1的旋转属性添加表达式index*5，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推;若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为：(index-1)*5。 实施准备 进行图形动画设计制作时，除了需要掌握AE的基础知识和相关的操作外，还需要了解在设计制作图形动画时的理论知识，包括设计十二原则、表达式等内容，只有在了解了在设计制作图形动画时的基础知识后，才能更好地使用AE软件设计制作出符合营销需求的动画视频。 任务实施与分析 在使用AE软件设计与制作图形动画时一般会经过以下几个步骤： 步骤1：打开Adobe After Effect 2019，新建一个项目，然后单击菜单栏中的“合成”-“新建合成”创建一个1920像素*1280像素、帧速率为25帧/秒、背景色为中等灰色-青色（颜色值：70AFA3）的合成，并将其命名为“循环表达式”。 一、弹跳文字效果制作 任务实施与分析 步骤2：使用文字工具在新建的合成画布中输入“循环表达式”（字体：黑体；字号：117像素：颜色：黑色），如图所示。 任务实施与分析 步骤3：按住键盘中的“Shift”使用“椭圆工具”在画布的右边绘制1个正圆，即得到“形状图层1”图层，然后鼠标单击“形状图层1”图层使用“Ctrl+D”复制两个，即可得到“形状图层2”图层和“形状图层3”图层，接着使用移动工具将“形状图层1”图层、“形状图层2”图层和“形状图层3”图层移动到如上图所示的位置，随后将“形状图层1”和“形状图层3”的颜色分别设置为“007EFF”、“005F8A”，如下图所示。 任务实施与分析 步骤4：双击项目面板，导入素材合成文件，如图所示。 任务实施与分析 接着将“P/SocialMedia.psd”素材拖动至“形状图层2”图层的上方，使用同样的方法将“Like/SocialMedia.psd”素材和“Bird/SocialMedia.psd”素材分别拖动至“形状图层1”图层和“形状图层3”图层的上方，如上图所示。 任务实施与分析 然后调整个素材的大小和位置，使各个素材都对应在每一个圆形中，如下图所示。 任务实施与分析 步骤5：为画布中的各个元素添加动画效果。 1.给文字“循环表达式”添加进入动画，设置“循环表达式”图层变换中的位置第一个参数为“-444”，不透明度参数为“0%”接着单击位置和不透明度前面的时间变化秒表创建文字位置和不透明度的关键帧，然后将时间标尺面板中的当前时间指示器移动到1S的位置。 任务实施与分析 随后将位置的第一个参数调整为“210”，不透明度的数值调整为“100%”，如图所示，此时播放就可看到文字有了进入动画。 任务实施与分析 2.给素材添加进入动画，设置“Bird/SocialMedia.psd”图层变换中的缩放第一个参数为“82”，不透明度参数为“0%”接着单击缩放和不透明度前面的时间变化秒表创建文字位置和不透明度的关键帧，然后将时间标尺面板中的当前时间指示器移动到1S的位置，随后将缩放的第一个参数调整为“52”，不透明度的数值调整为“100%”。 任务实施与分析 如图所示，此时播放就可看到“Bird/SocialMedia.psd”素材有了进入动画，使用同样的方法为“P/SocialMedia.psd”图层和“Like/SocialMedia.psd”图层添加动画关键帧。 任务实施与分析 3.给圆形添加动画，设置“图层形状3”图层变换中的缩放第一个参数为“80”，不透明度参数为“0%”接着单击位置和不透明度前面的时间变化秒表创建文字位置和不透明度的关键帧，然后将时间标尺面板中的当前时间指示器移动到1S的位置，随后将缩放的第一个参数调整为“100”，不透明度的数值调整为“100%”。 任务实施与分析 如图所示，此时播放就可看到圆形有了进入动画。使用同样的方法为“形状图层 1”图层和“形状图层 2”图层添加动画关键帧。 任务实施与分析 步骤6：创建预合成图层。鼠标选中图层1和图层2，接着单击鼠标右键，在弹出的菜单中选择“预合成”，在弹出的预合成页面中输入对应的预合成名称“Bird”，如图所示。 任务实施与分析 然后单击窗口中的“确定”按钮，即可完成Bird预合成图层的创建，如图所示，使用同样的方法将“P/SocialMedia.psd”图和“形状图层 2”图层合成为“P”预合成图层，将“Like/SocialMedia.psd”图层和“形状图层1”图层合成为“Like”预合成图层。 任务实施与分析 步骤7：给预合成图层添加动画。单击“Bird”图层，接着使用快捷键“R”设置图层变换中“旋转”的参数，然后单击旋转前面的时间变化秒表按钮添加关键帧，然后将时间标尺面板中的当前时间指示器移动到7S的位置，随后将旋转后面的参数设置为“2”和“+0°”（旋转两周），如图所示。接着使用同样的方法为“P”图层和“Like”图层添加旋转动画。 任务实施与分析 步骤8：添加循环表达式，这里以“time”表达式为例进行讲解。按住键盘中的“Alt”键，然后鼠标单击“Bird”图层下的时间变化秒表按钮，即可添加表达式，如图所示。 任务实施与分析 随后单击“表达式：旋转”后面的播放按钮，在弹出的菜单中选择“Key”中的“time”，如图所示。 任务实施与分析 接着在时间标尺面板中输入“*30”，即可完成time表达式的添加，如图所示。使用同样的方法为“P”图层和“Like”图层添加time表达式。 任务实施与分析 步骤9：通过以上步骤即可完成动画表达式的添加，接着根据播放的动画效果调整各图层的锚点位置，将各个图层的锚点位置调整到合适位置后，使用快捷键“Ctrl+M”进行输出，即可得到一个有动画效果循环表达式的视频。 拓展知识 一、提高视频创作能力的方法 （一）观察作品 优秀的作品在各个领域都随处可见。在看到一个作品的时候，首先需要把整个作品完整地观看数次，观察、思考所看到的动画效果，使其在心中留下一些属于自己的主观感受，并且通过自己的理解方式来描述这个动画效果。之后根据这些感受和描述来提出问题，如动画中的元素形态是如何转换的、色彩是如何变化的、转场效果是怎样的、动画节奏是怎样调节的。 拓展知识 一、提高视频创作能力的方法 （二）分析作品，整理问题 在对作品进行了初步观察后，可以尝试使用自己学会的方法来思考一下动画制作过程，进行一次整体分析，并提出一些问题，以便进入下一个步骤。 整体分析指的是需要去观察动画，判断作品的视觉风格、转场、主要动画类型等。以上这些制作方法贯穿了整个MG短片的制作过程，所以我们面临的第一个问题就是如何对整个片子进行拆分，以方便临摹。 拓展知识 一、提高视频创作能力的方法 （三）制订动画方案 有了观察和思考，结合所学的知识设计出动画方案，并开始尝试制作。动画方案的设计不同于之前的分析，需要把实际制作的内容进行具体的分配，并预留一些能够想到的问题以及如何应对的手段。 拓展知识 二、动画方案的设计思路 AE的基本工作流程是导入素材、组织素材、创建合成图像和排列图层、添加动画元素及特效、预览作品、渲染并输出。此为软件的工作流程，而动画方案制订时，对软件的使用只是其中的一个环节，更重要的是设计思路和创意。 （一）场景拆分 根据分析，可以把场景划分为独立的几个部分。这些场景可以直接在AE中完成，也可以使用AI等软件绘制后再导入AE。 拓展知识 二、动画方案的设计思路 （二）动画制作 把单个的场景动画分别制作出来，并使用预合成将其装起来，根据前后关系逐步补充过场内容。这个过程相对灵活，可以使用不同的制作方法，前文的有些案例使用的是顺序制作的方法，一边制作一边调整；也有的是使用了先满足核心动效再逐步展开的方式；也可以先做完单体效果，再考虑制作运动。 思考与总结 学员通过以上操作，完成图形动画设计的任务，请学员在此基础上，进行思考并回答以下问题： 在进行图形动画设计时需要注意那些事项，为什么？ 能力提升 请学员根据任务实施与分析中的素材制作出带有抖动/摆动表达式或者带有loopOut表达式，亦或者是带有index表达式的动画视频。 $$