Implicit Shared Element Transition Within Components (geometryTransition)

Note:

Currently in the beta phase.

Provides smooth contextual inheritance transitions during view switching. The general transition mechanism offers effects like opacity and scale. geometryTransition establishes spatial connections between originally independent transition animations by coordinating the frame and position of the bound in/out components (where "in" refers to the new view and "out" refers to the old view), guiding the visual focus from the old view's position to the new view's position.

Import Module

import kit.ArkUI.*

func geometryTransition(?String, ?Bool)

func geometryTransition(id: ?String, follow!: ?Bool): T

Function: Implicit shared element transition within components.

Note:

geometryTransition must be used with animateTo to achieve animation effects. The animation duration and curve follow the configuration in animateTo and do not support animation implicit animations.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Initial Version: 22

Parameters:

Parameter Name	Type	Required	Default Value	Description
id	?String	Yes	-	Used to establish binding relationships. Setting id to an empty string clears the binding to avoid participation in sharing behavior. The id can be changed to re-establish binding relationships. Only two components can be bound to the same id, and they must be of different in/out roles. Multiple components cannot share the same id. Initial value: "".
follow	?Bool	Yes	-	Named parameter. Used only in if paradigms to mark whether components always present in the component tree should follow the shared animation. Initial value: false.

Return Value:

Type	Description
T	Returns the component instance.

Example Code

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import ohos.resource.*

@Entry
@Component
class EntryView {
    @State var isShow: Bool = false
    func build() {
        Stack(alignContent:Alignment.Center) {
            if (this.isShow) {
                Image(@r(app.media.startIcon))
                    .autoResize(false)
                    .clip(true)
                    .width(350)
                    .height(500)
                    .offset(x: 20, y: 100)
                    .geometryTransition("picture")
                    .transition(TransitionEffect.OPACITY)
            } else {
                Column() {
                    Column() {
                        Image(@r(app.media.startIcon))
                            .width(100.percent)
                            .height(100.percent)
                    }
                        .width(100.percent)
                        .height(100.percent)
                }
                    .width(80)
                    .height(80)
                    .offset(x: 10, y: 10)
                    .borderRadius(20)
                    .clip(true)
                    .geometryTransition("picture")
                    .transition(TransitionEffect.OPACITY)
            }
        }.onClick({
            event => getUIContext().animateTo(AnimateParam(duration: 1000), ({=> this.isShow = !this.isShow}))
        })
    }
}