帧动画(链式动画) - 单步动画(关键帧)

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

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

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

效果

显示动画定义介绍

declare function animateToImmediately(value: KeyframeAnimateParam, keyframes: Array<KeyframeState>): void;

value

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

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

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

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

keyframes

数组类型 数组里面是KeyframeState类型

1. duration: 该段关键帧动画的持续时间，单位为毫秒。

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

注意

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

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

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

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

3. event: ()=>void 动画执行到该关键帧时的回调函数。

代码

@Entry
@Component
struct Index7 {
    @State widthSize: number = 150;
    @State heightSize: number = 100;
    @State rotateAngle: number = 0;
    @State flag: boolean = true;
    @State space: number = 10;
    @State backgroundColorSize: Color = Color.Pink
    @State translateX:number = 0 ;
    @State translateY:number = 0 ;
    @State translateZ:number = 0 ;
    build() {
        Column({ space: 30 }) {
            Column() {
            }
            .width(this.widthSize)
            .height(this.heightSize)
            .backgroundColor(this.backgroundColorSize)
            .rotate({ angle: this.rotateAngle })
            .translate({x:this.translateX,y:this.translateY,z:this.translateZ})
            .onClick(()=>{
                // 设置关键帧动画整体播放3次
                this.getUIContext()?.keyframeAnimateTo({
                    iterations: 1,
                    onFinish:()=>{
                        console.log("动画结束了")
                    }
                }, [
                    {
                        // 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
                        duration: 800,
                        event: () => {
                            this.widthSize = 250;
                            // this.heightSize = 200;
                            // this.backgroundColorSize = Color.Red
                        }
                    },
                    {
                        // 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
                        duration: 500,
                        event: () => {
                            // this.widthSize = 250;
                            this.heightSize = 200;
                            // this.backgroundColorSize = Color.Red
                        }
                    }
                ]);
            })

        }
    }
}