华为仓颉鸿蒙HarmonyOS NEXT原生UI之显式动画 (animateTo)

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画，布局类改变宽高的动画，内容都是直接到终点状态。

函数

animateTo(AnimateParam,() -> Unit)

public func animateTo(animation: AnimateParam, callback: () -> Unit): Unit

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

参数名	参数类型	必填	默认值	描述
animation	AnimateParam	是	-	设置动画效果相关参数。
callback	() -> Unit	是	-	指定动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

示例

示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。

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

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

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