鸿蒙 HarmonyOs 动画效果 快速入门

一、理论

1.1 animation属性

名称参数类型必填描述
durationnumber设置动画时长,默认值:1000,单位:毫秒
temponumber动画播放速度。数值越大,速度越快,默认为1
curvestring | Curve

设置动画曲线。

默认值:Curve.EaseInOut,平滑开始和结束

delaynumber设置动画延迟执行的时长。默认值为0,毫秒
iterationsnumber

设置播放次数。

默认值:1,取值范围:[-1, +∞]

设置为 -1 表示无限次播放。

playModePlayMode设置动画播放模式,默认播放完成后重头开始播放。默认值:PlayMode.Normal
onFinish()=>void状态回调,动画播放完成时触发

1.2 组件转场效果

参数名参数类型必填描述
typeTransitionType类型,默认组件爱你新增和删除,默认为ALL
opacitynumber不透明度,为插入时起点和删除时终点的值。默认值为1,取值范围为[0,1]
translate

{

        x?:number | string,

        y?:number | string,

        z?:number | string

}

平移效果,为插入时起点和删除时终点的值。

-x:横向的平移距离。

-y:纵向的平移距离。

-z:竖向的平移距离。

scale

{

        x?:number,

        y?:number,

        z?:number,

        centerX?:number | string,

        centerY?:number | string

}

缩放效果,为插入时起点和删除时终点的值。

-x:横向的缩放倍数

-y:纵向的缩放倍数

-z:为当前的二维显示,该参数无效

-centerX:centerY指缩放中心点,centerX和centerY默认值是"50%"

-中心点为0时,默认是组件的左上角

rotate

{

        x?:number,

        y?:number,

        z?:number,

        angle:number | string,

        centerX?:number | string,

        centerY?:number | string

}

旋转效果:

angle是旋转角度

二、实操

2.1 示例:旋转图片

示例代码:

