geometry transition 英译为： 几何过渡。这个动画写法挺简单的，不妨碍人家的炫酷。这种效果其实就是传说中的一镜到底！从现在开始，本文geometry transition 与一镜到底具有同样的含义，指的是同样的概念。

共享元素转场(一镜到底)指的是什么效果(图文对比)

共享元素转场着重于展现组件与组件之间涉及到转场时的过渡效果。顾名思义，重点有两处需要我们注意：

• 发生节点为转场。凡是带转场二字的动效，您就死死的记住，转场时机就是，组件添加，组件删除，组件展示或消失！除非有特殊情况，暂时就这么认为即可。
• 动效的作用范围： 强调的是组件与组件之间的动效过渡。再简化一些， 就是着重过渡！为了展示它的特点，我画了一张比较图，贴在了下方。可观察一下，它究竟在过渡方面做了什么！这是我们之前各种动画里没有涉猎的部分。

我们之前学的动画呢，诸如 animateTo(显式动画), animation(属性动画),keyFrameAnimateTo(关键帧动画)，transition(组件内转场动画)，motionPath(路径动画) ，其代码展现的效果都是组件本身的变化，包括转场动画虽然涉及到了转场，但它本身也是指定了组件自己的入场动画，组件自己的离场动画，都是描述组件自己本身的动画行为的。

而geometryTransition--隐式共享元素转场，着重的功能在于组件与组件之间过渡的连接效果。如图所示：

下图为两个组件，此时以组件A，和组件B来代称。组件A出来的时候，B消失， 组件B出来的时候A消失。两者排布的位置不同。

• 左图为我们没有加共享元素转场能力的动效
• 右图为我们加了共享元素转场能力的动效。

上图中很明显的表现出来了，一镜到底效果中涉及到的组件与组件之间过渡的效果(丝滑过渡，很炫酷是不是)。而下图为实现代码，其实两个组件并没有写什么专门的动画。而右图中一镜到底的动画，是geometryTransition计算出来的几何过渡效果。

这两个在代码上的区别仅仅为，加了geometryTransition与不加geometryTransition的区别。如图所示

好，我们知道什么是一镜到底，和geometryTransition是作用在什么环节的之后，就开始学习一下API吧。

geometryTransition API 介绍

如图所示：

代码示例

@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})))

      } 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
      })
    })
  }
}

真机运行