HarmonyOS 旋转动画效果

通过api写了一个旋转动画的效果,但是这个效果每执行一次都感觉有卡顿问题,不是连续播放的动画效果。

import curves from '@ohos.curves'

@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  // 第二步:将状态变量设置到相关可动画属性接口
  build() {
    Stack() {
      Column() {
      }
      .rotate({ angle: this.rotateValue })
      .backgroundColor('#317AF7')
      .backgroundImage($r('app.media.foreground'))
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        animateTo({ curve: curves.springMotion() ,duration:3000,iterations:8,delay:-1}, () => {
          this.animate = !this.animate;
          // 第三步:闭包内通过状态变量改变UI界面
          // 这里可以写任何能改变UI的逻辑比如数组添加,显隐控制,系统会检测改变后的UI界面与之前的UI界面的差异,对有差异的部分添加动画
          // 组件一的rotate属性发生变化,所以会给组件一添加rotate旋转动画
          this.rotateValue = this.animate ? 360 : 0;
        })
      })
      Text('123')
    }
    .width('100%')
    .height('100%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
HarmonyOS
2024-12-24 17:26:23
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
FengTianYa

这不是属于卡顿,这个是前后动画的间隔,这边在demo上进行了修改,实现了一直旋转的功能。

import curves from '@ohos.curves'

@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度ka
  // 第二步:将状态变量设置到相关可动画属性接口
  build() {
    Stack() {
      Column() {

      }
      .rotate({ angle: this.rotateValue })
      .backgroundColor('#317AF7')
      .backgroundImage($r('app.media.foreground'))
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.rotateValue = 360
      })
      .animation({
        duration:1000,
        curve:Curve.Linear,
        delay:1,
        iterations:-1,
      }).rotate({
        angle:this.rotateValue
      })
      Text('123')
    }
    .width('100%')
    .height('100%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
分享
微博
QQ
微信
回复
2024-12-24 19:15:09
相关问题
HarmonyOS 如何实现旋转动画
1178浏览 • 1回复 待解决
HarmonyOS 页面跳转动画
944浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
577浏览 • 1回复 待解决
HarmonyOS 怎么取消路由跳转动画
605浏览 • 1回复 待解决
如何实现上下切换的页面间跳转动画
2629浏览 • 0回复 待解决
HarmonyOS 如何停止无限旋转中的动画
925浏览 • 1回复 待解决
HarmonyOS 列表动画效果
872浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
754浏览 • 1回复 待解决
HarmonyOS List动画效果
814浏览 • 1回复 待解决
HarmonyOS 如何实现旋转地球的效果
544浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
655浏览 • 1回复 待解决
HarmonyOS 动画效果实现
1098浏览 • 1回复 待解决
HarmonyOS clipShape 动画效果实现
705浏览 • 0回复 待解决
属性动画如何实现宽高动画效果
2957浏览 • 1回复 待解决