OpenHarmony开发者论坛

标题: 如何实现上下切换的页面间跳转动画 [打印本页]

作者: mean 时间: 2023-9-12 18:37
标题: 如何实现上下切换的页面间跳转动画

第一个页面展示一张图片，点击图片，切换到第二个页面。如何实现上下切换的页面间跳转动画？

第一个页面：

// Index.ets
@Entry
@Component
struct PageTransition1 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page6'}) {
Image($r('app.media.pic4')).width('100%').height(200) // 图片存放在media文件夹下
}
}.height('100%').width('100%')
}
}

复制代码

第二个页面：

// Page1.ets
@Entry
@Component
struct PageTransition2 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page5'}) {
Image($r('app.media.1')).width('100%').height(200) // 图片存放在media文件夹下
}
}.height('100%').width('100%')
}
}

复制代码

【运行环境】

硬件：rk3568； ROM: 3.2 Beta5； API 9

作者: 海浪漂啊漂 时间: 2023-9-12 18:47
[md]可以使用pageTransition函数来实现页面转场效果，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果，将其slide属性设置为SlideEffect.Bottom，则页面入场时从下边划入，出场时滑出到下边，即可实现上下切换效果。

分别在两个页面加上pageTransition函数:
![image67.png](data/attachment/forum/202310/17/150115d220b9paohxnrxcn.png "image (67).png")

```
pageTransition() {

PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)

PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)

}
```

参考链接：[页面转场动画](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md)

[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)