HarmonyOS 鸿蒙Next animation动画停止位置不对

animation动画停止的位置，我想恢复初始位置，现在的实际效果是，哪里停止就在哪里，没办法恢复到初始位置。默认rotateAngle=0，开始时设置rotateAngle=360，请求完成数据后，再次设置rotateAngle=0，动画停止。但是停止的位置不是0的角度，选装中在哪里停止，就是那个角度了。

Image(r('app.media.icon_stock_refresh_blue'))
    .width(16)
    .height(16)
    .objectFit(ImageFit.Contain)
    .margin({ left: 12 })
    .rotate({ angle: this.data.rotateAngle })
    .animation({
        duration: 300,
        curve: Curve.Linear,
        delay: 0,
        iterations: -1, // 设置-1表示动画无限循环
        playMode: PlayMode.Normal
    })
    .onClick(() => {
        this.homepageModel.reloadEvalStocks(this.parentData, true);
    });

setAnimState(isStart: boolean) {
    if (isStart) {
        this.rotateAngle = 360;
    } else {
        this.rotateAngle = 0;
    }
}

更多关于HarmonyOS 鸿蒙Next animation动画停止位置不对的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼•4 天前

参考demo:

[@Entry](/user/Entry)
@Component
struct AnimateToExample {
  @State rotateAngle: number = 0
  @State animationRunning: boolean = false
  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 })
        .onClick(() => {
          if (!this.animationRunning) {
            this.animationRunning = true;
            this.startAnimation();
          }
        })
    }.width(‘100%’).margin({ top: 5 })
  }
  startAnimation() {
    animateTo({
      duration: 800,
      curve: Curve.Linear,
      iterations: -1, // 设置-1表示动画无限循环
    }, () => {
      this.rotateAngle = 360;
    });
    setTimeout(() => {
      this.stopAnimation();
    }, 2000);
  }
  stopAnimation() {
    animateTo({
      duration: 0,
      curve: Curve.Linear,
      iterations: 1,
    }, () => {
      this.rotateAngle = 0;
      this.animationRunning = false;
    });
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next animation动画停止位置不对的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•4 天前

在HarmonyOS鸿蒙系统中，Next animation动画停止位置不对的问题通常与动画属性设置不当或动画框架的调用顺序有关。

检查动画属性：首先确认动画的起始位置、结束位置以及持续时间等属性是否设置正确。在鸿蒙系统的动画框架中，这些属性通常通过XML或代码方式定义。确保这些值符合你的预期，特别是结束位置（end position）的坐标。
动画框架调用：检查动画框架的调用顺序和逻辑。确保在动画开始之前，所有相关的UI元素已经正确布局，并且动画的启动和停止逻辑没有错误。特别是要注意动画的启动时机和停止条件，确保它们与UI元素的状态同步。
动画监听器：如果动画是通过监听器控制的，检查监听器的实现是否正确。确保监听器在动画执行过程中能够正确响应，并且在需要停止动画时能够准确触发停止逻辑。
系统兼容性：考虑不同设备或不同版本的鸿蒙系统可能存在兼容性问题。确保你的动画代码在目标设备上进行了充分的测试。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。