鸿蒙APP实战开辟——搜刮页一镜到底案例

先容

本示例先容使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜刮框点击进入搜刮页场景。
效果图预览

使用分析

  

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

实现思绪

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

  

• 通过bindContentCover全屏模态转场实现对搜刮页面体现的控制。源码参考SearchComponent.ets
  

1.     Column() {
2.    
3.    
4.       Column() {
5.    
6.    
7.         Search({
8.    
9.     placeholder: $r('app.string.search_placeholder') })
10.           .focusOnTouch(false)
11.           .focusable(false)
12.           .enableKeyboardOnFocus(false)
13.           .backgroundColor('#E7E9E8')
14.           .width(this.searchWidth)
15.           .height(40)
16.           .borderRadius($r('app.string.main_page_top_borderRadius'))
17.           .onClick(() => {
18.    
19.    
20.             this.onSearchClicked()
21.           })
22.           .geometryTransition(this.geometryId, {
23.    
24.     follow: true })
25.           // 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画
26.           .transition(TransitionEffect

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金