HarmonyOS Navigation转场动画的一些思路？

Question

Navigation慢慢下拉页面，页面由不透明慢慢变成透明最后消失的动画。

Answer 1

动画可以先用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)
  }
}

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