没有延迟的显式动画

显式动画只能同步进行.但是有的时候我们就需要 一个个按照顺序来.

否则的话 只有在onFinish里面一个一个写回调函数了

所以就需要用到animateToImmediately 要注意他从版本 12 开始支持

效果

显示动画定义介绍

declare function animateToImmediately(value: AnimateParam, event: () => void): void;

value

设置动画的具体配置参数，AnimateParam 说明如下：

• duration: 设置动画的执行时长，单位为毫秒，默认为 1000 毫秒。

• tempo：设置动画的播放速度，值越大动画播放越快，值越小播放越慢，默认值为 1 ，为 0 时无动画效果。(一般不用管)

• curve: 设置动画曲线.默认值Linear

注意

1. curve:Curve.EaseOut, 动画开始时慢，结束时快

2. curve:Curve.EaseIn, 动画开始时快，结束时慢

3. curve:Curve.Linear, 动画线性一直匀速

剩下的自己参阅文档 等等吧.

• delay: 设置动画延迟执行的时间，单位为毫秒，默认值为 0，即无延迟。

• iterations：设置动画的执行次数，默认值为 1 次，设置为 -1 时无限循环。

• playMode：设置动画播放模式，默认播放完成后重头开始播放。

注意

1. Normal 动画正常播放

2. Reverse 动画反向播放

3. Alternate 动画正向反向交替播放(1,3,5...)正向播放(2,4,6,...)反向播放

4. AlternateReverse 动画反向正向交替播放(1,3,5...)反向播放(2,4,6,...)正向播放

• onFinish：动画播放完成的回调。

event

指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

代码

• 注意这里面的 delay 是毫秒 写好延迟

@Entry
@Component
struct Index4 {
    @State widthSize: number = 150;
    @State heightSize: number = 100;
    private flag: boolean = true;

    build() {
        Column() {
            Column()
                .width(this.widthSize)
                .height(this.heightSize)
                .backgroundColor(Color.Green)


            Button("change size")
                .margin(30)
                .onClick(() => {
                    if (this.flag) {

                        // 第一步
                        animateToImmediately({
                            delay: 0,
                            duration: 1000
                        }, () => {
                            this.widthSize = 300;
                        })
                        // 第二步
                        animateToImmediately({
                            delay: 1000,
                            duration: 1000
                        }, () => {
                            this.heightSize = 300;
                        })

                    } else {
                        // 反转 第一步
                        animateToImmediately({
                            delay: 0,
                            duration: 1000
                        }, () => {
                            this.heightSize = 100;
                        })
                        // 第二步骤
                        animateToImmediately({
                            delay: 1000,
                            duration: 1000
                        }, () => {
                            this.widthSize = 150;
                        })
                    }
                    this.flag = !this.flag;
                })
        }
        .width('100%')
        .margin({ top: 5 })
    }
}