2021-4-12 ui设计分享达人
前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。
1）动画原则介绍
2）结合案例应用原则
3）流程方法论沉淀
4）结语
挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。
挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。
预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。
预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。
每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。
在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。
逐帧动画。
优点：自由且流畅的动态。
缺点：难以把控时间长短、体积大小。
关键帧动画。
优点：清晰、可靠、规范。
缺点：修改成本略高。
跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。
当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。
真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。
仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。
在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。
在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。
当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。
在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。
使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。
为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。
通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。
动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。
一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。
通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。
设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。
表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。
接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。
假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。
将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。
在添加动画细节前，我分享下在项目中经常用到的两个技巧。
实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。
质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。
当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。
根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。
随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。
文章来源：站酷 作者：Fiasc1
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务