1.关于设计动效
扁平化设计之后，用户可以更专注于界面的主要信息上，不被多余的元素干扰，产品体验更加高效、自然，但是新的问题是扁平化设计和用户对于现实世界的3D认知不一致。为了展现界面中复杂层级关系，更高效的向用户传达核心信息，Google推出了Material Design设计语言。Material Design的动效设计这一章命名为「Animation」，动词 Animate 是「赋予生命」的意思，动效可理解为利用动画的方法赋予界面生命和活力。
2.动效的作用
传递信息层级
通过动效提示，帮助用户准确理解产品的信息架构层级。
提示信息状态
准确生动的动效，给予用户及时的操作反馈，提高用户使用产品的效率。
带来美好的情感体验
创造性、恰当的动画为用户带来趣味性和美的享受。
3.动效的构成
动效是元素通过属性变化量、动画时间以及贝塞尔插值曲线（运动速率）三个方面构成的；
3.1.动效的元素属性变化量包括：
移动，旋转，缩放，属性变化（透明度，形状，颜色）；
对应的属性参数分别是：
移动(position) 、旋转(rotation)、 缩放(scale)、透明度(alpha)、形状(shape)、颜色(color)
3.2.动画时间：动画的起始时间、持续时间（duration\ offset）
3.3.贝塞尔插值曲线 [运动速率(interpolator）]：
曲线(curve）：运动状态
表 1. 常用动效标注内容如图：
表 2. 时长规范如图：
根据屏幕的大小，动效的时长也会产生变化，根据 material design 的定义，不同设备对应的动效时长如表 2 所示：
下面介绍一下关于运动速率的贝塞尔曲线：
主流的动画设计中（After Effect、Origami、Principle、FramerJS），由于动画引擎不同的缘故，导致同样的设计效果不同。不过，其中的贝塞尔插值和函数在开发过程中可以很好的兼容Android/iOS/Web多平台动效的实现，贝塞尔曲线是动画效果在执行时的速度状态，使其看起来更加真实。
贝塞尔曲线扫盲教程http://www.html-js.com/article/1628
设计师在动效制作软件中可获得的曲线数值 http://cubic-bezier.com/#.25,.1,.4,.91
https://easings.net/zh-cn#（前端人员可用）
下图分别为常用的动效设计软件AE、Principle、Framer JS、Origami的贝塞尔曲线图：
4.动效如何落地
动效的实现需要和开发人员协同进行，所以需要提前和开发沟通动效方案的可行性和时效成本，避免方案流产。总的来说导出合理的动效标注文件主要分为以下三步：
第一步：要快速可视化
用趁手的工具将自己的动效想法快速准确的呈现给开发；
第二步：在对应的设备下呈现动效
时间允许的情况下，在电脑或者手机端演示对应端的界面交互动效；
第三步：把设计动效参数化
除了用演示的方法让开发人员了解到动效的呈现样式，还需要交付精确的动效参数给开发人员，便于动效的可以被精准无误的开发出来。
动效参数：
设备端类型、动画尺寸、帧速率、触发条件、对象、变化属性、贝塞尔曲线数值、备注（转场动效描述）、时间
material design 动效说明文档：https://www.mdui.org/design/motion/material-motion.html
