显式动画(事件童话)

显示动画由全局方法 animateTo 实现，它主要是解决由于闭包代码导致的状态变化而插入的动画效果

效果

使用注意

• 必须加上? 因为可能不存在这个元素.自己调用自己.

this.getUIContext()?.animateTo({}, () => {});

显示动画定义介绍

declare function animateTo(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

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

代码

• onAppear 组件一加载就运行

@Entry
@Component
struct Index3 {

    @State message: string = 'Hello World';
    @State widthSize:number = 250;
    @State heightSize:number = 100;
    @State widthSize2:number = 250;
    @State heightSize2:number = 100;
    @State rotateAngle:number = 0;
    private flag:boolean = true;

    build() {
        Column({space:50}) {
            Row() {
            }
            .width(this.widthSize)
            .height(this.heightSize)
            .backgroundColor(Color.Red)
            .onClick(()=>{
                 if(this.flag){
                     this.getUIContext()?.animateTo({
                         // 动画属性
                         tempo:1, // 播放速度 数值越大越慢,默认1,要是 0 直接停止
                         duration:1000,
                         curve:Curve.EaseOut,
                         iterations:1,
                         playMode:PlayMode.Normal,
                         onFinish:()=>{
                             console.info("play end")
                         }
                     },()=>{
                         // 动画执行的结果
                         this.widthSize = 150;
                         this.heightSize = 60;
                     })
                 }else{
                     this.getUIContext().animateTo({},()=>{
                         this.widthSize = 250;
                         this.heightSize = 100;
                     })
                 }
                 this.flag = !this.flag
            })

            /* 第二个 */
            Row(){}
            .width(this.widthSize2)
            .height(this.heightSize2)
            .backgroundColor(Color.Blue)
            .rotate({angle:this.rotateAngle})
            .onAppear(()=>{
                console.info("一上来就运行")
                this.getUIContext()?.animateTo({
                    duration:1500,
                    delay: 500,
                    playMode: PlayMode.Alternate,
                },()=>{
                    console.info("旋转了啊")
                    this.rotateAngle = 60
                })
            })
            .onClick(()=>{
                this.getUIContext()?.animateTo({duration:0},()=>{
                    // this.rotateAngle之前为90，在duration为0的动画中修改属性，可以停止该属性之前的动画，按新设置的属性显示
                    this.rotateAngle = 0;
                })
            })

        }
    }
}