【鸿蒙实战开发】ArkUI转动动画模态转场实现

模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。

表1 模态转场接口

接口	说明	使用场景
bindContentCover	弹出全屏的模态组件。	用于自定义全屏的模态展示界面，结合转场动画和共享元素动画可实现复杂转场动画效果，如缩略图片点击后查看大图。
bindSheet	弹出半模态组件。	用于半模态展示界面，如分享框。
bindMenu	弹出菜单，点击组件后弹出。	需要Menu菜单的场景，如一般应用的“+”号键。
bindContextMenu	弹出菜单，长按或者右键点击后弹出。	长按浮起效果，一般结合拖拽框架使用，如桌面图标长按浮起。
bindPopup	弹出Popup弹框。	Popup弹框场景，如点击后对某个组件进行临时说明。
if	通过if新增或删除组件。	用来在某个状态下临时显示一个界面，这种方式的返回导航需要由开发者监听接口实现。

使用bindContentCover构建全屏模态转场效果

bindContentCover接口用于为组件绑定全屏模态页面，在组件出现和消失时可通过设置转场参数ModalTransition添加过渡动效。

定义全屏模态转场效果bindContentCover。
定义模态展示界面。


    1.  // 通过@Builder构建模态展示界面
    2.  @Builder MyBuilder() {
    3.  Column() {
    4.  Text('my model view')
    5.  }
    6.  // 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件 
    7.  .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
    8.  }

通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果。


    1.  // 模态转场控制变量
    2.  @State isPresent: boolean = false;

    4.  Button('Click to present model view')
    5.  // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画，通过onDisappear控制状态变量变换
    6.  .bindContentCover(this.isPresent, this.MyBuilder(), {
    7.  modalTransition: ModalTransition.NONE,
    8.  onDisappear: () => {
    9.  this.isPresent = !this.isPresent;
    10.  }
    11.  })
    12.  .onClick(() => {
    13.  // 改变状态变量，显示模态界面
    14.  this.isPresent = !this.isPresent;
    15.  })

完整示例代码和效果如下。


1.  import { curves } from '@kit.ArkUI';

3.  interface PersonList {
4.  name: string,
5.  cardnum: string
6.  }

8.  @Entry
9.  @Component
10.  struct BindContentCoverDemo {
11.  private personList: Array<PersonList> = [
12.  { name: '王**', cardnum: '1234***********789' },
13.  { name: '宋*', cardnum: '2345***********789' },
14.  { name: '许**', cardnum: '3456***********789' },