动效 Motion

随着行业的进步、更迭，用户已经不满足于静态页面所呈现的视觉感官，而页面动效的加入，更能向用户传递产品的情感温度。优秀的动效不仅仅能够提升页面交互的流畅度，更能降低用户的理解成本，为产品赋予鲜活的人性情感。

纬度 01：动作

1）位移

通过改变动画对象 Translate 值，从而实现对象 移动 的效果。

2）旋转

通过改变动画对象 Rotate 值，从而实现对象 旋转 的效果。

3）尺寸缩放

通过改变动画对象 Scale 值，从而实现对象 尺寸缩放 的效果。

4）颜色变化

通过改变动画对象 Color 值，从而实现对象 颜色变化 的效果。

5）透明度变化

通过改变动画对象 Opacity 值，从而实现对象 透明度变化 的效果。

纬度 02：时间

1）基础时间

时间是一个完整动画的重要组成部分，它赋予了动作意义和灵魂。元素运动过程，本身就是依靠 时间 概念来衡量的，同样运动本身传地的力量与美感，也是通过时间来反应的。有了基本动作之后，需要加入时长的概念，来整个完整动画。通过调节时间的快慢长短，能够很好地演绎出生个动效的节奏和情绪；通过调节时间轴的错落顺序，能够更好地明确对比关系、表现设计感。

2）贝塞尔曲线

普通的动画效果过于平庸，我们可以加入缓动函数（本质还是时间轴的变化），让我们的动画看起来平滑或者富有弹性，让动画灵动起来，或者达到特殊的动画效果。 `Cubic-bezier()`` 定义了一条立方贝塞尔曲线（cubic Bézier curve）。这条曲线是连续的，一般用于动画的平滑变换。