HarmonyOS 如何实现一个转圈效果

我有一个圆圈的图片,想通过动画的方式让图片转动,以此实现转圈的效果

我用以下代码,图片展示出来了,但是图片不转动。我应该怎么实现它?

Image($r('app.media.icon_loading')) 
  .objectFit(ImageFit.Contain) 
  .width('36lpx') 
  .height('36lpx') 
  .animation({ 
    duration: 1200, 
    curve: Curve.Friction, 
    delay: 500, 
    iterations: -1, // -1为无限播放 
    playMode: PlayMode.Alternate, 
    tempo: 10 
  })
HarmonyOS
2024-09-02 10:50:32
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

要想实现图片旋转功能,可以参考以下demo:

@Entry 
@Component 
struct AnimateToExample { 
  @State rotateAngle: number = 0 
 
  build() { 
    Column() { 
      Image($r('app.media.app_icon')) 
        .width(50) 
        .height(50) 
        .objectFit(ImageFit.Fill) 
        .margin(50) 
        .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) 
        .onAppear(() => { 
          animateTo({ 
            duration: 800, 
            curve: Curve.Linear, 
            iterations: -1, // 设置-1表示动画无限循环 
          }, () => { 
            this.rotateAngle = 360 
          }) 
        }) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-09-02 16:13:36
相关问题
编写一个页面,实现吸顶效果
978浏览 • 1回复 待解决
HarmonyOS 如何实现一个遮罩层
303浏览 • 1回复 待解决
如何为图片添加一个模糊的效果
367浏览 • 2回复 待解决
HarmonyOS 如何实现一个气泡聊天框
277浏览 • 1回复 待解决
如何实现一个折叠组件
869浏览 • 1回复 待解决
如何实现一个下拉菜单?
405浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗?
640浏览 • 1回复 待解决
如何实现一个页面显示子窗口
545浏览 • 1回复 待解决
如何实现一个带动画的弹窗?
393浏览 • 1回复 待解决
如何实现一个倒计时器?
359浏览 • 1回复 待解决
如何实现一个监听网络变化的方法
492浏览 • 1回复 待解决
如何判断一个对象实现了某个接口
1203浏览 • 1回复 待解决
如何实现一个组件不停地旋转
2124浏览 • 1回复 待解决
如何实现一个GIF图显示指定次数
2039浏览 • 1回复 待解决