@Entry
@Component
struct Index {@State angle:number = 0build(){Column(){//显示图片Image($r('app.media.one')).width(120).rotate({angle:this.angle,centerX:'50%',centerY:'50%'}).animation({duration:1000,onFinish:()=>{console.log('结束时:'+this.angle)}})Button('动画开始').onClick(()=>{this.angle += 360})}.width('100%').height('100%')}
}

2.2 示例:平移、旋转、缩放

其中scale的值为缩放比例,所以1为初始值,2则表示原有的1倍

其中rotate的值为1则表示以该轴旋转,0则不以该轴旋转

示例效果:

示例代码:

@Entry
@Component
struct Index {@State angle:number = 0@State rotateX:number = 0@State rotateY:number = 0@State rotateZ:number = 0@State translateX:number = 0@State translateY:number = 0@State scaleX:number =  1@State scaleY:number =  1build(){Column(){//显示图片Image($r('app.media.one')).width(120).rotate({angle:this.angle,x:this.rotateX,y:this.rotateY,z:this.rotateZ,centerX:'50%',centerY: '50%',}).animation({duration:1000,onFinish:()=>{console.log('结束时:'+this.angle)}}).translate({x:this.translateX,y:this.translateY}).scale({x:this.scaleX,y:this.scaleY,centerX:'50%',centerY: '50%',})Blank()Row(){Column(){Image($r('app.media.ic_public_arrow_up_0')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateY -= 50})Row(){Image($r('app.media.ic_public_arrow_left')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateX -= 50})Image($r('app.media.ic_public_arrow_right')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateX += 50})}.width(130).justifyContent(FlexAlign.SpaceBetween)Image($r('app.media.ic_public_arrow_down_0')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateY += 50})}.width(200)Column({space:20}){Button('旋转一圈动画开始').onClick(()=>{this.rotateZ = 1this.angle += 360})Button('放大一倍').onClick(()=>{this.scaleX *= 2this.scaleY *= 2})Button('缩小一倍').onClick(()=>{this.scaleX /= 2this.scaleY /= 2})}.padding(10)}.width('100%').backgroundColor(Color.Gray)}.width('100%').height('100%')}
}

2.3 示例:简单摇骰子效果

示例效果:

示例代码:

@Entry
@Component
struct Index {@State dice:Resource[] = [$r('app.media.one'),$r('app.media.two'),$r('app.media.three'),$r('app.media.four'),$r('app.media.five'),$r('app.media.six')]@State currentDice:Resource = this.dice[0]@State angle:number = 0@State rotateX:number = 0@State rotateY:number = 1@State rotateZ:number = 0@State opacityNumber:number = 1@State runState:boolean = falsebuild(){Column(){//显示图片Image(this.currentDice).width(120).rotate({angle:this.angle,x:this.rotateX,y:this.rotateY,z:this.rotateZ,centerX:'50%',centerY: '50%',}).animation({duration:1000,curve:Curve.EaseInOut,onFinish:()=>{this.opacityNumber = 1console.log('结束时:'+this.angle)},}).opacity(this.opacityNumber)Button('摇骰子').width(200).onClick(()=>{this.opacityNumber = 0.8this.angle += 360setTimeout(()=>{this.currentDice = this.dice[Math.floor(Math.random() * this.dice.length)];},1000)})}.width('100%').height('100%')}
}

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

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

相关文章

喜提一等奖!白鲸开源在“创业北京”创业创新大赛海淀区选拔赛决赛表现亮眼

6月25日,第七届“创业北京”创业创新大赛海淀区选拔赛决赛在中关村东升国际科学园成功举办。本次活动由海淀区人力资源和社会保障局、中关村科学城管委会主办,以“创响新时代 共圆中国梦”为主题,活动现场主体赛先进制造赛道和主体赛现代服务…

ONLYOFFICE 桌面编辑器 8.1

ONLYOFFICE 桌面编辑器 8.1 ONLYOFFICE 简介一、轻松编辑器 PDF 文件二、用幻灯片版式快速修改幻灯片三、无缝切换文档编辑、审阅和查看模式四、**改进从右至左语言的支持 & 新的本地化选项**五、隐藏“连接到云”板块六、在演示文稿中播放视频和音频文件七、版本 8.1&…

Asp.NET identity以及Owin

》》》Identity是集成到Owin框架中中 ● Microsoft.AspNet.Identity.Core:Identity的核心类库,实现了身份验证的核心功能,并提供了拓展接口。● Microsoft.AspNet.Identity.EntityFramework:Identity数据持久化的EF实现。   ● …

币界网快讯,比特币7月份看牛预测

今日数字货币市场全面开启反弹,比特币从 60,000 美元大关飙升至 63,700 美元,预示着 7 月牛市的到来。在此之前,上周曾短暂跌破 60,000 美元,但受到 BTC 现货 ETF 流入的 7,300 万美元的推动——这是两周以来最大的流入。 BTC价格…

熊猫烧香是什么?

熊猫烧香(Worm.WhBoy.cw)是一种由李俊制作的电脑病毒,于2006年底至2007年初在互联网上大规模爆发。这个病毒因其感染后的系统可执行文件图标会变成熊猫举着三根香的模样而得名。熊猫烧香病毒具有自动传播、自动感染硬盘的能力,以及…

3dmax如何制作全景图?渲染100邀请码1a12

全景图很常见,制作起来也简单,这里我给大家稍微分享下。 1、创建相机 打开要渲染全景的场景文件,创建相机并调整好位置。 2、 设置分辨率 按F10打开渲染设置界面,选择相机视口,在公用里设置宽度和高度,…

Day38:LeedCode 1049. 最后一块石头的重量 II 494. 目标和 474.一和零

1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果…

EDI是什么?与ERP有何关系

EDI的发展过程 电子数据交换&#xff08;Electronic Data Interchange&#xff0c;EDI&#xff09;是一种通过电子方式传输商业文件的技术。EDI的历史可以追溯到20世纪60年代&#xff0c;当时企业开始使用计算机进行数据处理。最早的EDI系统是为解决大型企业间的信息交换问题而…

实验6 形态学图像处理

1. 实验目的 ①掌握数字图像处理中&#xff0c;形态学方法的基本思想&#xff1b; ②掌握膨胀、腐蚀、开运算、闭运算等形态学基本运算方法&#xff1b; ③能够利用形态学基本运算方法&#xff0c;编程实现图像去噪&#xff0c;边界提取等功能。 2. 实验内容 ①调用Matlab /…

[数据集][目标检测]电缆钢丝绳线缆缺陷检测数据集VOC+YOLO格式1800张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1800 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注…

为什么我的Skype点数不见了?如何重新激活 Skype 点数?

您超过180天没有使用过点数打电话功能&#xff0c;点数暂时封存在您的账户里面&#xff0c;需要您手动激活&#xff08;目前必须要登录网页版skype&#xff09; 可再次使用。 如何重新激活 Skype 点数&#xff1f; 登录到你的帐户 . 选择 重新激活信用额度 .注意&#xff1a; …

源码学习:文件描述符

在进程描述学习中&#xff0c;扯到了max_fds&#xff0c;接着就联想到了日常运维中常见的ulimit参数、sysctl内核参数&#xff0c;原来以为max_fds与这些个关联性比较强&#xff0c;但经过一早上折腾以后&#xff0c;发现其实还是有一些差距的。但是在学习过程中&#xff0c;却…

SAP配置发布WebService接口并调用(超级详细)

文章目录 前言一、案例介绍/笔者需求二、WebService是什么&#xff1f; a.传输协议 b.数据协议 c.WSDL d.UDDI 三、WebService 和 WebApi 的区别以及优缺点 a.主要区别 b.优缺点 四、SAP如何发布一个webser…

LVGL实现字库的下载和使用

1 字库 字库的概念&#xff1a;相应文字或字符的合集。 点阵字库&#xff1a;按字库顺序排列的字符/汉字字模的合集。 LVGL中字库使用Unicode编码&#xff0c;Unicode 是全球文字统一编码。它把世界上的各种文字的每一个字符指定唯一编码&#xff0c;实现跨语种、跨平台的应…

示例:WPF中推荐一个Diagram开源流程图控件

一、目的&#xff1a;分享一个自研的开源流程图控件 二、使用方法 1、引用Nuget包&#xff1a; 2、添加节点列表和绘图控件 <DockPanel><ItemsControl DockPanel.Dock"Left"><h:GeometryNodeData Text"节点"/></ItemsControl><…

[vue2/vue3] 详细剖析watch、computed、watchEffect的区别,原理解读

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;我是前端菜鸟的自我修养&#xff01;今天给大家分享【深入剖析watch、computed、watchEffect的区别】&#xff0c;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;原创不易&#xff0c;如果能帮助到带大家…

Rust 跨平台-Android 和鸿蒙 OS

1. 安装 rustup rustup 是 Rust 的安装和版本管理工具 $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh 该命令会安装 rusup 和最新的稳定版本的 Rust&#xff1b;包括&#xff1a; rustc Rust 编译器&#xff0c;用于将 Rust 代码编译成可执行文件或库。 ca…

网络爬虫(一)

1. 深度优先爬虫&#xff1a;深度优先爬虫是一种以深度为优先的爬虫算法。它从一个起始点开始&#xff0c;先访问一个链接&#xff0c;然后再访问该链接下的链接&#xff0c;一直深入地访问直到无法再继续深入为止。然后回溯到上一个链接&#xff0c;再继续深入访问下一个未被访…

redis,memcached,nginx网络组件

课程目标&#xff1a; 1.网络模块要处理哪些事情 2.reactor是怎么处理这些事情的 3.reactor怎么封装 4.网络模块与业务逻辑的关系 5.怎么优化reactor? io函数 函数调用 都有两个作用&#xff1a;io检测 是否就绪 io操作 1. int clientfd accept(listenfd, &addr, &l…

猫头虎 2024年上半年个人总结:科技自媒体的进击与突破

猫头虎 &#x1f42f; 2024年上半年个人总结&#xff1a;科技自媒体的进击与突破 &#x1f680; 大家好&#xff0c;我是猫头虎&#xff0c;实名李彦斌&#xff0c;陕西商洛人&#xff0c;今年26岁&#xff0c;目前在北京工作&#xff0c;全栈软件工程师、科技自媒体博主、某科…