鸿蒙Next中如何让图片animation自动执行

在鸿蒙Next开发中，我想实现图片自动播放动画的效果，但不知道具体该如何操作。请问有没有示例代码或步骤说明？是否需要设置特定的属性或调用某个API来实现自动执行？

2 回复

在鸿蒙Next中，让图片自动执行动画很简单！用ImageAnimator组件，设置state: AnimationStatus.Running，它就会自己动起来。就像给图片喝了红牛，停不下来！😄 代码示例：

ImageAnimator()
  .state(AnimationStatus.Running)

更多关于鸿蒙Next中如何让图片animation自动执行的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过animateTo方法或animation属性实现图片自动执行动画。以下是两种常用方法：

方法1：使用animateTo（推荐）

import { animateTo } from '@ohos.animator';

// 在组件构建时启动动画
aboutToAppear() {
  animateTo({
    duration: 1000,      // 动画时长（毫秒）
    iterations: -1,      // 无限循环
    curve: Curve.EaseIn  // 缓动曲线
  }, () => {
    // 在这里修改图片的样式属性
    this.translateX = 100;
    this.rotateAngle = 360;
  });
}

方法2：使用animation属性

// 在组件中定义动画参数
@State animationParams: object = {
  duration: 1000,
  iterations: -1,
  curve: Curve.EaseIn
}

// 在Image组件上直接应用
Image($r('app.media.logo'))
  .width(100)
  .height(100)
  .animation(this.animationParams)
  .translate({ x: this.translateX })
  .rotate({ angle: this.rotateAngle })

关键参数说明：

  • duration：动画持续时间（毫秒）
  • iterations：循环次数（-1表示无限循环）
  • curve：动画曲线（如Linear/EaseIn/EaseOut等）

完整示例（旋转动画）：

@Entry
@Component
struct ImageAnimation {
  @State rotateAngle: number = 0
  
  aboutToAppear() {
    animateTo({
      duration: 2000,
      iterations: -1
    }, () => {
      this.rotateAngle = 360
    })
  }

  build() {
    Image($r('app.media.icon'))
      .width(100)
      .height(100)
      .rotate({ angle: this.rotateAngle })
  }
}

选择其中一种方法即可实现图片自动执行动画效果。

回到顶部