HarmonyOS 鸿蒙Next 无限循环动画

HarmonyOS 鸿蒙Next 无限循环动画

问题1: 如下代码，设置的动画无限循环，但是循环的时候，会先停止再开始；想要的效果是循环的过程中，不停止。

问题2: 只有点击 ‘开始动画’的时候才能有无限循环的效果，如何做到渲染的时候默认就是无限循环动画。

Button('开始动画')
    .onClick(() => {
      this.rotateAngle = 360
    })

    Row(){
      Image($r('app.media.article_publish_progress'))
        .width(20)
        .height(20)
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: this.rotateAngle,
        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .animation({
          iterations: -1, // 设置-1表示动画无限循环
        })
    }
    .backgroundColor('#ff0099')
    .width(25)
    .height(25)
    .justifyContent(FlexAlign.Center)

更多关于HarmonyOS 鸿蒙Next 无限循环动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复 
.animation({
duration: 2000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 500, // 动画延迟
iterations: -1, // 播放次数
playMode: PlayMode.Normal // 动画模式
})

更多关于HarmonyOS 鸿蒙Next 无限循环动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


struct Index {
  @State rotateAngle: number = 0

  startAnim() {
    this.rotateAngle = 0
    animateTo({
      iterations: -1, // 设置-1表示动画无限循环
      curve: Curve.Linear,
    }, () => {
      this.rotateAngle = 360
    })
  }

  stopAnim() {
    animateTo({
      delay: 0,
      duration: 0,
      iterations: 0,
      curve: Curve.Linear,
    }, () => {
      this.rotateAngle = 0
    })
  }

  build() {
    Column({ space: 20 }) {
      Button('开始动画')
        .onClick(() => {
          this.stopAnim()
          this.startAnim()
        })
      Button('停止动画')
        .onClick(() => {
          this.stopAnim()
        })
      Row() {
        Image($r('app.media.background'))
          .width(50)
          .height(50)
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            centerX: '50%',
            centerY: '50%',
            angle: this.rotateAngle,
          }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
          .onAreaChange((oleValue:Area,newValue:Area)=>{
            if(newValue.height>0){
              this.stopAnim()
              this.startAnim()
            }
          })
      }
      .backgroundColor('#ff0099')
      .width(25)
      .height(25)
      .justifyContent(FlexAlign.Center)

    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2
export default struct Demo {
  @Local rotateAngle: number = 0;
  private animate: AnimatorResult | null = null;

  aboutToAppear(): void {
    this.animate = Animator.create({
      iterations: -1,
      begin: 0,
      end: 360,
      duration: 2000,
      easing: "linear",
      delay: 0,
      direction: "normal",
      fill: 'forwards'
    })
    this.animate.onFrame = (angle) => this.rotateAngle = angle;
  }

  build() {
    Column() {
      Button('开始动画')
        .onClick(() => {
          this.rotateAngle = 360
        })

      Row() {
        Image($r('app.media.startIcon'))
          .width(20)
          .height(20)
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            centerX: '50%',
            centerY: '50%',
            angle: this.rotateAngle,
          }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
      }
      .backgroundColor('#ff0099')
      .width(25)
      .height(25)
      .justifyContent(FlexAlign.Center)
      .onAppear(() => {
        this.animate?.play();
      })

    }
  }

针对帖子标题“HarmonyOS 鸿蒙Next 无限循环动画”的问题，以下是专业且简洁的回答：

在HarmonyOS鸿蒙Next系统中实现无限循环动画，可以通过动画框架和定时器机制来完成。具体步骤如下：

  1. 定义动画资源：首先，在资源文件中定义动画资源，包括动画的类型（如平移、旋转、缩放等）、持续时间、重复次数等。对于无限循环动画，可以将重复次数设置为无限大（某些系统中可能用特定值表示，如-1）。

  2. 加载动画资源：在代码中加载定义的动画资源，并将其应用到目标视图或组件上。

  3. 启动动画：通过动画控制器启动动画，此时动画将按照定义的参数进行播放，直至达到指定的重复次数（对于无限循环动画，即持续播放）。

  4. 管理动画状态：如果需要，可以在代码中管理动画的暂停、恢复和停止等操作，以满足应用需求。

请注意，HarmonyOS的动画实现可能因版本和具体API而有所不同，建议参考最新的官方文档和示例代码进行开发。

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

回到顶部