动效 Motion
随着行业的进步、更迭,用户已经不满足于静态页面所呈现的视觉感官,而页面动效的加入,更能向用户传递产品的情感温度。优秀的动效不仅仅能够提升页面交互的流畅度,更能降低用户的理解成本,为产品赋予鲜活的人性情感。
纬度 01:动作
1)位移
通过改变动画对象 Translate 值,从而实现对象 移动 的效果。
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/motion01.gif)
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/motion02.gif)
2)旋转
通过改变动画对象 Rotate
值,从而实现对象 旋转 的效果。
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/spin01.gif)
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/spin02.gif)
3)尺寸缩放
通过改变动画对象 Scale
值,从而实现对象 尺寸缩放 的效果。
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/zoom01.gif)
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/zoom02.gif)
4)颜色变化
通过改变动画对象 Color
值,从而实现对象 颜色变化 的效果。
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/color01.gif)
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/color02.gif)
5)透明度变化
通过改变动画对象 Opacity
值,从而实现对象 透明度变化 的效果。
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/transition01.gif)
![](https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/doc/transition02.gif)
纬度 02:时间
1)基础时间
时间是一个完整动画的重要组成部分,它赋予了动作意义和灵魂。元素运动过程,本身就是依靠 时间 概念来衡量的,同样运动本身传地的力量与美感,也是通过时间来反应的。有了基本动作之后,需要加入时长的概念,来整个完整动画。通过调节时间的快慢长短,能够很好地演绎出生个动效的节奏和情绪;通过调节时间轴的错落顺序,能够更好地明确对比关系、表现设计感。
2)贝塞尔曲线
普通的动画效果过于平庸,我们可以加入缓动函数(本质还是时间轴的变化),让我们的动画看起来平滑或者富有弹性,让动画灵动起来,或者达到特殊的动画效果。 `Cubic-bezier()`` 定义了一条立方贝塞尔曲线(cubic Bézier curve)。这条曲线是连续的,一般用于动画的平滑变换。