HarmonyOS-ArkUI 一镜到底之页面间共享元素转场 sharedTransition

我们上一篇学习了组件内隐式共享元素转场，文章链接：HarmonyOS-ArkUI 一镜到底之组件内隐式共享元素转场 geometryTransition-CSDN博客

文章中了解了什么是一镜到底，以及在一个大组件内，子组件与子组件进行一镜到底的转场的代码实现。

但是截止到目前，我们讲的仍是一个页面内的一镜到底。

事实上页面之间也可以进行一镜到底的实现，但是采用的是另外一个api： sharedTransition。具体能实现的效果，我找了个能激发大家学习兴趣的例子: 华为音乐App的界面。看看这种炫酷的效果：

反正好好写是可以用本文中学习的内容做到的。这个界面太复杂，代码案例中肯定不会实现这个。好，接下来我们学习相关API吧。

页面间共享元素转场(一镜到底)

注意一下，页面间一镜到底，肯定是发生在页面之间的。所以离了界面转场是不行滴。它只能在页面路由跳转时进行。无论您是采用导航组件进行页面跳转，还是其他的方式比如Router。总之一定要先触发跳转再说。

sharedTransition API

sharedTransition 也是CommonMethod类中声明的一个方法。CommonMethod作为ArkUI中顶级位置的类，可以简介的理解为UI组件的”父类”。所以，所有的UI组件都具备这种页面间一镜到底转场的能力。但是重述一遍，发生的契机是，页面跳转！

API及属性详解在图中有展示。看明白基本就知道代码怎么写了。

代码

下方代码复用了上一篇文章HarmonyOS-ArkUI 一镜到底之组件内隐式共享元素转场 geometryTransition-CSDN博客部分逻辑。所以有一部分是组件内一镜到底转场特效。

import { router } from '@kit.ArkUI'

@Entry
@Component
struct GeometryTransitionTest1 {
  @State show:boolean = false
  @State geometryTransitionId: string = 'picture'
  build() {
    Column(){
      if(this.show) {
        Image($r('app.media.11073300')) //在下的摄影作品哈哈哈
          .autoResize(false)
          .clip(true)
          .width(300)
          .height(400)
          .offset({y:100})
          .geometryTransition(this.geometryTransitionId)
            //我们也可以自己加一些转场动画,以在过渡过程中也执行转场,更漂亮
            // 不加也行
          .transition(TransitionEffect.OPACITY.combine(TransitionEffect.scale({x: 0, y:0})))
          .sharedTransition('img_11073300') // 重点代码,页面间共享组件转场

        Button("点击跳转界面")
          .margin({top: 200})
          .onClick(()=>{
            // 触发页面间跳转操作
            router.pushUrl({
              url: 'pages/SharedTransitionTest1'
            })
          })
      } else {
        Column(){
          Column(){
            Image($r('app.media.startIcon')) //工程内置的应用图标
              .width('100%')
              .height('100%')
          }
          .width('100%')
          .height('100%')
          .alignSelf(ItemAlign.Start)
        }
        .width(80)
        .height(80)
        .borderRadius(20)
        .clip(true)
        .geometryTransition(this.geometryTransitionId)
        //我们也可以自己加一些转场动画,以在过渡过程中也执行转场,更漂亮
        //不加也行
        .transition(TransitionEffect.OPACITY.combine(TransitionEffect.scale({x: 0, y:0})))
      }
    }
    .height('100%')
    .width('100%')
    .onClick(()=>{
      this.getUIContext().animateTo({duration: 600, curve: Curve.FastOutSlowIn}, ()=>{
        this.show = !this.show
      })
    })
  }
}

@Entry
@Component
struct SharedTransitionTest1 {
  build() {
    Column(){
      Image($r('app.media.11073300')) //在下的摄影作品哈哈哈
        .autoResize(false)
        .clip(true)
        .width('100%')
        .offset({y:100})
          //我们也可以自己加一些转场动画,以在过渡过程中也执行转场,更漂亮
          // 不加也行
        .sharedTransition('img_11073300', {
          duration: 300,
          curve: Curve.EaseIn
        })
    }
  }
}

运行效果：