HarmonyOS鸿蒙Next中如何动态修改动画时间duration？

HarmonyOS鸿蒙Next中如何动态修改动画时间duration？

.animation({ duration: this.duration, // 动画持续时间（毫秒） iterations: -1, curve: Curve.Linear, })

动态修改duration不生效

5 回复 
@Entry
@Component
struct Page17 {
  @State myScale: number = 1
  @State duration: number = 300

  stopAnim() {
    animateTo({
      duration: 0, // 动画持续时间（毫秒）
      iterations: 0,
      curve: Curve.Linear,
      onFinish: () => {
      }
    }, () => {
      this.myScale = 1
    })
  }

  startAnim() {
    this.myScale = 1
    animateTo({
      duration: this.duration, // 动画持续时间（毫秒）
      iterations: -1,
      curve: Curve.Linear,
    }, () => {
      this.myScale = 0.5
    })
  }

  build() {
    Column({ space: 20 }) {
      Text('测试')
        .width('300lpx')
        .height('300lpx')
        .backgroundColor(Color.Orange)
        .borderRadius(10)
        .scale({ x: this.myScale, y: this.myScale })
      Button('停止动画').onClick(() => {
        this.duration = 0
        this.stopAnim()
      })
      Button('300毫秒').onClick(() => {
        this.duration = 300
        this.stopAnim()
        this.startAnim()
      })
      Button('1000毫秒').onClick(() => {
        this.duration = 1000
        this.stopAnim()
        this.startAnim()
      })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中如何动态修改动画时间duration？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


代码没毛病，

居然这么繁琐，

在HarmonyOS鸿蒙Next中，动态修改动画时间（duration）可以通过AnimatorProperty类来实现。首先，创建一个AnimatorProperty对象，并设置初始的动画时间。然后，使用setDuration方法在运行时动态修改动画的持续时间。

例如：

import animator from '@ohos.animator';

let animatorProperty = new animator.AnimatorProperty();
animatorProperty.duration(1000); // 初始动画时间为1000毫秒

// 动态修改动画时间
animatorProperty.setDuration(2000); // 将动画时间修改为2000毫秒

通过这种方式，你可以在应用运行过程中根据需要调整动画的持续时间。

在HarmonyOS鸿蒙Next中，可以通过Animator类的setDuration()方法动态修改动画的持续时间。首先，创建一个Animator对象（如ObjectAnimator），然后调用setDuration()方法，传入新的时间值（以毫秒为单位）。最后，启动动画即可。示例代码如下：

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
animator.setDuration(1000); // 设置动画时间为1000毫秒
animator.start(); // 启动动画

通过这种方式，可以灵活调整动画的持续时间。

回到顶部