HarmonyOS 鸿蒙Next @Watch 事件中动画无法启动

HarmonyOS 鸿蒙Next @Watch 事件中动画无法启动 发现@Watch 事件中ImageAnimator动画生命周期都执行了，但是动画不动（手动点击可以动），是否有什么底层控制逻辑？

代码片段如下：

@Prop [@Watch](/user/Watch)('externalAutoPlayChannel')
autoPlayChannel: boolean = false;

externalAutoPlayChannel() {
this.playSound();
}

ImageAnimator()
.images(this.getImageFrames())
.duration(800)
.state(this.animationStatus)
.fillMode(FillMode.Backwards)
.reverse(false)
.fixedSize(true)
.iterations(-1)
.width(this.componentSize)
.height(this.componentSize)
.onStart(() => {
AppLogApi.debug(this.tag, `ImageAnimator onStart()`);
})
.onPause(() => {
AppLogApi.debug(this.tag, `ImageAnimator onPause()`);
})
.onRepeat(() => {
AppLogApi.debug(this.tag, `ImageAnimator onRepeat()`);
})
.onCancel(() => {
AppLogApi.debug(this.tag, `ImageAnimator onCancel()`);
this.animationStatus = AnimationStatus.Stopped
})
.onFinish(() => {
AppLogApi.debug(this.tag, `ImageAnimator onFinish()`);
this.animationStatus = AnimationStatus.Stopped
})
.onClick((_event) => {
this.playSound();
})

更多关于HarmonyOS 鸿蒙Next @Watch 事件中动画无法启动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

根据楼主提供代码片段，我这边试了一下是watch是正常生效的，你看看demo

@Component
struct ImageAnimatorComponent {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1
  @State @Watch('externalAutoPlayChannel') autoPlayChannel: boolean = false;

  externalAutoPlayChannel() {
    if(this.autoPlayChannel === true){
      this.state = AnimationStatus.Running
    }
  }
  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .images([
          {
            src: $r('app.media.video_create_gif_preview1')
          },
          {
            src: $r('app.media.video_create_gif_preview2')
          },
          {
            src: $r('app.media.video_create_gif_preview3')
          },
          {
            src: $r('app.media.video_create_gif_preview4')
          }
        ])
        .duration(2000)
        .state(this.state).reverse(this.reverse)
        .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
        .margin({ top: 100 })
        .onStart(() => {
          console.info('Start')
        })
        .onPause(() => {
          console.info('Pause')
        })
        .onRepeat(() => {
          console.info('Repeat')
        })
        .onCancel(() => {
          console.info('Cancel')
        })
        .onFinish(() => {
          console.info('Finish')
          this.state = AnimationStatus.Stopped
        })
      Button('change autoPlayChannel').width(100).padding(5).onClick(() => {
       this.autoPlayChannel = !this.autoPlayChannel
      }).margin(5)
      Row() {
        Button('start').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Running
        }).margin(5)
        Button('pause').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Paused // 显示当前帧图片
        }).margin(5)
        Button('stop').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Stopped // 显示动画的起始帧图片
        }).margin(5)
      }

      Row() {
        Button('reverse').width(100).padding(5).onClick(() => {
          this.reverse = !this.reverse
        }).margin(5)
        Button('once').width(100).padding(5).onClick(() => {
          this.iterations = 1
        }).margin(5)
        Button('infinite').width(100).padding(5).onClick(() => {
          this.iterations = -1 // 无限循环播放
        }).margin(5)
      }
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next @Watch 事件中动画无法启动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next @Watch 事件中动画无法启动”的问题，可能的原因及解决方法如下：

  1. 动画资源未正确加载：

    • 确保动画资源文件（如JSON或GIF）已正确放置在项目的资源目录中，并且路径在代码中引用正确。

  2. 事件触发逻辑问题：

    • 检查触发动画的事件逻辑是否正确编写，确保事件能够正确触发到动画启动的代码段。

  3. 动画管理器状态：

    • 确认动画管理器（如Animator或AnimationController）在启动动画前处于可用状态，未被其他逻辑占用或禁用。

  4. 系统权限或限制：

    • 检查是否由于系统权限设置或资源限制导致动画无法启动，特别是在智能手表这类资源受限的设备上。

  5. 代码错误或兼容性问题：

    • 仔细检查代码，特别是与动画启动相关的部分，看是否有语法错误或逻辑错误。同时，确认使用的鸿蒙API版本与设备支持的版本兼容。

如果以上方法均未能解决问题，可能是更深层次的系统或框架问题。此时，建议直接联系鸿蒙系统的官方技术支持。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部