说明
曲线，称之为 缓动效果 更易于理解。与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。
在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。
缓动效果 与 贝塞尔曲线
缓动效果，可通过 贝塞尔曲线 直观的感受到
贝塞尔曲线(Bézier curve)是一种数学曲线，在动效设计中广泛使用。
从曲线形态的类型上可以分为这几类（每一类还可分为小类）：
- 标准曲线
- 减速曲线
- 加速曲线
导入模块
指定缓动效果时，一般不需要导入模块
import { curves } from '@kit.ArkUI';
标准曲线
开始和结束处静止，速度峰值在中段，加速阶段相对于减速阶段用时更少。
使用原则：运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律。
应用场景：图片缩放，Tab切换，Switch开关等
FastOutSlowIn
cubic-bezier(0.4,0.0,0.2,1.0)
Curve.FastOutSlowIn
Ease
表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25,0.1,0.25,1.0)。
Curve.Ease
EaseInOut
表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
Curve.EaseInOut
加速曲线
从静止启动，逐渐加速，在达到峰值速度时结束（出场）。
使用原则：适用原本在视线中的物体，需要消失或出场，逐渐加速符合退场行为特征。
应用场景：窗口出场、卡片删除等。
EaseIn
表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
Curve.EaseIn
FastOutLinearIn
加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
Curve.FastOutLinearIn
减速曲线
开始处物体运动速度最快，初始即达到峰值速度，渐渐变缓，在结束处完全静止。
使用原则：适用从视线中新出现的物体，结束时通过相对较长的缓冲让人眼适应运动变化。
应用场景： 弹框出现等。
LinearOutSlowIn
减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
Curve.LinearOutSlowIn
EaseOut
表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
Curve.EaseOut
ExtremeDeceleration
急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Curve.ExtremeDeceleration
匀速
Curve.Linear
表示动画从头到尾的速度都是相同的。
未知缓动效果
- Sharp 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
- Rhythm 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
- Smooth 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
- Friction 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
案例
各个缓动效果动画
const duration = 500
@Entry
@Component
struct DonghuaXialuo {
// 锤子的旋转角度
@State y:number = 0
build() {
RelativeContainer() {
Text()
.width(20)
.height(20)
.backgroundColor(Color.Red)
.position({
x: 180,
y: this.y,
})
.onClick(() => {
this.doClick()
})
}
.height('100%')
.width('100%')
}
doClick(){
// 锤子动画
animateTo({
duration:duration,
// curve:Curve.Friction,
// curve:curves.springCurve(10, 1, 228, 30),
// curve:Curve.Linear, // 表示动画从头到尾的速度都是相同的。
// curve:Curve.Ease , // 表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
// curve:Curve.EaseIn , // 表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
// curve:Curve.EaseOut , // 表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
// curve:Curve.EaseInOut , // 表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
// curve:Curve.FastOutSlowIn , //标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
// curve:Curve.LinearOutSlowIn , //减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
// curve:Curve.FastOutLinearIn , // 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
// curve:Curve.ExtremeDeceleration , // 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
// curve:Curve.Sharp , // 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)
// curve:Curve.Rhythm , // 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)
// curve:Curve.Smooth , // 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)
curve:Curve.Friction , // 阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)
},
() =>{
this.y = 700
})
}
}
参考：在线贝塞尔曲线