HarmonyOS鸿蒙Next中promptAction的animation自动播放问题

HarmonyOS鸿蒙Next中promptAction的animation自动播放问题 以下代码如何实现，打开弹窗后自动播放动画

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct Index {
  @State message: string = '弹框'
  @State animate: boolean = false;
  @State rotateAngle: number = 0

  @Builder
  customDialogBuilder() {
    Column() {
      Text('内容').fontSize(15).margin({ bottom: 50 })
      Row() {
        Text('点击旋转')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .width(100)
          .height(100)
          .borderStyle(BorderStyle.Solid)
          .borderWidth(5)
          .borderColor(0xAFEEEE)
          .onClick(() => {
            this.rotateAngle = 360
          })
          .rotate({ angle: this.rotateAngle })
          .animation({
            duration: 1200,
            curve: Curve.Linear,
            iterations: -1, // 设置-1表示动画无限循环 
          })
      }
    }.height(300).padding(5)
  }

  build() {
    Row() {
      Column() {
        Text('点击弹框').fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {
          promptAction.openCustomDialog({ builder: this.customDialogBuilder.bind(this) })
        })
      }.width('100%')
    }.height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中promptAction的animation自动播放问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

由于promptAction.openCustomDialog当前缺少关闭弹窗回调方法，该回调已在API12中补充，这里先使用CustomDialog来实现。注册监听Text组件绘制完成事件，完成后触发动画效果。

参考demo如下：

import { inspector } from '@kit.ArkUI';

@CustomDialog
struct dialogTest {
  controller: CustomDialogController
  @State rotateAngle: number = 0

  aboutToAppear(): void {
    let listener:inspector.ComponentObserver = inspector.createComponentObserver('text'); //监听id为COMPONENT_ID的组件回调事件
    listener.on("draw", () =>{
      this.rotateAngle = 360
    })
  }
  build() {
    Column() {
      Text('内容').fontSize(15).margin({ bottom: 50 })
      Row() {
        Text('点击旋转')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .width(100)
          .height(100)
          .borderStyle(BorderStyle.Solid)
          .borderWidth(5)
          .borderColor(0xAFEEEE)
          .rotate({ angle: this.rotateAngle })
          .animation({
            duration: 1200,
            curve: Curve.Linear,
            iterations: -1, // 设置-1表示动画无限循环
          }).id('text')
      }
    }.height(300).padding(5)
  }
}

@Entry
@Component
struct Index {
  @State message: string = '弹框'
  @State animate: boolean = false;
  @State rotateAngle: number = 0
  customDialogId: number = 0
  dialogController:CustomDialogController = new CustomDialogController ({
    builder:dialogTest(),
  })

  build() {
    Row() {
      Column() {
        Text('点击弹框')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.dialogController.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中promptAction的animation自动播放问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，promptAction组件的animation属性默认是自动播放的。promptAction用于显示提示信息，animation属性控制提示信息的动画效果。如果遇到animation自动播放的问题，可能是由于以下原因：

  1. 默认行为：promptAction的animation属性在没有明确设置的情况下，默认是开启的，因此动画会自动播放。
  2. 属性设置：如果手动设置了animation属性为true，动画也会自动播放。
  3. 代码逻辑：在某些情况下，代码逻辑可能触发了动画的自动播放，例如在组件初始化时或状态变化时。

要控制animation的自动播放，可以通过设置animation属性为false来禁用自动播放，或者在需要时手动触发动画。例如：

promptAction.animation = false; // 禁用自动播放

如果需要手动触发动画，可以在适当的时机调用动画播放的方法。确保代码逻辑中没有意外触发动画的代码。

如果问题仍然存在，建议检查代码中是否有其他逻辑影响了animation的行为。

在HarmonyOS鸿蒙Next中，promptAction的animation默认不会自动播放。如果需要实现自动播放，可以通过设置animation的autoplay属性为true来实现。此外，确保动画资源已正确加载，并且动画的duration和iterations等参数设置合理。如果仍然无法自动播放，建议检查相关事件触发机制，确保在合适的时机调用play()方法。

回到顶部