ARKTS Curve使用介绍

在鸿蒙操作系统（HarmonyOS）的 ArkTS（Ark TypeScript）中，Curve 是一个用于描述动画过渡效果的曲线类型。通过使用 Curve，可以控制动画的速度变化，从而实现不同的动画效果，如匀速、加速、减速等。Curve 是在动画和过渡中定义时间进程的关键工具。

主要曲线类型

Curve 提供了一些预定义的曲线类型，这些类型可以直接使用：

LinearCurve：线性曲线，动画以恒定的速度进行。
Ease：平滑曲线，动画开始时较慢，然后加速，最后再减速。
EaseIn：动画以较慢的速度开始，然后逐渐加速。
EaseOut：动画以较快的速度开始，然后逐渐减速。
EaseInOut：动画以较慢的速度开始，中间加速，然后再逐渐减速。
FastOutSlowIn：快速开始并在结束时减速的曲线。
CubicBezier：通过控制点自定义的贝塞尔曲线，可以实现复杂的动画效果。

代码示例

@Entry
@Component
struct CurveExample {
  @State offsetX: number = 0;

  build() {
    Column() {
      // 使用 Ease 曲线的动画
      Button('Animate with Ease').onClick(() => {
        this.offsetX = 300; // 目标位置
      })
      .margin(10)
      .animate({
        duration: 1000, // 动画持续时间
        curve: Curve.Ease // 使用 Ease 曲线
      })
      .translate({ x: this.offsetX })

      // 使用 LinearCurve 曲线的动画
      Button('Animate with Linear').onClick(() => {
        this.offsetX = 0; // 回到初始位置
      })
      .margin(10)
      .animate({
        duration: 1000, // 动画持续时间
        curve: Curve.LinearCurve // 使用 LinearCurve 曲线
      })
      .translate({ x: this.offsetX })
    }
  }
}