属性动画

效果

属性动画介绍

注意

属性动画是针对组件的属性进行动画操作，例如改变组件的宽度、高度、颜色等属性。

特别注意 要改变的属性必须写在 animation 前面才生效

declare function animation(value: AnimateParam)

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：动画播放完成的回调。

示例

@Entry
@Component
struct Index5 {
    @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() {
            }
            /* 属性动画开始 */
            // 只有写在animation 前面才生效
            .width(this.widthSize)
            .height(this.heightSize)
            .backgroundColor(this.backgroundColorSize)
            .rotate({ angle: this.rotateAngle })
            .translate({x:this.translateX,y:this.translateY,z:this.translateZ})
            /* 属性动画结束 */
            .animation({
                // 持续时间
                duration: 1000,
                // 延迟
                delay: 500,
                // 缓动模式
                curve: Curve.EaseOut,
                // 重复次数
                iterations: 1,
                // 从正到反
                playMode: PlayMode.Normal
            })


            Row() {
                Button("点击").type(ButtonType.Normal).onClick(() => {
                    if (this.flag) {
                        this.widthSize = 250;
                        this.heightSize = 300;
                        this.backgroundColorSize = Color.Green
                        this.rotateAngle = 60
                        this.translateX = 30;
                        this.translateY = 300;
                        this.translateZ = 0;
                    } else {
                        this.widthSize = 150;
                        this.heightSize = 100;
                        this.backgroundColorSize = Color.Pink;
                        this.rotateAngle = 0;
                        this.translateX = 0;
                        this.translateY = 0;
                        this.translateZ = 0;
                    }
                    this.flag = !this.flag;
                })
            }
            .width('100%').height(50).justifyContent(FlexAlign.Center)
        }
    }
}