【HarmonyOS学习】动画

页面分类动画

在这里插入图片描述

显示动画

function animateTo(value: AnimateParam, event: () => void): void;

代码如下:(实现属性变化引发的动画)

@Entry
@Component
struct Animate_Page1 {@State boxWidth: number = 100;@State boxHeight: number = 100;@State flag: boolean = true;build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {Row() {}.width(this.boxWidth).height(this.boxHeight).backgroundColor(Color.Red)}.height('100%').width('100%').justifyContent(FlexAlign.Center)Button("动画").width(50).height(50).margin(20).onClick(() => {animateTo({duration: 1000 //动画时间}, () => {if (this.flag) {this.boxWidth = 240;this.boxHeight = 240;} else {this.boxWidth = 100;this.boxHeight = 100;}this.flag = !this.flag;})})}.width('100%')}
}

常见属性

  • duration:动画执行时间

  • iterations:动画播放次数,-1表示无限次播放

  • curve:播放曲线

  • playMode:动画播放模式

  • delay:动画延迟播放时间

属性动画

使用animation属性去定义动画的属性,需要注意的点是,如果在animation方法后定义的属性,在改变时将不会触发动画。

@Entry
@Component
struct Animate_Page2 {@State boxWidth: number = 100;@State boxHeight: number = 100;@State flag: boolean = true;build() {Stack({ alignContent: Alignment.BottomEnd }) {Column() {Row() {}.width(this.boxWidth).height(this.boxHeight).backgroundColor(Color.Red).animation({duration: 1000})}.height('100%').width('100%').justifyContent(FlexAlign.Center)Button("动画").width(50).height(50).margin(20).onClick(() => {if (this.flag) {this.boxWidth = 240;this.boxHeight = 240;} else {this.boxWidth = 100;this.boxHeight = 100;}this.flag = !this.flag;})}.width('100%')}
}

常见属性

  • duration:动画执行时间

  • iterations:动画播放次数,-1表示无限次播放

  • curve:播放曲线

  • playMode:动画播放模式

  • delay:动画延迟播放时间

弹簧曲线动画(springCurve属性)

实现组件的左右抖动

import curves from '@ohos.curves';@Entry
@Component
struct Animate_Page3 {@State message: string = '登录框';@State translateX: number = 0;@State translateY: number = 0;jumpWithSpeed(velocity: number) {this.translateX = -10;animateTo({duration: 2000,//速度(velocity)质量(mass)刚度(stiffness)阻尼(damping)curve: curves.springCurve(velocity, 1, 1, 1)}, () => {this.translateX = 0;})}build() {Column() {Row() {Text(this.message).fontSize(40).width('100%').textAlign(TextAlign.Center)}.width(200).height(200).backgroundColor(Color.Gray).margin({top: 20,bottom: 50}).translate({x: this.translateX,y: this.translateY})Row() {Button("jump10").width(100).onClick(() => {this.jumpWithSpeed(10)})Button("jump200").width(100).onClick(() => {this.jumpWithSpeed(200)})}.justifyContent(FlexAlign.SpaceAround).width('100%')}.height('100%').width('100%')}
}

路径动画(motionPath属性)

需要在改变的外层轮廓添加animation属性,才能实现。需要注意点坐标需要乘2.

@Entry
@Component
struct Animate_Page4 {@State message: string = 'Hello World';@State flag: boolean = true;build() {Column() {Row() {Text(this.message).fontSize(20).width('100%').textAlign(TextAlign.Center)}.width(100).height(100).backgroundColor(Color.Gray).margin(10).onClick(() => {this.flag = !this.flag;}).motionPath({path: "M start.x start.y L10 400 L400 400 Lend.x end.y",from: 0,to: 1,rotatable: false//控制组件是否沿运动方向旋转})}.height('100%').width('100%').alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End).animation({duration: 2000})}
}

页面间动画-放大缩小视图

关键属性:sharedTransition属性

sharedTransition属性中的type类型包含Exchange和Static两种,详细简介如下图:
在这里插入图片描述
实现两个页面之间的图片放大缩小的方式跳转

Animate_Page5:

import router from '@ohos.router';@Entry
@Component
struct Animate_Page5 {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.app_icon')).width(50).height(50).margin({top: 30,bottom: 30}).sharedTransition("icon1", {duration: 1000,type: SharedTransitionEffectType.Exchange})Button("点我跳转").width(200).fontSize(20).fontColor(Color.White).onClick((event: ClickEvent) => {router.pushUrl({url: "pages/Animate_Page5_Image"})})}.height('100%').width('100%')}
}

Animate_Page5_Image:

import router from '@ohos.router';@Entry
@Component
struct Animate_Page5_Image {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.app_icon')).width(50).height(50).onClick(() => {router.back();}).sharedTransition("icon1")}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

在这里插入图片描述

页面转场动画

可以设置转场动画方向和透明度等属性

pageTransition() {//页面打开时候的动画PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {})//页面离开时候的动画PageTransitionExit({}).onExit((type: RouteType, progress: number) => {})
}

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

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

相关文章

第一节Linux常见指令

目录 1.Linux下基本指令 ls指令 pwd 命令 cd 指令 知识点:理解树形结构 touch 指令 mkdir指令(重要) rmdir指令 && rm指令(重要) 知识点:ls file* 可以找到当前目录下任何以file开头的文件​编辑 知识点:热键 man指令()重要 补充知识点:nano cp…

前端程序员应该往全栈方向发展吗?还是坚守前端?

作者:寒蝉(知乎) 顺便吆喝一声,技术大厂,内推捞人,前/后端or测试←感兴趣 要求学历:全日制统招本科(非学院派即可): --加班偶尔较多,但周末加班两…

深入理解 Java 中 forEachOrdered 和 forEach 方法的区别

在 Java 8 中引入的 Stream API 提供了丰富的操作方法来处理集合数据。其中,forEachOrdered 和 forEach 是两个常用的方法,用于对集合中的元素进行操作。虽然它们看起来很相似,但它们在处理元素顺序上有着重要的区别。本文将深入探讨它们的不…

Android NDK开发之震动服务客户端编写程序(C++)

一、背景 最近有个小伙伴问我可不可以写一个可执行程序(C/C) 来实现Android设备的震动的功能。 作为一个多年的Android开发者,我觉得这是可以实现的。 但是由于过去我一直做App开发,也就把这个实现过程想简单了。 经过了几天的折腾,终于算是…

港股指数实时行情API接口

港股 指数 实时 行情 API接口 # Restful API https://tsanghi.com/api/fin/index/HKG/realtime?token{token}&ticker{ticker}指定指数代码,获取该指数的实时行情(开、高、低、收、量)。 更新周期:实时。 请求方式&#xff1a…

vue router 切换路由的时候,页面的动画效果,使页面切换好看,以及控制有的页面使用切换路由特效,有的页面不用

一、使用切换效果 在router文件中 useTransition: true代表需要动画 meta: { title: “新开卡预填表单”, keepAlive: true, useTransition: true }, [{path: "/",name: "Home",meta: {title: "首页",keepAlive: true,useTransition: false},c…

论文分享|RAG理论-第四篇-生成

0.前言 本系列以同济大学的检索增强生成(RAG)综述[1],ACL2023 检索增强语言模型(RALM) Tutorial[2]作为参考材料,讲解RAG的前世今身,包含概述,评估方法,检索器&#xff…

给你的博客添加数据统计功能

20.数据统计 我们可以给博客添加统计功能,这里以百度统计和谷歌统计为例。 ‍ 百度统计 ‍ 添加网站 登陆百度统计后台:百度统计——一站式智能数据分析与应用平台,并登录,然后进入产品: ‍ 在使用设置–网站列…

图解KMP算法,带你彻底吃透KMP

模式串匹配——KMP算法 KMP算法一直是一个比较难以理解的算法,本篇文章主要根据《大话数据结构》中关于KMP算法的讲解,结合自己的思考,对于KMP算法进行一个比较详细的解释。 由于博主本人水平有限,难免会出现一些错误。如果发现…

WPF学习(7) --MVVM模式

1. MVVM模式概述 MVVM模式由三个主要部分组成: Model(模型):包含应用程序的业务逻辑和数据。通常是数据对象和数据访问层。View(视图):用户界面部分,展示数据并与用户进行交互。通…

C语言课程回顾:十、C语言之 指针

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 C语言之 指针 10 指针10.1 地址指针的基本概念10.2 变量的指针和指向变量的指针变量10.2.1 定义一个指针变量10.2.2 指针变量的引用10.2.3 指针变量作为函数参数10.2.4 指针变…

电脑远程开关机

1. 远程开机 参考:https://post.smzdm.com/p/664774/ 1.1 Wake On LAN - 局域网唤醒(需要主板支持,一般都支持) 要使用远程唤醒,有几种方式:使用类似向日葵开机棒(很贵)、公网ip&…

MongoDB教程(六):mongoDB复制副本集

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MongoD…

如何给woocommerce订单列表加上产品图片的参数列

在WooCommerce中,由于订单列表(如订单管理页面上的列表)通常是通过管理界面(admin dashboard)的模板和PHP逻辑来呈现的,而不是通过前端的模板,因此直接在订单列表中显示产品图片需要一些自定义的…

使用Bind提供的域名解析服务

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、DNS域名解析服务 二、安装Bind服务程序 1、正向解析 2、反向解析 三、部署从服务器 四、安全的加密传输 五、部署缓存服务器 六、分…

浅析班组建设在企业发展中的重要作用

众所周知,企业的成功与否往往取决于其内部管理的精细化和团队的高效协作。而班组作为企业最基层的管理单元,其建设质量直接关系到企业的整体运营效率和竞争力。今天,深圳天行健企业管理咨询公司将从多个维度分析班组建设在企业发展中的重要作…

Jetson-AGX-Orin gstreamer+rtmp+http-flv 推拉流

Jetson-AGX-Orin gstreamerrtmphttp-flv 推拉流 Orin是ubuntu20.04 ARM64架构的系统,自带gstreamer 1、 测试摄像头 测试摄像头可以用v4l2-ctl命令或者用gst-launch-1.0 #用v4l2-ctl测试摄像头,有尖角符号持续打印则正常 v4l2-ctl -d /dev/video0 --set-fmt-vid…

Hadoop:HDFS-磁盘读写速度检测(实用)

1、下载工具 sudo yum install -y fio2、顺序读测试 sudo fio -filename/home/atguigu/test.log -direct1 -iodepth 1 -thread -rwread -ioenginepsync -bs16k -size2G -numjobs10 -runtime60 -group_reporting -nametest_r结果 Run status group 0 (all jobs):READ: bw360M…

【Kylin】Kylin入门

1. Kylin介绍 Apache Kylin是一个开源的、分布式的分析型数据仓库,它提供在Hadoop/Spark之上的SQL查询接口以及多维分析(OLAP)能力,用于支持超大规模数据。最初由eBay开发并贡献至开源社区。Kylin特别适用于大数据环境&#xff0…

【Python】深入了解 defaultdict:轻松处理默认值与复杂数据结构

文章目录 1. 深入理解 Python 中的 defaultdict:简化数据结构处理的利器2. defaultdict 基础概念3. 创建 defaultdict 实例3.1 基本用法3.2 使用其他工厂函数 4. defaultdict 的应用场景4.1 计数器4.2 分组数据 5. defaultdict 的高级用法5.1 嵌套 defaultdict5.2 自…