鸿蒙开发系列教程(十八)--页面内动画(1)

页面内的动画

在这里插入图片描述

显示动画

语法:animateTo(value: AnimateParam, event: () => void): void

第一个参数指定动画参数

第二个参数为动画的闭包函数。

如:animateTo({ duration: 1000,
curve: Curve.EaseInOut },
() => {动画代码})

duration:动画时长为1000ms

curve:曲线为EaseInOut

curve参数:
在这里插入图片描述

1、平移

@Entry
@Component
struct LayoutChange {//定义一个变量来改变组件的排列方式//水平居左@State itemAlign: HorizontalAlign = HorizontalAlign.Start;//水平居左 居中 居右allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];alignIndex: number = 0;build() {Column() {Column({ space: 10 }) {Button("animate 1").width(100).height(50).backgroundColor("red")Button("animate 2").width(100).height(50).backgroundColor("#33FF00")}.margin(20).alignItems(this.itemAlign).width("90%").height(200)Button("动画按钮").onClick(() => {animateTo({ duration: 1000,// 动画时长为1000mscurve: Curve.EaseInOut //以低速开始和结束},() => {// 每点击一次按钮,生成新的索引,提取布局方式,使用动画过渡到新位置this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;this.itemAlign = this.allAlign[this.alignIndex];});})}.width("100%").height("100%")}
}

请添加图片描述

2、持续平移

