开天辟地 HarmonyOS(鸿蒙) - 动画: 页面转场效果

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 动画: 页面转场效果

示例如下:

pages\animation\PageTransitionDemo.ets

/*
 * 页面转场效果(即页面路由切换时的动画)
 */

import { MyLog, TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct PageTransitionDemo {

  @State myScale: number = 1
  @State myOpacity: number = 1

  /*
   * pageTransition() - 用于设置当前页面移入和移出时的转场动画
   *   PageTransitionEnter() - 页面移入时的转场动画
   *     delay - 动画的延迟播放时间(单位:毫秒)
   *     duration - 动画时长(单位:毫秒)
   *     curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
   *     type - 触发 onEnter() 回调的类型(RouteType 枚举)
   *       Push - 页面移入是因为此页面被 push 了,则会调用 onEnter() 回调
   *       Pop - 页面移入是因为其他页面被 pop 了,则会调用 onEnter() 回调
   *       None - 以上两种情况都会调用 onEnter() 回调
   *     onEnter() - 页面移入过程中的回调,根据进度的不同会调用多次
   *       type - 页面移入的类型
   *         RouteType.Push 或 RouteType.Pop
   *       progress - 页面移入的进度
   *         即页面移入时,此页面的转场动画的进度,此值在 0 - 1 之间
   *
   *   PageTransitionExit() - 页面移出时的转场动画
   *     和上面介绍的 PageTransitionEnter() 的用法是一致的
   */
  pageTransition() {
    PageTransitionEnter({
      delay: 0,
      duration: 1500,
      curve: Curve.Ease,
      type: RouteType.None
    })
      // 根据移入动画进度,自定义当前的页面的状态
      .onEnter((type: RouteType, progress: number) => {
        if (type == RouteType.Push || type == RouteType.Pop) {
          this.myScale = progress
          this.myOpacity = progress
        }
      })

    PageTransitionExit({
      delay: 0,
      duration: 1500,
      curve: Curve.Ease,
      type: RouteType.None
    })
      // 根据移出动画进度,自定义当前的页面的状态
      .onExit((type: RouteType, progress: number) => {
        if (type == RouteType.Push || type == RouteType.Pop) {
          this.myScale = 1 - progress
          this.myOpacity = 1 - progress
        }
      })
  }

  build() {
    Column() {
      TitleBar()

      Column() {
        Image($r("app.media.app_icon"))
          .width('80%')
          .height('80%')
          .objectFit(ImageFit.Fill)
          .scale({ x: this.myScale, y: this.myScale })
          .opacity(this.myOpacity)
          .onClick(() => {
            router.pushUrl({ url: 'pages/animation/PageTransitionDemo_1', params: { title: "页面转场效果_测试页 1" } })
          })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
  }
}

pages\animation\PageTransitionDemo_1.ets

/*
 * 页面转场效果(即页面路由切换时的动画)
 */

import { TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct PageTransitionDemo_1 {

  /*
   * pageTransition() - 用于设置当前页面移入和移出时的转场动画
   *   PageTransitionEnter() - 页面移入时的转场动画
   *     slide() - 整个页面的滑入滑出动画(SlideEffect 枚举)
   *       Left, Right, Top, Bottom, START, END - 从指定的位置滑入
   *     translate() - 整个页面的位移动画(参见 /component/shape/TransformDemo.ets 中的说明)
   *     scale() - 整个页面的缩放动画(参见 /component/shape/TransformDemo.ets 中的说明)
   *     opacity() - 整个页面的不透明度动画
   *
   *   PageTransitionExit() - 页面移出时的转场动画
   *     和上面介绍的 PageTransitionEnter() 的用法是一致的
   */
  pageTransition() {
    PageTransitionEnter({
      delay: 0,
      duration: 1500,
      curve: Curve.Ease,
      type: RouteType.None
    })
      // 整个页面移入时的转场动画
      .slide(SlideEffect.Left)

    PageTransitionExit({
      delay: 0,
      duration: 1500,
      curve: Curve.Ease,
      type: RouteType.None
    })
      // 整个页面移出时的转场动画
      .translate({ x: 100.0, y: 100.0 })
      .scale({ x: 0.5, y: 0.5 })
      .opacity(0)
  }

  build() {
    Column() {
      TitleBar()

      Column() {
        Image($r("app.media.son"))
          .width('80%')
          .height('80%')
          .objectFit(ImageFit.Fill)
          .onClick(() => {
            router.pushUrl({ url: 'pages/animation/PageTransitionDemo_2', params: { title: "页面转场效果_测试页 2" } })
          })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
  }
}

pages\animation\PageTransitionDemo_2.ets

/*
 * 页面转场效果(即页面路由切换时的动画)
 */

import { TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct PageTransitionDemo_2 {

  build() {
    Column() {
      TitleBar()

      Column() {

        /*
         * sharedTransition() - 页面路由切换时,相同组件的切换效果
         *   id - 标识
         *     此标识相同的不同页面的不同组件(但是组件显示的内容是一样的),在页面路由切换时,他们之间会有一段转场动画
         *   options - 选项
         *     delay - 动画的延迟播放时间(单位:毫秒)
         *     duration - 动画时长(单位:毫秒)
         *     curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
         */
        Image($r("app.media.app_icon"))
          .width('20%')
          .height('20%')
          .objectFit(ImageFit.Fill)
          .sharedTransition('group1', {
            delay: 0,
            duration: 1500,
            curve: Curve.Linear
          })
          .onClick(() => {
            router.pushUrl({ url: 'pages/animation/PageTransitionDemo_3', params: { title: "页面转场效果_测试页 3" } })
          })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
  }
}

pages\animation\PageTransitionDemo_3.ets

/*
 * 页面转场效果(即页面路由切换时的动画)
 */

import { TitleBar } from '../TitleBar';

@Entry
@Component
struct PageTransitionDemo_3 {

  build() {
    Column() {
      TitleBar()

      Column() {

        /*
         * sharedTransition() - 页面路由切换时,相同组件的切换效果
         *   id - 标识
         *     此标识相同的不同页面的不同组件(但是组件显示的内容是一样的),在页面路由切换时,他们之间会有一段转场动画
         *   options - 选项
         *     delay - 动画的延迟播放时间(单位:毫秒)
         *     duration - 动画时长(单位:毫秒)
         *     curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
         */
        Image($r("app.media.app_icon"))
          .width('80%')
          .height('80%')
          .objectFit(ImageFit.Fill)
          .sharedTransition('group1', {
            delay: 0,
            duration: 1500,
            curve: Curve.Linear
          })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @   webabcd  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2012-02-06 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
点击右上角即可分享
微信分享提示