本文主要讲述了为什么做动效，好的动效设计的标准是什么，如何做动效设计，以及如何使自己设计的动效完美落地。
看完本文你会学到：
1. 为什么需要动效设计？
- 什么是动效设计？
- 动效在产品设计的作用
- 动效设计的好标准
2. 如何设计动效？
- 6个构思动效的方法
- 6个实现动效的方法
3. 动效的类别
4. 常用的动效软件
5. 让动效落地的4个方法
为什么需要设计动效？
我最开始接触动效设计，只是觉得又炫，又酷，翻滚的，旋转的，爆炸的。只是觉得新鲜，好玩，可以炫技。可以让设计更加酷炫。可能大部分同学，在做刚开始接触的时候多多少少都会有和我差不多的想法。这就是我们做动效设计的目的吗？应该不是。
解决为什么要做动效设计这个问题，就要搞清楚什么是动效设计？动效设计有什么作用？
1. ?什么是动效设计呢？
动效大范围兴起，大概始于扁平化设计之后，扁平化设计的好处在于用户的注意力可以集中在界面的核心信息上，将对用户无效的设计元素去掉，不被设计所打扰分散注意力，使用体验更加纯粹自然。这个思路是对的，回归了产品设计的本质，就是提供更好的使用体验，而不是提供更漂亮的界面设计。但是，过于扁平化的设计，也带来了新的问题，一些复杂层级关系如何展现？用户如何被引导和吸引？这与用户在现实3D世界中的自然感受很不一致。所以Google推出了Material Design设计语言。
Material design 设计规范中，将动效设计这一章命名为「Animation」，动画，活泼的意思。
动词 Animate 是「赋予生命」的意思，动效可以定义为使用类似动画的手法，赋予界面生命和活力。
前面我们说过Material design设计语言，一部分作用是为了解决过于扁平化设计所带来的弊端，复杂层级关系如何展现，用户如何被引导和代入。为了解决这个问题，Material design 设计风格，充分利用Z轴，通过分层设计以及动效相配合的方式，在扁平化基础上提供给用户更好理解的层级关系，赋予设计以情感增加用户使用过程中的参与度。
2. 动效设计对于产品设计有什么作用？
△ 动效设计的作用
如上图所示，动效对于产品设计的作用包含：
- 传递层级信息 ；
- 传递状态信息；
- 提示隐藏信息功能；
- 传递情感化信息。
知道了这些，那么，我们为什么需要动效设计？
通过上面说的，结合我们自身产品设计的特性，我们可以总结出动效设计的动机主要有如下几点：
- 使等待不枯燥；
- 使变化不生硬；
- 使反馈不单调；
- 使体验有情感；
- 使用户更愉悦。
好的动效是什么?
知道为什么做动效设计，那我们应该做什么样的动效设计？或者说好的动效设计是什么呢？是炫酷的，翻滚的，旋转的，爆炸的吗? 复杂程度是评判好与坏的标准吗？
国外一位著名的一线设计师，曾经在分享会上对于好的动效下过这样一个定义：
好的动效应该是隐形的，好的动效应该是以提高可用性为前提，并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制。
这句话其实就是，好的动效设计是合适的，是对于用户使用体验的提升，最终服务的是体验而不是展示你的动画设计。
既然如此 ，那么让我们总结一下好的动效设计的标准。
首先要具备一下几点特性：
- 快速且流畅；
- 恰到好处的反馈；
- 提升操作感受；
- 提供良好的视觉效果。
△ 动效设计标准
其次，好的动效设计应该是首先服务于体验，其次适当设计（考虑全面，如性能，实现成本，是否干扰用户等），再次就是要让用户感受到你输出的情感互动，最后也是最基本的就是要具有视觉上的美感。
怎样设计动效？
知道了什么是好的动效设计，那么就引申出下一个问题，我们怎么进行动效设计？ 或者说，动效设计该如何入手，尤其是初学者？
很简单，就两步：
- 先要有一个构思，想法；
- 根据想法进行丰满实现。
没有想法？想法怎么来？怎么构思？从我自身总结，可以从这6个方面进行构思：
△ 动效灵感来源
1. 结合产品去设计
要结合产品进行思考，思路设计要符合提升的产品体验，要经过细致思考不要盲目。
2. 了解基本常识
这些常识包含，动效设计的基本常识（如，基本的运动规律，节奏，动画如何），开发的基本常识，什么样子的动效果大概如何实现，实现成本大概是多少。确保能够顺利落地。
3. 观察生活
人们对于美的认知，大部分来自于日常的生活经历。比如什么样的运动是温柔地，激烈的，具有震撼性的。当我们对于我们需要构思的动效有性质定位的时候，可以从生活中这些相同的，定性的自然事物中寻找灵感，截取精华。
4. 看并思考
就是除了观察生活，我们还需要多看一些优秀的动效设计，时刻作为积累。同时，也需要对于「看」的事物进行细致思考。要思考他为什么这么设计，怎么完成这套动画设计的（是通过那些技巧构成这个动效设计的，整体节奏是怎样的一种感觉）。时刻与自己对类似事物的想法进行对比，找差距，补不足。这就是经验技巧积累的过程。
5. 学会拆解
web，app中大部分的动效设计，都是通过基本的变化组合而成的。我们要通过多看多观察，慢慢学会怎么去拆解别人复杂的动效设计，从中总结经验。而后，通过合理的编排设计出自己的动效设计，你就是这场动效设计的导演。
6. 关注流行
这个很简单，就是大家要保持对于设计行业，或者说是web，app动效设计领域的关注。了解当下新的设计手法，设计趋势以及设计方式。不要做一个落伍者，也不要把自己永远定义为一个跟随者。
前面我们说大部分我们在web&app中看到的动效设计，都是由一些基本的变化组合而成的，那这些基础变化是什么呢？（见下图）
△ 动画的基础变化
基础变化主要包含：移动，旋转，缩放以及属性变化。前面几点都很好理解，在此就不在详细解释。解释一下最后一个属性变化，它其实就是指透明度，形状，颜色等这些属性的变化。所有的这些变化形式，经过合理的编排在配合上合适的运动节奏，就是一个完整的动效设计。
简单来说就是：你要确定你要发生什么样的运动，这个运动要以何种节奏运动。贝塞尔曲线，就是将速度与时间的关系，用图形的形式展现出来，使其表意更直观。
△ 变化节奏
上图就是一些常见的贝塞尔曲线，右边就是我们在AE设计过程中，运动曲线调节界面。
为什么运动需要配合合适的节奏呢？
因为自然界中运动都不是线性的匀速运动，而是按照物理规律，呈现出的曲线的变速运动。这就是之前说的基本常识，基本规律。人们对于一个运动形式产生的情感反馈，大部分也来自于生活中看到的类似的运动形式。所以我们要符合物理规律，这样才能准确的专递我们动效设计的情感。当然可以适当根据需要夸张，精简。规矩是死的人是活的。活学活用。
http://easings.net
这个网站上归结了基本全部运动形式的贝塞尔曲线，并且有预览。还能直接使用js代码，很方便，很直观。
说了如何构思，接下来就要想想怎么实现你的想法：
△ 实现动效设计
如上图所示：
实现想法基本就是技术与技巧的问题，这需要学习与积累，怎么学习积累呢？
1. ?动手尝试，熟能生巧
不断尝试才能不断锻炼自己的技术技巧。只有尝试了才能真的验证你的设计。
2. 临摹作品
学习任何东西，尤其是设计这个行当。临摹都是很有效的入门办法，之前的写实图标，现在的动效设计都是如此。临摹的过程其实就是你与优秀设计者交流的过程，从中你能仔细了解和学习他的设计思路手法，也能在临摹过程中对于原有设计手法结合自身经验进行优化升级，是很好的提升技巧的方法。
3. 注重细节
这个很简单，就和做单纯的视觉设计一样，一定要注意细节，细节决定成败，尤其是动效设计。要认真，多想，想全面。
4. 有节奏感
这个前面说过。要让你的作品有活力不死板，才能赋予产品以新的活力。
5. 先加后减
在实现