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())
}
}
}
springMotion是新的动画会取代并继承上一个springMotion的动画,同一节点的同
一属性同时只会有一个springMotion的动画存在,所以不能用方式二,即带delay的
方式去让两个springMotion都存在。
其他的动画是叠加的,可以允许有多个动画存在,所以没这个现象