HarmonyOS 页面跳转控制整个界面的转场动画

这篇具有很好参考价值的文章主要介绍了HarmonyOS 页面跳转控制整个界面的转场动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

好 本文 我们来说 页面间的转场动画

就是 第一个界面到另一个界面
第一个界面的退场和第二个界面的进场效果

首先 我这里 创建了两个页面文件 Index.ets和AppView.ets

index组件 编写代码如下

import router from "@ohos.router"
@Entry
@Component
struct Index {

  build() {
    Column({space: 30}) {
      Text("啦啦啦")
      Image("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=317918699,1688031253&fm=253&gp=0.jpg")
        .width(100)
        .height(100)
        .onClick(()=> {
          router.pushUrl({
            url: "pages/AppView"
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

然后 AppView 组件 编写代码如下

@Entry
@Component
struct AppView {
  build() {
    Column({space: 30}) {
      Text("文本组件")
      Image("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=317918699,1688031253&fm=253&gp=0.jpg")
        .width("70%")
        .height("30%")
    }
    .width('100%')
    .height('100%')
  }
}

这里 我们在index 组件中 编写了 一个点击事件 onClick 点击路由跳转向 AppView组件

我们点击后 目前它确实是可以正常跳转
HarmonyOS 页面跳转控制整个界面的转场动画,harmonyos,华为
我们 harmonyOS中的跳转 只是从右到左这样 划过来

因为 我们组件元素都是在 build 元素上的
我们把属性加载 build 下面

pageTransition() {
  // 进场效界
  PageTransitionEnter({ duration: 2000,curve: Curve.Linear })
  .onEnter((type: RouteType, progress: number) => {

  })
  // 退场效果。
  PageTransitionExit({ duration: 200 })
  .onExit((type: RouteType, progress: number) =>{

   })
}

HarmonyOS 页面跳转控制整个界面的转场动画,harmonyos,华为
PageTransitionEnter 控制进场动画
PageTransitionExit 控制退场动画

其实 给我的感觉甚至有点像生命周期
这里 我们改写 index 组件代码如下

import router from "@ohos.router"
@Entry
@Component
struct Index {

  @State scale1:number = 1;

  build() {
    Column({space: 30}) {
      Text("啦啦啦")
      Image("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=317918699,1688031253&fm=253&gp=0.jpg")
        .width(100)
        .height(100)
        .onClick(()=> {
          router.pushUrl({
            url: "pages/AppView"
          })
        })
        .opacity(this.scale1)
    }
    .width('100%')
    .height('100%')
  }
  pageTransition() {
    // 进场效界
    PageTransitionEnter({ duration: 2000,curve: Curve.Linear })
    .onEnter((type: RouteType, progress: number) => {

    })
    // 退场效果。
    PageTransitionExit({ duration: 2000 })
    .onExit((type: RouteType, progress: number) =>{
         this.scale1 = 1 - progress;
     })
  }
}

我们定义了一个 状态变量 叫 scale1 默认值 1
然后 绑定 opacity 控制元素透明度属性

然后在退场动画 PageTransitionExit.onExit 中 编写改变它透明度 为 progress
progress 在退场动画中 会反复调用 从 0直到1
我们直接那它的值 减去 1 我们 scale1
AppView 代码修改如下

@Entry
@Component
struct AppView {

  @State scale1:number = 0;

  build() {
    Column({space: 30}) {
      Text("文本组件")
      Image("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=317918699,1688031253&fm=253&gp=0.jpg")
        .width("70%")
        .height("30%")
        .opacity(this.scale1)
    }
    .width('100%')
    .height('100%')
  }
  pageTransition() {
    // 进场效界
    PageTransitionEnter({ duration: 2000,curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = progress;
      })
    // 退场效果。
    PageTransitionExit({ duration: 200 })
      .onExit((type: RouteType, progress: number) =>{
      })
  }
}

还是定义了一个 scale1 状态变量 控制 opacity透明度属性
但是 我们默认值 给了 0 然后进场动画赋值为 progress
进场动画 progress默认0会一直赋值 到1
慢慢进场

我们点击跳转 效果如下图
HarmonyOS 页面跳转控制整个界面的转场动画,harmonyos,华为文章来源地址https://www.toymoban.com/news/detail-807716.html

到了这里,关于HarmonyOS 页面跳转控制整个界面的转场动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS开发DecEco Studio页面跳转

    一、pages创建新页面 在index.ets增加路由: import router from ‘@ohos.router’; //页面路由跳转 router.push()执行跳转 url:‘pages/Second’, //页面途径 params:{ src:msg, //传递数据 }

    2024年02月16日
    浏览(37)
  • 【HarmonyOS】服务卡片 API6 JSUI跳转不同页面

    【引言】 “JS卡片支持为组件设置action,包括router事件和message事件,其中router事件用于应用跳。若设置router事件,则action属性值为\\\"router\\\";abilityName为卡片提供方应用的跳转目标Ability名;params中的值按需填写,其值在使用时通过intent.getStringParam(\\\"params\\\")获取即可;”这一段是

    2024年02月12日
    浏览(42)
  • 【HarmonyOS】服务卡片 API6 JSUI跳转不同页面并携带参数

     【】 服务卡片、卡片跳转不同页面、卡片跳转页面携带参数 【写在前面】           本篇文章主要介绍开发服务卡片时,如何实现卡片点击跳转不同页面,并携带动态参数到js页面。在此篇文章“服务卡片 API6 JSUI跳转不同页面”中说明了如果跳转不同页面,这里在

    2024年02月06日
    浏览(43)
  • Flutter 动画(显式动画、隐式动画、Hero动画、页面转场动画、交错动画)

    当前案例 Flutter SDK版本: 3.13.2 Tween({this.begin,this.end})  两个构造参数,分别是  开始值 和 结束值 ,根据这两个值,提供了控制动画的方法,以下是常用的; controller.forward()   :   向前,执行 begin 到 end 的动画,执行结束后,处于end状态; controller.reverse()   :   反向,当动画

    2024年02月20日
    浏览(49)
  • 【HarmonyOS】【应用开发】动画-属性动画与显式动画

    (一)、定义   官网对于属性动画的定义如下: 组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等   个人理解:属性动画针对的是同一个组件的属性变化情况,如

    2024年02月02日
    浏览(39)
  • HarmonyOS 通过 animateTo讲解尺寸动画效果

    上文 HarmonyOS讲解并演示 animateTo 动画效果 我们已经做出了基本的动画效果 也对 animateTo 的使用比较熟悉了 第一个参数是 配置动画参数的json 第二个参数 则是改变我们元素属性值的事件 但属性值 远远不止位置属性 本文 我们来说 通过尺寸变化 完成动画效果 如果你有看过我的

    2024年02月01日
    浏览(31)
  • HarmonyOS讲解并演示 animateTo 动画效果

    本文 我们一起看一看动画 首先 harmonyos中的东西 其实就是通过改变 响应式数据的值 以及配合动画参数 即可完成 我们先来看 布局更新动画 中的 显示动画 简单说 触发事件 改变组件的位置信息 我们先编写代码如下 主容器下 Text 文本展示内容 Column 组件下 两个 button组件 jus

    2024年01月16日
    浏览(30)
  • 开发指导—利用组件&插值器动画实现 HarmonyOS 动效

    在组件上创建和运行动画的快捷方式。具体用法请参考通用方法。 通过调用 animate 方法获得 animation 对象,animation 对象支持动画属性、动画方法和动画事件。 说明 ● 使用 animate 方法时必须传入 Keyframes 和 Options 参数。 ● 多次调用 animate 方法时,采用 replace 策略,即最后一

    2024年02月09日
    浏览(38)
  • 开发指导—利用CSS动画实现HarmonyOS动效(一)

    注:本文内容分享转载自 HarmonyOS Developer 官网文档 CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式,也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的组件样式。 ● 逻辑像素 px(文档中以le

    2024年02月10日
    浏览(33)
  • HarmonyOS之构建用户界面

    添加容器        要将页面的基本元素组装在一起,需要使用容器组件。在页面布局中常用到三种容器组件,分别是div、list和tabs。        1.div组件 :页面结构相对较 简单 时,由于div作为单纯的布局容器,可以直接多种子组件,所以可以直接用div作为容器使用。      

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包