提供全局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)
- }
- }