鸿蒙 @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();
}