HarmonyOS鸿蒙Next中如何实现一个组件不停地旋转

HarmonyOS鸿蒙Next中如何实现一个组件不停地旋转 解决措施

可以通过属性动画的方式实现。

参考链接

属性动画

2 回复

可以参考如下代码：不知道和gif比 占用的内存如何

@State rotateAngle: number = 0

Image($r('app.media.pull_loading_icon'))
  .width(16)
  .height(16)
  .animation({
    duration: 50,
    curve: Curve.Linear,
    iterations: 1,
    tempo:100,
    playMode: PlayMode.Normal,
    onFinish: () => {
      this.rotateAngle = this.rotateAngle + 15
    }
  })
  .rotate({angle: this.rotateAngle})
  .onAppear(() => {
    this.rotateAngle = 15
  })

更多关于HarmonyOS鸿蒙Next中如何实现一个组件不停地旋转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Animator和RotateAnimation组件实现一个组件不停地旋转。首先，使用RotateAnimation定义旋转动画，设置起始和结束角度（如0到360度），并设置重复模式为Animation.RepeatMode.REVERSE。然后，通过Animator启动动画，并设置repeatCount为无限循环。具体代码如下：

import { RotateAnimation, Animator } from '@ohos.animator';

const rotateAnimation = new RotateAnimation(0, 360);
rotateAnimation.setDuration(2000); // 设置动画时长
rotateAnimation.setRepeatMode(Animation.RepeatMode.REVERSE); // 设置重复模式

const animator = new Animator();
animator.addAnimation(rotateAnimation);
animator.setRepeatCount(-1); // 设置为无限循环
animator.start(); // 启动动画

将目标组件绑定到Animator即可实现不停旋转。

回到顶部