纯血鸿蒙APP实战开发——搜索页一镜到底案例-CSDN博客

本文链接：https://blog.csdn.net/MNXN666/article/details/140802187

介绍

本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。

效果图预览

使用说明

点击首页搜索框跳转到搜索页面显式一镜到底转场动画

实现思路

通过点击首页搜索框改变bindContentCover全屏模态转场中的isSearchPageShow参数控制页面是否显示，同时将modalTransition设置为NONE关闭全屏模态转场的动画，使用transition和animateTo实现首页到搜索页面的转场动画通过bindContentCover全屏模态转场衔接动画。
通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，达到一镜到底的效果。

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

2.通过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)
    }))
  }

3.通过transition组件内转场实现搜索页面消失显示过程中的过渡效果。

    Image($r('app.media.ic_public_back'))
      .width(20)
      .onClick(() => {
         this.onArrowClicked()
      })
      // TODO：知识点：通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。非对称对称转场，第一个为出现动效有150的延迟，第二个为消失动效
      .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 }),
      ))

4.在切换过程中使用animateTo显式动画配合改变搜索框大小实现转换过程中的动画和一镜到底的效果。

  private onSearchClicked(): void {
    this.geometryId = 'search';
    animateTo({
      duration: 100,
      // 构造插值器弹簧曲线对象，生成一条从0到1的动画曲线
      curve: curves.interpolatingSpring(0, 1, 324, 38),
      onFinish: () => {
        this.geometryId = ''
      }
    }, () => {
      this.searchWidth = 400;
      this.isSearchPageShow = true;
    })
  }

高性能知识点

不涉及

工程结构&模块类型

   SearchComponent                                 // har类型(默认使用har类型，如果使用hsp类型请说明原因)
   |---model
   |   |---ListData.ets                            // 筛选数据模型
   |---SearchComponent.ets                         // 搜索模块

鸿蒙全栈开发全新学习指南

之前总有很多小伙伴向我反馈说，不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以这里为大家准备了一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。