HarmonyOS Navigation转场动画的一些思路

动画可以先用bindContentCover来实现，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-modal-transition-V5

参考代码：

import { BindCoverBuilder } from './MyBuilder';
@Component
struct MyComponent {
  @State isPresent: boolean = false;

  build() {
    NavDestination() {
      Column() {
        Row() {
          Text('确认订单')
            .fontSize(20)
            .fontColor(Color.White)
            .width('100%')
            .textAlign(TextAlign.Center)
            .padding({ top: 30, bottom: 60 })
        }
        .backgroundColor(0x007dfe)

        Column() {
          Row() {
            Column() {
              Text('00:25')
              Text('始发站')
            }
            .width('30%')

            Column() {
              Text('G1234')
              Text('8时1分')
            }
            .width('30%')

            Column() {
              Text('08:26')
              Text('终点站')
            }
            .width('30%')
          }
        }
        .width('92%')
        .padding(15)
        .margin({ top: -30 })
        .backgroundColor(Color.White)
        .shadow({ radius: 30, color: '#aaaaaa' })
        .borderRadius(10)

        Column() {
          Text('+ 选择乘车人')
            .fontSize(18)
            .fontColor(Color.Orange)
            .fontWeight(FontWeight.Bold)
            .padding({ top: 10, bottom: 10 })
            .width('60%')
            .textAlign(TextAlign.Center)
            .borderRadius(15)
            .bindContentCover(
              this.isPresent,
              BindCoverBuilder({
                isPresent: this.isPresent
              }),
              {
                modalTransition: ModalTransition.NONE,
                onDisappear: () => {
                  this.isPresent = !this.isPresent;
                }
              })
            .onClick(() => {
              this.isPresent = !this.isPresent;
            })
        }
        .padding({ top: 60 })
      }
    }
  }
}

@Builder
function MyBuilder() {
  MyComponent()
}

@Entry
@Component
struct BindContentCoverDemo {
  @Builder
  PageMap(name: string) {
    MyBuilder()
  }

  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    this.pageInfos.pushPath({ name: '123' }, false)
  }

  build() {
    Navigation(this.pageInfos) {
    }.title('NavIndex').navDestination(this.PageMap)
    .hideNavBar(false)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.

MyBuilder文件：

import { curves } from '@kit.ArkUI'

export class Tmp {
  isPresent: boolean = false;
}

let effect: TransitionEffect =
  TransitionEffect.OPACITY
    .combine(TransitionEffect.scale({ x: 0, y: 0 })
      .animation({
        curve: curves.springMotion(0.6, 1)
      }))

@Builder
export function
BindCoverBuilder($$: Tmp) {
  BindCoverComponent({
    isPresent: $$.isPresent
  }).transition(effect)
}

@Component
struct BindCoverComponent {
  @Link isPresent: boolean;
  @State translateY: number = 0;
  @State builderOpacity: number = 1;
  builderHeight: number = 0

  build() {
    Stack() {
      Image($r("app.media.2")).width("100%").objectFit(ImageFit.Auto)
    }
    .size({ width: '100%', height: '100%' })
    .backgroundColor(Color.Black)
    .opacity(this.builderOpacity)
    .translate({ y: this.translateY })
    .parallelGesture(PanGesture({ direction: PanDirection.Vertical })
      .onActionUpdate((event) => {
        this.translateY = event.offsetY
        this.builderOpacity = (this.builderHeight - this.translateY) / this.builderHeight
      })
      .onActionEnd(() => {
        if (Math.abs(this.translateY) > this.builderHeight / 3) {
          this.isPresent = false;
        } else {
          animateTo({
            duration: 300
          }, () => {
            this.translateY = 0
            this.builderOpacity = 1
          })
        }
      }), GestureMask.Normal)
    .onAreaChange((_, newArea: Area) => {
      this.builderHeight = newArea.height as number
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.