实现一个自定义动画，出现丢帧问题

@Entry
@Component
struct AnimationDemo2 {
@State widthSize: number = 200;
@State heightSize: number = 100;
@State flag: boolean = true;

build() {
Column() {
Button('click me')
.onClick(() => {
if (this.flag) {
this.widthSize = 100;
this.heightSize = 50;
} else {
this.widthSize = 200;
this.heightSize = 100;
}
this.flag = !this.flag;
})
.width(this.widthSize)
.height(this.heightSize)
.backgroundColor(0x317aff)
.animation({
duration: 2000, // 动画时长
curve: Curve.Linear, // 动画曲线
delay: 500, // 动画延迟
iterations: 1, // 播放次数
playMode: PlayMode.Normal // 动画模式
}) // 对Button组件的宽高属性进行动画配置
}
.width('100%')
.margin({ top: 5 })
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.