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

85 阅读1分钟

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

函数

animateTo(AnimateParam,() -> Unit)

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

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

参数名参数类型必填默认值描述
animationAnimateParam-设置动画效果相关参数。
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)
-       }
-   }

截屏2024-10-28 10.02.34.png