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
赞
收藏 0
回答 1
相关问题
HarmonyOS 如何实现旋转动画
1178浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用ArkUI中的传统曲线实现旋转动画效果
1287浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙实现3D旋转动画?
977浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkTS卡片中使用按钮旋转动画?
1182浏览 • 1回复 待解决
HarmonyOS 页面跳转动画
944浏览 • 1回复 待解决
HarmonyOS router跳转动画如何实现
577浏览 • 1回复 待解决
HarmonyOS 怎么取消路由跳转动画
605浏览 • 1回复 待解决
HarmonyOS 折叠屏横屏下进入界面会出现由竖屏转横屏的旋转动画,这个动画怎么去掉
1025浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在Text组件上实现旋转手势控制旋转动作?
545浏览 • 1回复 待解决
HarmonyOS 路由页面跳转动画要怎么配置
497浏览 • 1回复 待解决
slice之间跳转动画问题?何如把默认的左右动画换成上下动画?
4963浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何为旋转屏动画配置渐隐和渐现的转场效果?
953浏览 • 1回复 待解决
如何实现上下切换的页面间跳转动画
2629浏览 • 0回复 待解决
HarmonyOS 如何停止无限旋转中的动画
925浏览 • 1回复 待解决
HarmonyOS 列表动画效果
872浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
754浏览 • 1回复 待解决
HarmonyOS List动画效果
814浏览 • 1回复 待解决
HarmonyOS 如何实现旋转地球的效果?
544浏览 • 1回复 待解决
在鸿蒙开发中,如何实现组件的动画效果,如淡入淡出、旋转和平移?
269浏览 • 0回复 待解决
HarmonyOS 想让加载图片一致旋转,实现一个等待动画的效果,但是设置代码后不执行动画
561浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
655浏览 • 1回复 待解决
HarmonyOS 动画效果实现
1098浏览 • 1回复 待解决
HarmonyOS clipShape 动画效果实现
705浏览 • 0回复 待解决
属性动画如何实现宽高动画效果
2957浏览 • 1回复 待解决
怎么实现图像的裁剪、旋转和滤镜效果?
335浏览 • 1回复 待解决
这不是属于卡顿,这个是前后动画的间隔,这边在demo上进行了修改,实现了一直旋转的功能。