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中的跳转 只是从右到左这样 划过来

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

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

在这里插入图片描述
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
慢慢进场

我们点击跳转 效果如下图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day39 动态规划part02 62. 不同路径 63. 不同路径 II

动态规划part02 62. 不同路径 63. 不同路径 II 62. 不同路径 class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>> dp(m, vector(n,0)); //第一步&#xff0c;确定dp[i][j]就是移动到[i,j]位置的方法数量for(int i 0; i<dp.size();…

解决你所有ArcGIS标注问题!二分式、三分式、条件分类标注、上下标、牵引线、文字格式化…

解决你所有ArcGIS标注问题&#xff01;二分式、三分式、条件分类标注、上下标、牵引线、文字格式化… 标注是将描述性文本放置在地图中的要素上或要素旁的过程。 本文整理了ArcGIS中的各种标注方法、可能遇到的问题和细节&#xff0c;内容比较杂&#xff0c;想到哪写到哪。 …

tui.calender日历创建、删除、编辑事件、自定义样式

全是坑&#x1f573;&#xff01;全是坑&#x1f573;&#xff01;全是坑&#x1f573;&#xff01;能不用就不用&#xff01; 官方文档&#xff1a;https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md 实例的一些方法&#xff0c;比如创建、删除、修改、…

python使用jupyter记笔记

目录 一、安装 二、运行jupyter 三、使用 四、记笔记 Jupyter Notebook&#xff08;此前被称为 IPython notebook&#xff09;是一个交互式笔记本&#xff0c;支持运行 40 多种编程语言。 Jupyter Notebook 的本质是一个 Web 应用程序&#xff0c;便于创建和共享程序文档&a…

位运算的奇技淫巧

常见位运算总结&#xff1a; 1、基础位运算 左移<<运算 将二进制数向左移位操作&#xff0c;高位溢出则丢弃&#xff0c;低位补0。 右移>>运算 右移位运算中&#xff0c;无符号数和有符号数的运算并不相同。对于无符号数&#xff0c;右移之后高位补0&#xff…

【正点原子STM32连载】 第四十三章 FLASH模拟EEPROM实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四…

自定义shell工具函数之pull_image()

这是一个名为pull_image的Shell脚本函数。让我来解释一下这个函数的功能&#xff1a; function pull_image() {image$1DOCKER_IMAGE_MIRROR$(get_config_or_env DOCKER_IMAGE_MIRROR)if [[ "${DOCKER_IMAGE_MIRROR}" "1" ]]; thenif [[ "$(uname -m…

深入解析ESP32C3(1) - 使用ESP-IDF

乐鑫ESP32系列芯片是性价比非常高的嵌入式平台&#xff0c;不仅外设接口丰富&#xff0c;有较多的存储空间&#xff0c;还支持WIFI/BT等无线连接&#xff0c;同时也支持加密和权限管理等安全功能&#xff0c;这大大拓展了芯片的应用领域&#xff1b;当然&#xff0c;最重要的是…

Python使用pyechart分析疫情确诊人数图(2024)

import json from pyecharts.charts import Map from pyecharts import options as opts# 首先打开文件获取数据 f open("/Desktop/python/Project/数据可视化/疫情.txt", "r", encoding"UTF-8") data f.read()# 字符串转化成json数据 data_js…

Java多线程--创建多线程的基本方式一:继承Thread类

文章目录 一、创建和启动线程&#xff08;1&#xff09;概述&#xff08;2&#xff09;方式1&#xff1a;继承Thread类1、使用步骤2、举例2.1 案例12.2 案例22.3 案例3 3、两个问题3.1 问题13.2 问题2 4、代码及总结 二、练习&#xff08;1&#xff09;方式一&#xff08;2&…

索引的概述和性能分析

