HarmonyOS image组件,在组件渲染时就有0-360 度的动画效果-鸿蒙开发者社区-51CTO.COM

HarmonyOS image组件,在组件渲染时就有0-360 度的动画效果

如何实现image组件的loading.png 从0-360°旋转,不需要用户手动点击更改rotate的angle值,而是在组件渲染时,直接就有一个从0-360°的动画效果,实现转圈圈的动画效果。

Image($r("app.media.loading"))  
  .height(60)  
  .width(60)  
  .rotate({ angle: 360 })// 想要实现从0-360 度旋转  
  .animation({  
    duration: 2000,  
    curve: Curve.EaseOut,  
    iterations: -1,  
    playMode: PlayMode.Normal  
  })
HarmonyOS
2024-10-12 11:09:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以调用.onComplete方法来实现:

Image($r("app.media.startIcon"))  
        .height(60)  
        .width(60)  
        .rotate({ angle: 360 }) // 想要实现从0-360 度旋转  
        .animation({  
          duration: 2000,  
          curve: Curve.EaseOut,  
          iterations: -1,  
          playMode: PlayMode.Normal  
        })  
        .onComplete(() => {  
          animateTo({ curve: curves.springMotion() }, () => {  
            console.log("curves springMotion");  
          })  
        })
分享
微博
QQ
微信
回复
2024-10-12 17:17:21
相关问题
image组件中使用bindContextMenu报错
342浏览 • 1回复 待解决
ArkUl中如何实现动画效果?
37浏览 • 0回复 待解决
HarmonyOS image组件拖拽问题
185浏览 • 1回复 待解决
HarmonyOS 页面内组件转场动画
253浏览 • 1回复 待解决
HarmonyOS预加载Image组件图片
391浏览 • 1回复 待解决