組件的某些通用屬性變化時，可以通過屬性動畫實現(xiàn)漸變過渡效果，提升用戶體驗。支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局類改變寬高的動畫，內(nèi)容都是直接到終點狀態(tài)，例如文字、Canvas的內(nèi)容、linearGradient等，如果要內(nèi)容跟隨寬高變化，可以使用renderFit屬性配置。

函數(shù)

animationStart(AnimateParam)

public func animationStart(animation: AnimateParam): This

設(shè)置動畫效果。

animationEnd()

public func animationEnd(): This

設(shè)置動畫結(jié)束。

說明

animationStart 需要和 animationEnd 配合使用。animationStart作為組件的第一個屬性被調(diào)用，animationEnd作為最后一個屬性被調(diào)用。

示例代碼

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, // 設(shè)置-1表示動畫無限循環(huán)
        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)
        }
    }

[圖片上傳失敗...(image-2800a8-1735046459874)]

如對您有幫助，幫忙點個“在看 、關(guān)注” 讓更多的人受益~！

技術(shù)交流群可加wx“LB-9191” 備注cangjie