索引index&#xff0c;是一种有序的数据结构&#xff0c;可以高效的获取数据&#xff0c;在数据库中维护着满足查找特定算法的数据结构&#xff0c;就是索引 无索引的情况&#xff0c;查询数据时会全表扫描&#xff0c;效率极低 索引结构 &#xff08;1&#xff09;二叉树&…

python解决求二叉树的最长同值路径问题

对于给定的一颗二叉树&#xff0c;需要找到最长的路径&#xff0c;并且该路径上的每个节点具有相同的值的问题&#xff0c;对于寻找到的这条路径可以经过根节点也可以不经过根节点&#xff0c;两个节点之间的路径长度是由他们的变数来表示的&#xff0c;给定如下图的二叉树 添加…

【 Qt 快速上手】-②- Qt 环境搭建

文章目录 1. Qt 开发工具概述1.1 Qt Creator 介绍1.2 Visual Studio 介绍1.3 Eclipse 介绍 2. Qt SDK 的下载与安装2.1 Qt SDK 的下载2.2 Qt SDK 的安装2.3 验证 Qt SDK 安装是否成功2.4 Qt 环境变量配置 1. Qt 开发工具概述 Qt 开发环境需要安装三个部分&#xff1a; C编译器…

小伙频繁发朋友圈引发分手,拼命“晒“生活是否成为一种病态行为?

根据《西湖之声》1月19日的报道&#xff0c;一个小伙子因为一天发十几条朋友圈而引起了他女友的不满&#xff0c;女友甚至提出了分手。现如今&#xff0c;朋友圈已经成为每个人自我形象展示的平台&#xff0c;认真发朋友圈不仅是表达自己的一种方式&#xff0c;也是一种自我释放…

redis缓存和本地缓存的应用设计

数据查询顺序 一级缓存&#xff1a;本地缓存 -》二级缓存&#xff1a;redis缓存 -》数据库 本地缓存和分布式缓存 本地缓存&#xff1a;基于jvm, 意思是程序放在哪&#xff0c;数据就存储在哪&#xff0c;不需要网络请求&#xff0c;特别快&#xff0c;但是需要占用jvm的内存…

Python利用Excel读取和存储测试数据完成接口自动化教程

http_request2.py用于发起http请求 #读取多条测试用例#1、导入requests模块import requests#从 class_12_19.do_excel1导入read_data函数from do_excel2 import read_datafrom do_excel2 import write_datafrom do_excel2 import count_case#定义http请求函数COOKIENonedef ht…

Unity之四元数计算

四元数相乘 #region 四元数相乘 Quaternion q Quaternion.AngleAxis(20, Vector3.up); this.transform.rotation * q; #endregion 四元数乘向量 Vector3 v Vector3.forward; print(v); //四元数乘向量的顺序不能改变&#xff0c;也就是说不能用向量去乘四元数&#xff0c;…

Spring Boot Aop 执行顺序

Spring Boot Aop 执行顺序 1. 概述 在 spring boot 项目中&#xff0c;使用 aop 增强&#xff0c;不仅可以很优雅地扩展功能&#xff0c;还可以让一写多用&#xff0c;避免写重复代码&#xff0c;例如&#xff1a;记录接口耗时&#xff0c;记录接口日志&#xff0c;接口权限&…

C# byte转int:大小端读取

参考&#xff1a;byte[]数组和int之间的转换 文章目录 Byte转为INT小端存储方式转int大端存储方式转int 大端模式和小端模式是计算机存储多字节数据时的两种方式。内存地址从小往大增长。 大端模式&#xff1a;最高有效&#xff08;最高位&#xff09;的字节存放在最小地址上&…

python 自动化模块 - pyautogui初探

python 自动化模块 - pyautogui 引言一、安装测试二、简单使用三、常用函数总结 引言 在画图软件中使用pyautogui拖动鼠标&#xff0c;画一个螺旋式的正方形 - (源码在下面) PyAutoGUI允许Python脚本控制鼠标和键盘&#xff0c;以自动化与其他应用程序的交互。API的设计非常简…