接上面代码
...
Button("动画按钮").onClick(() => {animateTo({duration:2000, //动画时长curve:Curve.Linear, //动画匀速iterations:3, //动画次数delay:1000, //延时时间执行playMode:PlayMode.Alternate, //来回交替onFinish: () => { //动画完成的回调console.info('动画完成')}},() => {//利用三目运算改变排列方式this.itemAlign = this.itemAlign === HorizontalAlign.End ? HorizontalAlign.Start : HorizontalAlign.End})})

请添加图片描述

3、旋转动画

要依赖组件的rotate属性,可以设置旋转的x轴、y轴、z轴。需要一个angle角度参数

点击旋转动画文本,文本旋转

完整代码:

@Entry
@Component
struct LayoutChange {@State itemAlign: HorizontalAlign = HorizontalAlign.Center;allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];//设置一个变量作为旋转角度@State angle: number = 0@State textWidth: number = 100@State textHeight: number = 50build() {Column() {Column({space:20}) {Text("旋转动画").width(this.textWidth).height(this.textHeight).backgroundColor(Color.Blue).fontSize(20).fontColor(Color.White).fontWeight(FontWeight.Bold).margin({top:30}).rotate({ //旋转属性z:1,angle:this.angle}).onClick(() => {animateTo({duration:2000, //动画时长curve:Curve.Linear, //动画匀速iterations:3, //动画次数delay:1000, //延时时间执行playMode:PlayMode.Alternate, //来回交替},() => {//设置旋转的角度是360度this.angle = 360})})}.alignItems(this.itemAlign).justifyContent(FlexAlign.Center).width('100%').height('100%')}.width("100%").height("100%")}
}

请添加图片描述

4、缩放动画

      animateTo({duration:2000, curve:Curve.Linear,iterations:3, delay:1000, playMode:PlayMode.Alternate,   },() => {//改变宽高this.textWidth = 360;this.textHeight = 120})

属性动画

显式动画把要执行动画的属性的修改放在闭包函数中触发动画,而属性动画则无需使用闭包

animation(value: AnimateParam)

重要:想要组件随某个属性值的变化而产生动画,此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画,可以放在animation之后

  Button("text").type(ButtonType.Normal).width(this.myWidth).height(this.myHeight)// animation只对其上面的type、width、height属性生效,时长为1000ms,曲线为Ease.animation({ duration: 1000, curve: Curve.Ease })// animation对下面的backgroundColor、margin属性不生效.backgroundColor(this.myColor).margin(20)

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

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

相关文章

手撕链表OJ

𝙉𝙞𝙘𝙚!!👏🏻‧✧̣̥̇‧✦👏🏻‧✧̣̥̇‧✦ 👏🏻‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - :来于“云”的“羽球人”。…

python调用golang中函数方法

一、原因说明:由于simhash方法有多种实现方式,现python中simhash方法与golang中的不一样,需要两者代码生成结果保持一致,故采用python中的代码调用golang编译的so文件来实现。 环境配置:①Windows10系统要有gcc环境&a…

Python 读取pdf文件

Python 实现读取pdf文件简单示例。 安装命令 需要安装操作pdf的三方类库,命令如下: pip install pdfminer3K 安装过程如下: 引入类库 需要引入很多的类库。 示例如下: import sys import importlib importlib.reload(sys)fr…

车载诊断协议DoIP系列 —— OSI模型DoIP参考

车载诊断协议DoIP系列 —— OSI模型DoIP参考 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再…

MQTT的学习与应用

文章目录 一、什么是MQTT二、MQTT协议特点三、MQTT应用领域四、安装Mosquitto五、如何学习 MQTT 一、什么是MQTT MQTT(Message Queuing Telemetry Transport)是一种轻量级的消息传输协议,设计用于在低带宽、不稳定的网络环境中进行高效的通信…

深入了解pip和conda:高效Python环境管理的必备指南

pip相关命令: 更新包之前最好更新一下pip,因为更新其他包底层是依赖 pip pip show pippython -m pip install --upgrade pippython更新包: - ​ pip install --upgrade 包 pip install pandas- ​ pip install --upgrade 包名称版本号查看那些包需要更…

【C++第二阶段】赋值运算符重载

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 赋值运算符重载 赋值运算符重载 实验①&#xff0c;还没有对析构运算符重载时 #include<iostream> #include<string> using namespace std;clas…

操作系统(14)----文件系统的结构

目录 一.文件系统的层次结构 1.用户接口&#xff1a; 2.文件目录系统&#xff1a; 3.存取控制模块&#xff1a; 4.逻辑文件系统与文件信息缓冲区&#xff1a; 5.物理文件系统&#xff1a; 二.文件系统的全局结构 1.文件系统在外存中的结构 &#xff08;1&#xff09;物…

第六篇:MySQL图形化管理工具

经过前五篇的学习&#xff0c;对于数据库这门技术的理解&#xff0c;我们已经在心中建立了一个城堡大致的雏形&#xff0c;通过命令行窗口&#xff08;cmd&#xff09;快速上手了【SQL语法-DDL-数据定义语言】等相关命令 道阻且长&#xff0c;数据库技术这一宝藏中还有数不清的…

云安全的基本概念(基本目标与指导方针)

目录 一、云安全概念概述 1.1 概述 二、云安全的基本目标 2.1 安全策略开发模型 2.1.1 信息安全三元组 2.1.1.1 保密性(Confidentiality) 2.1.1.2 完整性(Integrity) 2.1.1.3 可用性(Availability) 2.1.2 信息安全三元组的局限性 2.2 其他信息安全属性 2.2.1 真实性 …

HarmonyOS鸿蒙学习基础篇 - 自定义组件(一)

前言 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为系统组件&#xff0c;由开发者定义的称为自定义组件。在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合使用&#xff0c;而是需要考虑代码可复用性、业务逻辑与UI分离&#…

[Angular 基础] - 自定义事件 自定义属性

[Angular 基础] - 自定义事件 & 自定义属性 之前的笔记&#xff1a; [Angular 基础] - Angular 渲染过程 & 组件的创建 [Angular 基础] - 数据绑定(databinding) [Angular 基础] - 指令(directives) 以上是能够实现渲染静态页面的基础 之前的内容主要学习了怎么通过…

项目访问量激增该如何应对

✨✨ 欢迎大家来到喔的嘛呀的博客✨✨ &#x1f388;&#x1f388;希望这篇博客对大家能有帮助&#x1f388;&#x1f388; 目录 引言 一. 优化数据库 1.1 索引优化 1.2 查询优化 1.3 数据库设计优化 1.4 事务优化 1.5 硬件优化 1.6 数据库配置优化 二. 增加服务器资源…

收藏:不错的讲座《拆解成功领导者的三重底层思维逻辑》

在B 站看到个不错的讲座《拆解成功领导者的三重底层思维逻辑》&#xff0c;地址&#xff1a;第145期-拆解成功领导者的三重底层思维逻辑_哔哩哔哩_bilibili 演讲内容文章摘要在这里&#xff1a;《直播精华 | 拆解成功领导者的思维逻辑》&#xff08;直播精华 | 拆解成功领导者的…

c语言操作符(上)

目录 ​编辑 原码、反码、补码 1、正数 2、负数 3、二进制计算1-1 移位操作符 1、<<左移操作符 2、>>右移操作符 位操作符&、|、^、~ 1、&按位与 2、|按位或 3、^按位异或 特点 4、~按位取反 原码、反码、补码 1、正数 原码 反码 补码相同…

专业140+总分420+浙江大学842信号系统与数字电路考研经验电子信息与通信,真题,大纲,参考书。

今年考研已经结束&#xff0c;初试专业课842信号系统与数字电路140&#xff0c;总分420&#xff0c;很幸运实现了自己的目标&#xff0c;被浙大录取&#xff0c;这在高考是想都不敢想的学校&#xff0c;在考研时实现了&#xff0c;所以大家也要有信心&#xff0c;通过自己努力实…

【c语言】字符串常见函数 下

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;c语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&a…

CVE-2023-41892 漏洞复现

CVE-2023-41892 开题&#xff0c;是一个RCE Thanks for installing Craft CMS! You’re looking at the index.twig template file located in your templates/ folder. Once you’re ready to start building out your site’s front end, you can replace this with someth…

【Web】CVE-2021-31805 s2-062漏洞复现学习

目录 Struts2介绍 漏洞概况 OGNL与Struts2 简单原理 漏洞复现 正向rce 反弹shell payload分析 Struts2介绍 Struts 2 是一个流行的用于构建 Java Web 应用程序的开源 Web 应用程序框架。它是 Apache 软件基金会下的一个顶级项目&#xff0c;是 Struts 框架的升级版本。…

LabVIEW智能温度监控系统

LabVIEW智能温度监控系统 介绍了一个基于LabVIEW的智能温度监控系统&#xff0c;实现对工业环境中温度的实时监控与调控。通过集成传感器技术和LabVIEW软件平台&#xff0c;系统能够自动检测环境温度&#xff0c;及时响应温度变化&#xff0c;并通过图形用户界面(GUI)为用户提…