在实现页面转场动画时，可以根据具体的需求和设计来选择合适的转场效果，并结合页面的布局和内容来调整动画效果的细节。
页面转场动画是一种通过使用动画效果来过渡页面切换的方式，旨在提升用户体验，使页面之间的切换更加平滑和有趣。
一、页面转场动画
1.type配置
PageTransitionEnter和PageTransitionExit的接口为：
PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})
在HarmonyOS中，PageTransitionEnter和PageTransitionExit是用于控制页面切换动画的参数。它们分别表示页面进入和退出时的动画。
- type（动画类型）：表示动画的类型，可以取以下几种值：
- NONE：表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。
- Push：表示仅对页面栈的push操作生效。
- Pop：表示仅对页面栈的pop操作生效。
- duration（动画时长）：表示动画的时长，单位为毫秒。
- curve（动画曲线）：表示动画的变化曲线。
- delay（动画延迟）：表示动画的延迟时间，单位为毫秒。
页面A
// page A pageTransition() { // 定义页面进入时的效果，从右侧滑入，时长为1200ms，页面栈发生push操作时该效果才生效 PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) .slide(SlideEffect.Right) // 定义页面进入时的效果，从左侧滑入，时长为1200ms，页面栈发生pop操作时该效果才生效 PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Right) }
页面B
// page B pageTransition() { // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Right) // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向左侧滑出，时长为1200ms，页面栈发生push操作时该效果才生效 PageTransitionExit({ type: RouteType.Push, duration: 1200 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向右侧滑出，时长为1200ms，页面栈发生pop操作时该效果才生效 PageTransitionExit({ type: RouteType.Pop, duration: 1200 }) .slide(SlideEffect.Right) }
通过设置页面转场的时长为0，可使该页面无页面转场动画。
2.场景示例
页面A
// PageTransitionSrc1 import router from '@ohos.router'; @Entry @Component struct PageTransitionSrc1 { build() { Column() { Image($r('app.media.img_2')) .width('90%') .height('80%') .objectFit(ImageFit.Fill) .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成 .margin(30)
Row({ space: 10 }) { Button("pushUrl") .onClick(() => { // 路由到下一个页面，push操作 router.pushUrl({ url: 'pages/myTest/pageTransitionDst1' }); }) Button("back") .onClick(() => { // 返回到上一页面，相当于pop操作 router.back(); }) }.justifyContent(FlexAlign.Center) } .width("100%").height("100%") .alignItems(HorizontalAlign.Center) }
pageTransition() { // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效 PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Right) // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效 PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效 PageTransitionExit({ type: RouteType.Push, duration: 1000 }) .slide(SlideEffect.Left) // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效 PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) .slide(SlideEffect.Right) } }
页面B
// PageTransitionDst1 import router from '@ohos.router'; @Entry @Component struct PageTransitionDst1 { build() { Column() { Image($r('app.media.img_2')) .width('90%') .height('80%') .objectFit(ImageFit.Fill)
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
