当前位置：首页 > article >正文

鸿蒙 @ohos.animator (动画)

article 2025/3/17 0:55:12

鸿蒙 @ohos.animator (动画)

在鸿蒙 Next 开发中，@ohos.animator 模块提供了强大的动画功能，支持属性动画、帧动画等多种动画效果。通过 @ohos.animator，开发者可以轻松实现复杂的动画效果，提升应用的用户体验。本文将详细介绍如何使用 @ohos.animator 模块实现动画效果，并提供一些实际代码示例。

一、动画模块的基本概念

在鸿蒙 Next 中，动画可以分为以下几类：

属性动画：通过改变组件的属性（如透明度、位置、旋转等）来实现动画效果。
帧动画：通过连续播放一系列图片来实现动画效果。
组合动画：结合多种动画效果，实现复杂的交互效果。

二、使用 @ohos.animator 模块

（一）导入模块

在鸿蒙 Next 中，可以通过以下方式导入 @ohos.animator 模块：

import { AnimatorOptions, AnimatorResult } from '@kit.ArkUI';

（二）创建动画

1. 创建一个简单的动画

以下是一个简单的动画示例，展示如何创建一个平移动画：

@Entry
@Component
struct SimpleAnimation {
  @State animatorOptions: AnimatorResult | undefined = undefined;

  build() {
    Column() {
      Button('播放动画')
        .onClick(() => {
          this.startAnimation();
        })
        .width(100)
        .height(40)
      Image('$media:example_image')
        .width(100)
        .height(100)
        .translate({ x: 0, y: 0 })
        .id('animateImage')
    }
    .width('100%')
    .height('100%')
  }

  startAnimation() {
    const image = this.$refs['animateImage'] as Image;
    const options: AnimatorOptions = {
      duration: 1000,
      easing: 'linear',
      iterations: 1,
      fill: 'forwards',
      onFrame: (progress) => {
        image.translate({ x: progress * 200, y: 0 });
      }
    };
    this.animatorOptions = this.getUIContext().createAnimator(options);
    this.animatorOptions.play();
  }
}

2. 使用帧动画实现复杂效果

以下是一个帧动画的示例，展示如何实现一个小球的抛物运动：

@Entry
@Component
struct BallAnimation {
  @State animatorOptions: AnimatorResult | undefined = undefined;
  @State translateX: number = 0;
  @State translateY: number = 0;

  build() {
    Column() {
      Button('播放动画')
        .onClick(() => {
          this.startAnimation();
        })
        .width(100)
        .height(40)
      Image('$media:example_ball')
        .width(50)
        .height(50)
        .translate({ x: this.translateX, y: this.translateY })
    }
    .width('100%')
    .height('100%')
  }

  startAnimation() {
    const options: AnimatorOptions = {
      duration: 2000,
      easing: 'friction',
      iterations: 1,
      fill: 'forwards',
      onFrame: (progress) => {
        this.translateX = progress * 300;
        this.translateY = Math.sin(progress * Math.PI) * 100;
      }
    };
    this.animatorOptions = this.getUIContext().createAnimator(options);
    this.animatorOptions.play();
  }
}

三、动画的控制

（一）播放动画

通过 play 方法启动动画：

this.animatorOptions?.play();

（二）暂停动画

通过 pause 方法暂停动画：

this.animatorOptions?.pause();

（三）结束动画

通过 finish 方法结束动画：

this.animatorOptions?.finish();

四、高级动画效果

（一）组合动画

可以结合多种动画效果，实现复杂的交互效果。以下是一个同时改变透明度和旋转的动画示例：

startAdvancedAnimation() {
  const image = this.$refs['animateImage'] as Image;
  const options: AnimatorOptions = {
    duration: 2000,
    easing: 'linear',
    iterations: 1,
    fill: 'forwards',
    onFrame: (progress) => {
      image.opacity(progress);
      image.rotate(progress * 360);
    }
  };
  this.animatorOptions = this.getUIContext().createAnimator(options);
  this.animatorOptions.play();
}

（二）弹簧动画

从 API version 11 开始，支持使用 interpolating-spring 曲线。以下是一个弹簧动画的示例：

startSpringAnimation() {
  const options: AnimatorOptions = {
    easing: 'interpolating-spring(1.0, 1.0, 100.0, 10.0)',
    duration: 2000,
    fill: 'forwards',
    onFrame: (progress) => {
      this.translateX = progress * 300;
    }
  };
  this.animatorOptions = this.getUIContext().createAnimator(options);
  this.animatorOptions.play();
}