组件内隐式共享元素转场 geometryTransition

组件内隐式共享元素转场 geometryTransition

• geometryTransition通过安排绑定的in/out组件（in指新视图、out指旧视图）的frame、position使得原本独立的transition动画在空间位置上发生联系

  in/out两个组件各自有自己的转场动画，这两个动画原本是独立的，但开启隐式共享后两个动画空间位置上发生联系

• geometryTransition必须配合animateTo使用才有动画效果，动效时长、曲线跟随animateTo中的配置

// 隐式共享涉及到两个元素，一个显示，一个隐藏
if (this.isVisible) {
    Image($r('app.media.shot1'))
        .width(300)
        .height(400)
        .geometryTransition("picture") // 用于设置绑定关系 同一个id只能有两个组件绑定且是in/out不同类型角色
        .transition(TransitionEffect.OPACITY) // 组件A动画
} else {
    Image($r('app.media.app_icon'))
        .width(80)
        .height(80)
        .geometryTransition("picture") // 用于设置绑定关系 同一个id只能有两个组件绑定且是in/out不同类型角色
        .transition(TransitionEffect.OPACITY) // 组件B动画
}

onClick(() => {
    // 必须配合`animateTo`使用才有动画效果
    animateTo({
        duration: 1000
    }, () => {
        this.isVisible = !this.isVisible
    })
})