#2023盲盒+码# 转场动画开发记录 原创

【本文正在参加 2023「盲盒」+码有奖征文活动】 https://ost.51cto.com/posts/25284

转场动画

构建第一个页面

1. 下面介绍定义了所有的四种页面转场样式的页面转场动画示例：在第一个页面添加图片组件,按钮事件及跳转路由，并设置其样式。

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Image，Button组件组成。“Index.ets”文件的示例如下：

// Index.ets
import router from '@ohos.router';

@Entry
@Component
struct Index {

build() {
 Row() {
   Column() {
     Image($r('app.media.mountain'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一个页面，push操作
           router.pushUrl({ url: 'pages/Second' });
         })
       Button("back")
         .onClick(() => {
           // 返回到上一页面，相当于pop操作
           router.back();
         })
     }.justifyContent(FlexAlign.Center)
   }
   .width("100%").height("100%")
   .alignItems(HorizontalAlign.Center)
 }
}
}

2. 添加pageTransition动画跳转函数，并定义出所有的四种页面转场样式。

在默认页面基础上，我们添加一个pageTransition函数作为页面间动画跳转方法，响应用户点击，从而实现动画跳转到另一个页面。“Index.ets”文件的示例如下：

// Index.ets
import router from '@ohos.router';

@Entry
@Component
struct Index {

build() {
 Row() {
   Column() {
     Image($r('app.media.mountain'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一个页面，push操作
           router.pushUrl({ url: 'pages/Second' });
         })
       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)
 }
}

构建第二个页面

参照第一个页面“Index.ets”文件

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

说明：

开发者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。

1. 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

2. 添加图片，按钮及跳转路由。

   参照第一个页面，在第二个页面添加图片组件，按钮事件和跳转路由等，并设置其样式。“Second.ets”文件的示例如下：

   // Second.ets
   import router from '@ohos.router';
   @Entry
   @Component
   struct Second {
     build() {
       Row() {
         Column() {
        Image($r('app.media.forest'))
          .width('90%')
          .height('80%')
          .objectFit(ImageFit.Fill)
          .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
          .margin(30)
   
        Row({ space: 10 }) {
          Button("pushUrl")
            .onClick(() => {
              // 路由到下一页面，push操作
              router.pushUrl({ url: 'pages/Index' });
            })
          Button("back")
            .onClick(() => {
              // 返回到上一页面，相当于pop操作
              router.back();
            })
        }.justifyContent(FlexAlign.Center)
      }
      .width("100%").height("100%")
      .alignItems(HorizontalAlign.Center)
       }
     }
   }
   

3. 添加pageTransition动画跳转函数，并定义出第二个页面所有的四种页面转场样式。

   参照第一个页面，我们添加一个pageTransition函数作为页面间动画跳转方法，响应用户点击，从而实现动画跳回到另一个页面。“Second.ets”文件的示例如下：

   // Second.ets
   import router from '@ohos.router';
   @Entry
   @Component
   struct Second {
     build() {
       Row() {
         Column() {
        Image($r('app.media.forest'))
          .width('90%')
          .height('80%')
          .objectFit(ImageFit.Fill)
          .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
          .margin(30)
   
        Row({ space: 10 }) {
          Button("pushUrl")
            .onClick(() => {
              // 路由到下一页面，push操作
              router.pushUrl({ url: 'pages/Index' });
            })
          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)
    }
   }