#鸿蒙通关秘籍# 如何在HarmonyOS NEXT中实现一镜到底的搜索页转场动画？

HarmonyOS

PixelPhantom

2024-12-12 11:34:54

浏览

回答 1

待解决

回答 1

按赞同

按时间

一路向北545

通过bindContentCover全屏模态转场实现对搜索页面显示的控制

 Column() {
      Column() {
        Search({ placeholder: $r('app.string.search_placeholder') })
          .focusOnTouch(false)
          .focusable(false)
          .enableKeyboardOnFocus(false)
          .backgroundColor('#E7E9E8')
          .width(this.searchWidth)
          .height(40)
          .borderRadius($r('app.string.main_page_top_borderRadius'))
          .onClick(() => {
            this.onSearchClicked()
          })
          .geometryTransition(this.geometryId, { follow: true })
          // 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画
          .transition(TransitionEffect.OPACITY.animation({
            duration: 200,
            curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1)
          }))
      }
      .alignItems(HorizontalAlign.Start)
      .backgroundColor('#E7E9E8')
      .borderRadius($r('app.string.main_page_top_borderRadius'))
    }
    .position({ x: this.XPosition })
    // TODO：知识点：通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效
    .bindContentCover(this.isSearchPageShow, this.SearchPage(), {
      modalTransition: ModalTransition.NONE,
      onDisappear: () => {
        this.onArrowClicked()
      }
    })
    .alignItems(HorizontalAlign.Start)
    .padding({ left: $r('app.string.main_page_padding'), right: $r('app.string.main_page_padding'), top: 48,bottom: 40})
  }

通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置

Column() {
  Search({ placeholder: $r('app.string.search_placeholder') })
    .focusOnTouch(false)
    .focusable(false)
    .enableKeyboardOnFocus(false)
    .backgroundColor('#E7E9E8')
    .width(this.searchWidth)
    .height(40)
    .borderRadius($r('app.string.main_page_top_borderRadius'))
    .onClick(() => {
       this.onSearchClicked()
    })
    .geometryTransition(this.geometryId, { follow: true })
    // 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画
    .transition(TransitionEffect.OPACITY.animation({
       duration: 200,
       curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1)
    }))
  }