「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 = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 200 + t * t * 0;

      if (t >= 1) clearInterval(interval); // 动画结束时停止
    }, 50); // 每50ms更新一次位置
  }
}

效果示例：点击“启动贝塞尔曲线动画”按钮后，图片会按照贝塞尔曲线轨迹移动，形成柔和的弧形路径。

---

二、基于时间的动画控制

时间控制可用来设置动画播放的速度或暂停点。通过 setTimeout 和 clearInterval 等控制函数，可以实现精确的动画定时。

2.1 自动启动和暂停动画

以下示例展示了如何通过按钮启动或暂停自动位移动画。

@Entry
@Component
export struct TimedControlAnimation {
  @State private x: number = 0; // x 轴位置
  @State private isAnimating: boolean = false; // 控制动画状态
  private intervalId: number | null = null; // 存储动画的定时器 ID

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x }) // 应用自动位移动画
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button(this.isAnimating ? '暂停' : '启动') // 切换启动和暂停按钮
        .onClick(() => this.toggleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 启动或暂停动画
  toggleAnimation() {
    if (this.isAnimating) {
      clearInterval(this.intervalId); // 暂停动画
      this.intervalId = null;
    } else {
      this.intervalId = setInterval(() => {
        this.x = this.x === 0 ? 200 : 0; // 在 0 和 200 之间切换位置
      }, 1000); // 每1秒切换位置，实现自动平移
    }
    this.isAnimating = !this.isAnimating; // 更新动画状态
  }
}

效果示例：点击“启动”按钮后，图片将左右自动移动；点击“暂停”按钮，动画将停止。

---

三、复杂组合动画

将多个动画效果组合可以实现丰富的视觉效果。以下代码展示旋转、缩放与路径运动的组合动画。

3.1 旋转、缩放与路径运动

@Entry
@Component
export struct ComplexCombinationAnimation {
  @State private x: number = 0; // x 轴位置
  @State private y: number = 0; // y 轴位置
  @State private rotation: number = 0; // 旋转角度
  @State private scale1: number = 1; // 缩放比例

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x, y: this.y }) // 应用位移动画
        .rotate({ angle: this.rotation }) // 应用旋转动画
        .scale({ x: this.scale1, y: this.scale1 }) // 应用缩放动画
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动组合动画') // 按钮触发组合动画
        .onClick(() => this.startComplexAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现旋转、缩放和路径运动的组合动画
  startComplexAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.02;

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

      // 旋转和缩放
      this.rotation += 5; // 累加旋转角度
      this.scale1 = this.scale1 === 1 ? 1.3 : 1; // 在 1 和 1.3 之间缩放

      // 动画结束条件
      if (t >= 1) clearInterval(interval);
    }, 100); // 每100ms更新一次
  }
}

效果示例：点击“启动组合动画”按钮后，图片会沿贝塞尔曲线移动，并自动旋转和缩放。

---

四、自定义缓动函数

缓动函数让动画更具表现力。下面是自定义的弹性缓动函数示例，使图片在缩放时带有弹跳效果。

4.1 弹性缩放动画

@Entry
@Component
export struct CustomEaseAnimation {
  @State private scale1: number = 1; // 缩放比例

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .scale({ x: this.scale1, y: this.scale1 }) // 应用弹性缩放
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动弹性缩放') // 按钮触发弹性缩放动画
        .onClick(() => this.startElasticScaleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现弹性缩放动画的函数
  startElasticScaleAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.05;
      this.scale1 = 1 + Math.sin(t * Math.PI * 4) * Math.exp(-t * 4); // 弹性缓动公式

      // 当 t 超过某值时停止动画
      if (t >= 1) {
        clearInterval(interval);
        this.scale1 = 1; // 恢复缩放比例
      }
    }, 50); // 每 50ms 更新一次缩放比例
  }
}

效果示例：点击“启动弹性缩放”按钮后，图片将缩放并带有弹性效果。

---

小结

本篇介绍了鸿蒙中如何实现自定义动画，包括贝塞尔曲线路径、时间控制、多重组合和自定义缓动函数。通过这些技巧，开发者可以设计出更具个性化和表现力的动画效果，提升应用的用户体验。

---

下一篇预告

在下一篇中，将介绍如何使用 Canvas 组件实现自定义绘图，为鸿蒙应用增添图形效果。

---

上一篇： 「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

下一篇： 「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas 组件自定义绘图

---

作者：SoraLuna 链接：https://www.nutpi.net 來源：坚果派 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---