HarmonyOS 鸿蒙Next中共享元素

【背景知识】

• 共享元素转场geometryTransition用于组件内的切换，在视图切换过程中提供丝滑的上下文传承过渡。通过绑定组件的进出状态（in指新视图、out指旧视图）来实现转场动画。它通过安排绑定的in/out组件的frame、position使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。这种方式区别于传统的opacity和scale转场效果，提供了更高的灵活性和创意空间。适用于一镜到底场景。必须配合animateTo使用才有动画效果。不支持animation隐式动画。

• 共享元素转场 (sharedTransition)是一种在页面路由跳转时使用的过渡动画，其中特定的UI组件被标识为共享元素，并在页面跳转时展示转场动效。在相关的组件上设置sharedTransition属性，并指定相应的参数，确保在不同页面中使用的共享元素具有相同的ID值，来识别共享元素。特别适用于需要强调元素连续性的场景，如图库浏览，商品详情页等。仅发生在页面路由跳转时使用。

【问题定位】

通过上面的代码片段暂时没有复现该问题，但是通过代码分析geometryTransition共享元素用在了页面间的跳转，而geometryTransition用于的是组件间切换，可能引起显示问题。

【分析结论】

组件间切换使用geometryTransition，页面间切换使用共享元素转场 (sharedTransition)

【修改建议】

//Index.ets
@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageInfos)
    {
      Search({ placeholder: '搜索' })
        .id("searchCaseTitle")
        .focusOnTouch(false)
        .focusable(false)
        .enableKeyboardOnFocus(false)
        .backgroundColor('#E7E9E8')
        .width('90%')
        .height(43)
        .onClick(() => {
          animateTo({ duration: 800 }, () => {
            this.pageInfos.pushPathByName('PageB', null, false)
          });
        })
        .sharedTransition('SEARCH_ONE_SHOT_DEMO_TRANSITION_ID', { duration: 800, curve: Curve.Linear, delay: 100 })
        .backgroundColor('#E7E9E8')
        .borderRadius(10)
    }
  }
}

//PageB.ets
import { curves } from "@kit.ArkUI";

@Builder
export function pageBBuilder() {
  pageBExample()
}

@Entry
@Component
struct pageBExample {
  @Consume('pageInfos') pageInfos: NavPathStack;
  @State searchInput: string = '';
  build() {
    NavDestination()
    {
      Row({ space: 8 }) {
        Image($r('sys.media.ohos_ic_public_arrow_left'))
          .width(36)
          .height(36)
          .transition(TransitionEffect.asymmetric(
            TransitionEffect.opacity(0)
              .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200, delay: 150 }),
            TransitionEffect.opacity(0)
              .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200 }),
          ))
        Search({ value: this.searchInput, placeholder: '搜索' })
          .id("searchCaseTitleContentCover")
          .searchButton('搜索', { fontSize: 16 })
          .sharedTransition('SEARCH_ONE_SHOT_DEMO_TRANSITION_ID', { duration: 800, curve: Curve.Linear, delay: 100 })
          .defaultFocus(true)
          .enableKeyboardOnFocus(false)
          .backgroundColor('#E7E9E8')
          .onChange((value) => {
            this.searchInput = value;
          })
          .margin({ left: 10, right: 10 })
          .layoutWeight(1)
          .height(43)
      }
    }
    .hideTitleBar(true)
  }
}

【总结】

组件间切换使用geometryTransition，且必须要必须配合animateTo使用才有动画效果，页面间切换使用共享元素转场 (sharedTransition)。