HarmonyOS鸿蒙Next中图片旋转360°控制旋转和暂停（音乐唱片旋转效果）

HarmonyOS鸿蒙Next中图片旋转360°控制旋转和暂停（音乐唱片旋转效果）

Text(‘测试图片’) .textAlign(TextAlign.Center) .width(150) .height(150) .borderRadius(75) .backgroundColor(Color.Gray) .margin({top: 200}) .rotate({ angle: this.rotateAngle }) .animation({ duration:10000, iterations:-1, playMode:PlayMode.Normal, curve:Curve.Linear, expectedFrameRateRange:{min:60,expected:90,max:120}//帧率 })

Button(‘旋转’) .onClick(() => { this.rotateAngle = 360 })

Button(‘停止’) .onClick(() => { this.rotateAngle = 0 })

API参考： 显式动画 (animateTo)-动画-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

图形变换-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

欢迎各位开发者参与讨论和指正


更多关于HarmonyOS鸿蒙Next中图片旋转360°控制旋转和暂停（音乐唱片旋转效果）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现图片360°旋转并控制旋转和暂停，可以通过使用Animator和AnimatorController来实现。首先，创建一个Animator对象，设置旋转动画的起始和结束角度，并指定动画的持续时间。然后，使用AnimatorController来控制动画的播放、暂停和恢复。

代码示例：

import animator from '@ohos.animator';

// 创建Animator对象
let rotateAnimator = animator.createAnimator({
    duration: 3000, // 动画持续时间
    iterations: Infinity, // 无限循环
    from: { rotate: 0 }, // 起始角度
    to: { rotate: 360 } // 结束角度
});

// 获取要旋转的图片组件
let image = this.$element('image');

// 将动画应用到图片组件
rotateAnimator.applyTo(image);

// 控制动画的播放、暂停和恢复
rotateAnimator.play(); // 播放动画
rotateAnimator.pause(); // 暂停动画
rotateAnimator.resume(); // 恢复动画

更多关于HarmonyOS鸿蒙Next中图片旋转360°控制旋转和暂停（音乐唱片旋转效果）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现图片360°旋转以模拟音乐唱片效果，可以通过AnimatorProperty和Rotate动画结合实现。以下是一个简单的代码示例：

import animator from '@ohos.animator';

// 创建旋转动画
const rotateAnimator = animator.createAnimator({
    duration: 3000, // 动画时长
    iterations: Infinity, // 无限循环
    curve: 'linear', // 线性动画
    rotate: { from: 0, to: 360 } // 从0°旋转到360°
});

// 绑定动画到图片组件
rotateAnimator.bind(this.$element('image'));

// 开始旋转
rotateAnimator.start();

// 暂停旋转
rotateAnimator.pause();

// 恢复旋转
rotateAnimator.resume();

通过start()、pause()和resume()方法，可以控制旋转的开始、暂停和恢复。

回到顶部