前言

前人已经总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。

目录

目录

1）动画设计技巧

2）结合案例应用

3）动效设计方法沉淀

    这次分享分为三个内容，第一个是介绍一下动画设计的“十二大原则”是什么？；第二部分是结合几个案例说明如何将这些原则运用到具体的项目中去的。最后就是动效设计流程的一个总结。

【1】动画设计技巧

    如上图；动画的十二大原则又可以拆分为两类，动画设计技巧和动画表现技巧。

    第一部分设计技巧是增添动画细节的方法，可以用这些原则让动画更有细节更生动。

    第二部分表现技巧是提升整个动画在画面中全局表现力的，这个主要是多用在动画里。

    在产品动效设计中还是常用到设计技巧，所以这次着重分享设计技巧这一部分。

 01 挤压和拉伸

    【挤压和拉伸】是动效设计中最常用到的设计技巧。使用挤压和拉伸来强调物体的质感、重量、速度。我们可以根据物体的质感去决定挤压伸展的具体幅度。可以很好的表达出不同物体的不同质感。这里需要注意的是，物体挤压拉伸的面积尽可能保持视觉统一。以免动画前后造成不协调。

02 预期动作

  【预期动作】可让用户感知到该物体即将发生运动，以及具体运动的方式和方向。让用户对动画效果有一个提前的预判不会太突兀。也可以根据预期动作去引导用户的视线。比如起跳时双腿先要弯曲，踢球向前射门时腿要向后摆动。所以在动效设计中我们运用好预期动作会让用户做好心理准备，让这个动画更加真实。

03 跟随与重叠动作

    【跟随与重叠动作】这个技巧也是表达运动速度和物体质感的重要技巧之一。

      跟随简单说举个例子就是挥棒球棒，棒球棒是手带动棒球棒转动，当手停止发力时，棒球棒不会立刻停止，会随着发力的方向摆动减幅，直到完全停止。摆动的幅度和持续时间会根据不同的力量及速度进行相应的调整。

      重叠动作就是想象棒球棒如果是橡胶材质的，那么挥舞棒球的时候就会有一定程度的弯曲，所以速度越快，材质越软，弯曲程度也会越大。

04 缓动速度曲线

      【缓动速度曲线】动效设计中最离不开的参数。不同的速度曲线也会给人不一样的感受，运动曲线较陡会感觉元素的质量更重冲击感更强，比如适用于我们竞争向的场景中。反之较平缓的曲线元素运动则较为轻盈。更适用于我们关系向的场景。

    

05 控制时间偏差

      【控制时间偏差】运动物体的主要运动和附属运动不会同时发生，用时间偏差，会让动画更加真实自然。也可避免动效过程出现空档期，或者一次性出现过多的元素，增加认知负荷。信息离场时则需要快速高效，不需要人为的制造信息偏差。

06 形运动轨迹弧

      【弧形运动轨迹】当自然运动的物体运动时都会受到引力的影响，简单解释就是速度越快弧线越平滑，移动距离越远。速度越慢弧线越弯曲，移动距离也越近。

【2】结合案例应用

     下面就举几个案例，这些原则在具体工作中的应用。

1. 福袋：短触区引导动画 

   

     这个是直播间福袋倒计时五秒开奖时播放的动画，目标是为了告诉用户福袋即将开奖，同时在这五秒内拉升福袋的价值感，提高福袋的参与率。

     确定好动效的目标后，就要围绕这个目标对动画进行拆解。

• 【第一步】是预备动作，在进行主要的动画之前需要有一个较强的视觉引导，让用户提前注意到福袋接下来会会有动作发生，这里采用的方式是抖动。

• 【第二步】是体现价值感，这里采用的是金色粒子加发光的效果。

• 【第三步】倒计时结束福袋准备离场。

  
  

     动画步骤拆解完后就分析每一步动画需要用到的动画原则。比如第一步的抖动引起用户注意的同时下一步就需要喷出粒子，所以在抖动的这一步就要增加一个预期动作。在这里设计了两个预期动作：一个是粒子向右上角喷出，所以预期动作设计成向左下角提前移动收起，同时给下一步的粒子动画留出足够的空间出现。第二个是收紧口袋，为下一步的打开做准备。

      然后福袋的绳子也会跟着福袋运动，这里用到了“跟随与重叠动作”和“附属运动”，因为绳子材质比较软，所以抖动频率和幅度设计的时候都会相应的增加一些。

      第二步动画当福袋打开时有一个“挤压和拉伸”的效果，一个是为了表现福袋的材质，再一个是为了体现福袋突然打开的速度感。

      最后一步就是喷完粒子后的消失动画，这里加了一个位置移动的‘预期动作。然后在配合速率较快的缓动曲线最后完成  消失。

     可以看一下运用动画原则之前和之后的对比，这个没有用动画原则的案例会有明显的顿挫感，整体动画不够自然，就会显得动画呆呆的。嗯。那这个用了动画原则之后整体动画会显得比较流畅，中间也没有空档期。这里说一下，基本上每个动画都会用到前面说的时间偏差控制来调整节奏，所以就没有在案例里单独列出来。

2. 盲盒：盲盒游戏引导入口动画

     先拆解动画，再分析需要运用到的动画原则。这里主要说下不同点，第二步中用到了“弧形运动”的原则。‘盲盒喷出的彩带和星星会有‘不同的’速度，速度快的元素运动的路径会比速度慢的更平滑一些。

   

3. 拼图：拼图游戏引导入口动画

由于拼图本身造型比较单一，材质也相对偏硬。所以不好在拼图本身上去做动画。然后这里处理的方式是利用光感带出一个缩放的效果来进行视觉上的引导。这里同样控制了时间的偏差。先通过光感带动拼图礼物放大提供一个拍下去的预期动作。然后拍下去的同时扫光到边缘处立刻释放粒子，达到视觉上的同步。

4. 段位勋章 降段动画

这个案例是段位勋章的降段动画，前几个例子中动画的元素材质都偏软。所以这个案例主要是想对比一下材质比较硬的表现样式。

   最后就简单总结一下动效设计的方法。一共拆解为四步，首先确定好需求方的目标和预期。然后再进行具体的脚本步骤的拆分，然后再聚焦到每一步需要用的的动画原则。最后再开始动效设计。设计前对需求进行充分的思考，让动效在助力业务发展的同时也能够做到有理有据。