HarmonyOS animateTo使用SpringMotion实现渐隐和渐出时,看不到动效?

animateTo使用SpringMotion实现渐隐和渐出时,看不到动效,即使设置了delay,但是第二段动效使用interpolatingSpring就可以看到两段动效

下面是简单demo

import curves from '@ohos.curves';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State w: number = 100;
  @State h: number = 100;
  @State flag: boolean = false;

  private change() {
    if (this.flag) {
      animateTo({
        curve: curves.springMotion(0.55, 1)
      }, () => {
        this.w = 200;
        this.h = 200;
      })
    } else {
      animateTo({
        curve: curves.springMotion(0.55, 1)
      }, () => {
        this.w = 100;
        this.h = 100;
      })
    }
    this.flag = !this.flag;
  }

  private change2() {
    animateTo({
      curve: curves.springMotion(0.55, 1)
    }, () => {
      this.w = 200;
      this.h = 200;
    })
    animateTo({
      curve: curves.springMotion(0.55, 1),
      delay: 3000
    }, () => {
      this.w = 100;
      this.h = 100;
    })
  }

  private change3() {
    animateTo({
      curve: curves.springMotion(0.55, 1)
    }, () => {
      this.w = 200;
      this.h = 200;
    })
    animateTo({
      curve: curves.interpolatingSpring(0, 1, 200, 50),
      delay: 500
    }, () => {
      this.w = 100;
      this.h = 100;
    })
  }

  build() {
    Column() {
      Button(this.message, { type: ButtonType.Capsule })
        .align(Alignment.Center)
        .width(this.w)
        .height(this.h)

      Button("动画", { type: ButtonType.Capsule })
        .align(Alignment.Center)
        .onClick(() => this.change())

      Button("动画2", { type: ButtonType.Capsule })
        .align(Alignment.Center)
        .onClick(() => this.change2())

      Button("动画3", { type: ButtonType.Capsule })
        .align(Alignment.Center)
        .onClick(() => this.change3())
    }
  }
}
阅读 410
1 个回答

springMotion是新的动画会取代并继承上一个springMotion的动画,同一节点的同

一属性同时只会有一个springMotion的动画存在,所以不能用方式二,即带delay的

方式去让两个springMotion都存在。

其他的动画是叠加的,可以允许有多个动画存在,所以没这个现象