Easing Animation 缓动动画
基于 Origami 封装的动画模块，方便设计师快速的通过 Easing 预设设置动画参数，减少设计学习成本，提高和开发的协同和沟通效率。
简介
Easing Animation 缓动动画是指在动画效果中使用不同的加速度来改变动画的运动轨迹，以达到自然、流畅的效果。
场景
- 动画过渡：当元素之间需要切换时，可以使用结构化陈述缓动动画来实现过渡效果，使页面转换更加自然；
- 弹出、隐藏元素：结构化陈述缓动动画可以使弹出、隐藏元素的效果更加平滑、流畅；
- 拉伸、缩放元素：缩放元素时，可以使用结构化陈述缓动动画来实现平滑的变化效果；
- 滚动、切换页面：滚动页面时，使用结构化陈述缓动动画可以实现更加自然的滚动效果，使用户体验更加舒适。
使用建议
- 基础缓动可以使用
Cubic-bezier类型。 - 卡通插图等非 UI 元素可以使用
Elastic类型。 - 对于运动中含有快速变化的可以使用
Linear类型。
基本预设
React Nativetiming() | TaroTimingFunction | Value | Usage |
|---|---|---|---|
linear() | linear | cubic-bezier(0,0,1,1) | 颜色、透明度等变化 |
ease() | ease | cubic-bezier(.25,.1,.25,1) | 元素在画面内运动 |
ease-in() | ease-in | cubic-bezier(.42,0,1,1) | 元素出场 |
ease-out() | ease-out | cubic-bezier(0,0,.58,1) | 元素入场 |
ease-in-out() | ease-in-out | cubic-bezier(.42,0,.58,1) | -- |
bezier() | -- | custom | -- |
高级预设
高级预设暂只支持 React Native，暂不支持 Taro。
| React Native | IN | OUT | IN-OUT |
|---|---|---|---|
quad() | easeInQuadcubic-bezier(0.11, 0, 0.5, 0) | easeOutQuadcubic-bezier(0.5, 1, 0.89, 1) | easeInOutQuadcubic-bezier(0.45, 0, 0.55, 1) |
cubic() | easeInCubiccubic-bezier(0.32, 0, 0.67, 0) | easeOutCubiccubic-bezier(0.33, 1, 0.68, 1) | easeInOutCubiccubic-bezier(0.65, 0, 0.35, 1) |
poly() | easeInQuartcubic-bezier(0.5, 0, 0.75, 0) | easeOutQuartcubic-bezier(0.25, 1, 0.5, 1) | easeInOutQuartcubic-bezier(0.76, 0, 0.24, 1) |
sin() | easeInSinecubic-bezier(0.12, 0, 0.39, 0) | easeOutSinecubic-bezier(0.61, 1, 0.88, 1) | easeInOutSinecubic-bezier(0.37, 0, 0.63, 1) |
circle() | easeInCirccubic-bezier(0.55, 0, 1, 0.45) | easeOutCirccubic-bezier(0, 0.55, 0.45, 1) | easeInOutCirccubic-bezier(0.85, 0, 0.15, 1) |
exp() | easeInExpocubic-bezier(0.7, 0, 0.84, 0) | easeOutExpocubic-bezier(0.16, 1, 0.3, 1) | easeInOutExpocubic-bezier(0.87, 0, 0.13, 1) |
back() | easeInBackcubic-bezier(0.36, 0, 0.66, -0.56) | easeOutBackcubic-bezier(0.34, 1.56, 0.64, 1) | easeInOutBackcubic-bezier(0.68, -0.6, 0.32, 1.6) |
bounce() | easeInBounce | easeOutBounce | easeInOutBounce |
elastic() | easeInElastic | easeOutElastic | easeInOutElastic |
设计模块
基于 Origami，封装好的动画模块。
Easing Animation
Easing Animation 通过调整动画的速率，使得动画更具生动性，更自然。
设计师可以根据产品所使用的框架，快速的切换并选择预设好的动画参数。
Easing Animation
- Number0
- FrameReact Native
- CurveLinear
- Duration0.4s
- Bezier Value(0,0,1,1)
- 0
设计参数
| 参数 | 值 |
|---|---|
| Number | 一个数值，表示动画的开始和关闭 |
| Frame | 动画应用的场景：React Native、Taro、微信小程序、iOS、Android |
| Curve | 如上表格中的基本预设和高级预设 |
| Duration | 持续时间，xx 秒 |
| Bezier Value | 选择 Curve 类型后，会显示相应 Curve 的贝塞尔数值。 |
开发适配
| 框架 | 方法 | 说明 | 设计支持 |
|---|---|---|---|
| React Native | Easing | React Native Easing | 是 |
| iOS | UICubicTimingParameters | Apple Animation | 是 |
| Android | -- | -- | -- |
| Web | -- | -- | 是 |
| Flutter | Curves class | Flutter Animaton Curves | 是 |
| Taro | Taro.createAnimation | Taro Animation | 是 |
Cubic Bezier Animation
使用贝塞尔曲线来定义动画轨迹，提供了更多的灵活性和控制力，可以创建各种不同的动画效果。
Cubic Bezier Animation 动画通常用于更加复杂和多样化的动画效果，比如弹跳、抛物线等。
Cubic Bezier Animation
- Number0
- Duration0.4sX0Y0
- 0.17
- 0.17
- 0
- 1
- 0
- path
设计参数
| 参数 | 值 |
|---|---|
| Number | 一个数值，表示动画的开始和关闭 |
| Duration | 持续时间，xx 秒 |
| Bezier Number | 0.17, 0.17, 0, 1 |
开发适配
| 框架 | 方法 | 说明 | 设计支持 |
|---|---|---|---|
| React Native | Easing | React Native Easing | 是 |
| iOS | UICubicTimingParameters | Apple Animation | 是 |
| Android | -- | -- | -- |
| Web | -- | -- | 是 |
| Flutter | Curves class | Flutter Animaton Curves | 是 |
| Taro | Taro.createAnimation | Taro Animation | 是 |
区别特点
Easing Animation 在不同场景中使用的区别和特点:
- 用户界面：Easing Animation 可以用于创建用户界面的动画效果，比如弹出菜单、滑动面板等。
- 数据可视化：Easing Animation 可以在数据可视化中使用，比如图表、仪表盘等。它可以使得数据的变化更加平滑，更容易理解。
- 游戏：Easing Animation 在游戏开发中也很常用，比如创建物体的运动、粒子特效等。
- ......
总的来说，Easing Animation 可以让动画更加平滑、生动，使得用户界面和数据变化更容易理解。