华为仓颉鸿蒙HarmonyOS NEXT原生UI之属性动画

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画，内容都是直接到终点状态，例如文字、Canvas的内容、linearGradient等，如果要内容跟随宽高变化，可以使用renderFit属性配置。

函数

animationStart(AnimateParam)

public func animationStart(animation: AnimateParam): This

设置动画效果。

参数名	参数类型	必填	默认值	描述
animation	AnimateParam	是	-	动画效果相关参数。

animationEnd()

public func animationEnd(): This

设置动画结束。

说明

animationStart 需要和 animationEnd 配合使用。animationStart作为组件的第一个属性被调用，animationEnd作为最后一个属性被调用。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    let animateOpt1 = AnimateParam(
        duration: 1200,
        curve: Curve.EaseOut,
        delay: 500,
        iterations: 3,
        playMode: PlayMode.Normal,
        onFinish: {
            => AppLog.info("onfinish")
        },
        expectedFrameRateRange: ExpectedFrameRateRange(
            min: 20,
            max: 120,
            expected: 90
        )
    )
    
    let animateOpt2 = AnimateParam(
        duration: 1200,
        curve: Curve.Friction,
        delay: 500,
        iterations: -1, // 设置-1表示动画无限循环
        playMode: PlayMode.Alternate,
        onFinish: {
            => AppLog.info("onfinish")
        },
        expectedFrameRateRange: ExpectedFrameRateRange(
            min: 20,
            max: 120,
            expected: 90
        )
    )
    
    @Entry
    @Component
    class MyView {
        @State var widthSize: Length = 250.vp
        @State var heightSize: Length = 100.vp
        @State var rotateAngle: Float32 = 0.0
        @State var flag: Bool = true
        func build() {
            Column() {
                Button("change size").animationStart(animateOpt1).
                onClick{ =>
                    if (this.flag) {
                        this.widthSize = 150.vp
                        this.heightSize = 60.vp
                    } else {
                        this.widthSize = 250.vp
                        this.heightSize = 100.vp
                    }
                    this.flag = !this.flag
                }.margin(30)
                .animationEnd()
                .width(this.widthSize)
                .height(this.heightSize)
    
                Button('change rotate angle').animationStart(animateOpt2)
                .onClick { =>
                    this.rotateAngle = 90.0
                }.margin(50)
                .rotate(this.rotateAngle)
                .animationEnd()
                }.width(100.percent).
                margin(top: 20)
        }
    }

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie