「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果，适合表现独特的界面元素。鸿蒙提供了丰富的工具，支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。

关键词

• 自定义动画
• 动画路径
• 贝塞尔曲线
• 动画控制

一、Animation 组件的自定义路径

自定义路径动画使组件能够按照特定轨迹移动。贝塞尔曲线是创建复杂动画路径的常用方法。

1.1 贝塞尔曲线

贝塞尔曲线动画适合需要平滑、自然的路径效果，可以通过调整控制点来改变曲线路径。以下代码演示了组件沿自定义贝塞尔曲线运动。

@Entry
@Component
export struct BezierPathAnimation {
   
  @State private x: number = 0; // x 轴初始位置
  @State private y: number = 0; // y 轴初始位置

  build() {
   
    Column() {
   
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({
    x: this.x, y: this.y }) // 应用自定义路径的移动
        .transition({
    opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动贝塞尔曲线动画') // 按钮触发贝塞尔路径动画
        .onClick(() => this.startBezierAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现贝塞尔曲线动画
  startBezierAnimation() {
   
    let t = 0;
    const interval = setInterval(() => {
   
      t += 0.02; // 递增参数t，用于控制贝塞尔曲线进度

      // 贝塞尔曲线公式
      this.x = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 150 + t * t * 300;
      this.y =