HarmonyOS NEXT鸿蒙开发：animateTo动画

最新推荐文章于 2025-12-31 08:29:05 发布

原创最新推荐文章于 2025-12-31 08:29:05 发布 · 473 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos

说明

实现动画效果，相当于javascript动画

API

animateTo(value: AnimateParam, event: () => void): void

注意：

不推荐在 aboutToAppear、aboutToDisappear 中调用动画。
如果在 aboutToAppear 中调用动画，自定义组件内的build还未执行，内部组件还未创建，动画时机过早，动画属性没有初值无法对组件产生动画。
执行 aboutToDisappear 时，组件即将销毁，不能在aboutToDisappear里面做动画。

参数：

value：AnimateParam 类型，必填，设置动画效果相关参数。
event：() => void，必填，指定动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

AnimateParam

该对象有以下属性：

duration：number类型，动画持续时间，单位为毫秒。默认值：1000
tempo：number类型，动画播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。默认值：1.0
curve：类型：Curve | ICurve9+ | string，动画曲线。默认值：Curve.EaseInOut
delay：类型：number，动画延迟播放时间，单位为ms(毫秒)，默认0
iterations：类型：number，动画播放次数。默认播放一次，设置为-1时表示无限次播放。设置为0时表示无动画效果。默认值：1
playMode：类型：PlayMode，动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal
onFinish：类型：() => void，动画播放完成回调。

Curve动画缓动效果

详见链接

案例：锤子下落动画

在这里插入图片描述

const duration = 500

@Entry
@Component
struct Donghua {
  @State message: string = 'Hello World';

  // 锤子的旋转角度
  @State rotateValue:number = 0
  build() {
    RelativeContainer() {
      Image($r('app.media.chuizi1'))
        .width(200)
        .position({
          x: 180,
          y: -20,
        })
        .onClick(() => {
          this.doClick()
        })
        .rotate({
          angle: this.rotateValue,
          centerX:160,
          centerY:160,
        })
    }
    .height('100%')
    .width('100%')
  }
  doClick(){
    // 锤子动画
    animateTo({
      duration:duration,
      curve:Curve.Linear,
      onFinish:()=>{ // 动画播放完成回调
        animateTo({
          duration:duration,
        }
          ,()=>{
            this.rotateValue = 0
          })
      }
    },
      () =>{
        this.rotateValue = -50
      })
  }
}