【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十三)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 20 - 21节)

P20《19.ArkUI-属性动画和显式动画》

在这里插入图片描述
本节先来学习属性动画和显式动画:

在代码中定义动画,我们只需要定义好动画的起始状态和终止状态,ArkUI就会自动帮我们填充中间的动画状态,如下定义起始状态和终止状态:
在这里插入图片描述

1、属性动画:属性动画 animation() 需要注意:

(1)animation() 属性方法必须写在需要设置动画效果的样式语句之后,如下图animation()属性方法需要写在 position() 与 rotate() 之后,否则会没有效果;
(2)animation() 属性方法只会对一些特定的属性生效,如 width、height、opacity、backgroundColor、scale、rotate、translate 等属性;
(3)animation() 属性方法需要传递的参数如下:

在这里插入图片描述

下面来做一个“小鱼动画”的案例:添加一个“小鱼动画”的页面。

在这里插入图片描述
页面静态代码与效果如下:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

用 animation() 属性动画的方式给小鱼图片添加动画效果,同时添加方向键控制小鱼坐标位置语句:

在这里插入图片描述

向左和向右时切换图片以保证小鱼头部朝前:

在这里插入图片描述

2、显式动画:通过全局 animateTo() 函数修改组件属性

在这里插入图片描述

在小鱼案例中使用全局 animateTo() 函数实现动画效果:animateTo() 是一个全局函数,可以直接调用:

在这里插入图片描述

总结:
本节主要讲了两种实现动画的方式:
1、属性动画:调用属性方法 animation()
2、显式动画:调用全局公共方法 animateTo()
第二种方式用得更普遍。

实践:

实践遇到的问题如下:

1、报错,仔细观察发现老师定义的小鱼图片src变量类型是 Resource,不是 ResourceSrc。改为 Resource后报错消失:

在这里插入图片描述

2、设置背景图大小与位置,尝试了几个相关属性:

在这里插入图片描述

通用属性文档查询:通用属性文档
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-opacity-0000001427902432-V2

3、“The component you have selected is not displayed on the preview” 小鱼图片不显示,原因不明。更换webp格式图片为png格式图片,可以显示了。但之前案例中我使用过webp格式图片,显示正常。这里这个问题暂时不明白什么原因。

在这里插入图片描述

4、这个问题也很奇葩:animation() 对小鱼位置变化添加不上动画效果,只对向左和向右时切换小鱼图片src可以添加上动画效果。原因暂时没弄明白。

在这里插入图片描述

P21《20.ArkUI-组件转场动画》

在这里插入图片描述

想让组件具有插入或移除时的转场效果,就需要让组件有插入和移除的情景,比如条件渲染组件:

在这里插入图片描述
使用转场动画给小鱼添加动画效果:

1、第一步:给小鱼图片添加 transition() 入场动画效果:

在这里插入图片描述

第二步:在小鱼图片组件显示时添加 animateTo 函数控制:

在这里插入图片描述

页面间的转场动画效果可以查看官方文档:

在这里插入图片描述

实践:

本节实践代码:


import router from '@ohos.router'@Styles function btnStyle(){.backgroundColor('rgba(0,0,0,0.2)')
}@Entry
@Component
struct AnimationPage {// 小鱼坐标@State fishX: number = 200@State fishY: number = 180// 小鱼角度@State angle: number = 0// 小鱼图片@State src:Resource = $r('app.media.fish')// 是否开始游戏@State isBegin:boolean = falsebuild() {Row() {Column() {Stack(){// 返回按钮Button('返回').position({x:0,y:0}).btnStyle().onClick(()=>{router.back()})// 开始游戏按钮if(!this.isBegin){Button('开始游戏').onClick(()=>{animateTo({duration:1000},()=>{this.isBegin = true})})}else{// 小鱼图片Image(this.src).width('80').position({x: this.fishX - 40, y: this.fishY - 40})// .animation({duration:500, tempo:1}).transition({type:TransitionType.Insert,opacity:0,translate:{x: -200}})}// 操作按钮Row(){Button('←').btnStyle().type(ButtonType.Circle).onClick(()=>{animateTo({ duration:500 },()=>{this.src = $r('app.media.fish_left')this.fishX -= 40})})Column({space:20}){Button('↑').btnStyle().type(ButtonType.Circle).onClick(()=>{animateTo({duration:500},()=>{this.fishY -= 40})})Button('↓').btnStyle().type(ButtonType.Circle).onClick(()=>{animateTo({duration:500},()=>{this.fishY += 40})})}Button('→').btnStyle().type(ButtonType.Circle).onClick(()=>{animateTo({ duration:500 },()=>{this.src = $r('app.media.fish')this.fishX += 40})})}.width(120).position({x:10,y:250}).justifyContent(FlexAlign.Center)}.width('100%').height('100%')}.width('100%').height('100%')}.width('100%').height('100%').backgroundImage($r('app.media.fish_bg'),ImageRepeat.NoRepeat).backgroundImageSize(ImageSize.Cover).backgroundImagePosition(Alignment.Bottom)}
}

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

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

相关文章

蓄电池MSDS报告办理 锂电池运输鉴定中英文报告申请

MSDS 指的是化学产品安全技术说明书 MSDS 报告一般是由工厂所出具的,但也逐渐的应用在各种贸易过程当中,在海运过程当中,相关的产品也需要提供 MSDS 认证报告,不过有些人对于 MSDS 认证所规定的内容不是很了解,接下来大…

Apple开发者macOS设备与描述文件Profile创建完整过程

安装并打开Apple Configurator 新建描述文件 输入macOS平台的描述文件的相关信息,然后选择证书 选择一个可用证书 存储描述文件 存储成功如下: 使用文本编辑器打开刚才保存的描述文件,找到设备名与UDID

绿联Nas docker 中 redis 老访问失败的排查

部署了一些服务,老隔3-5 天其他服务就联不上 redis 了,未确定具体原因,只记录观察到的现象 宿主机访问 只有 ipv6 绑定了,ipv4 绑定挂掉了 其他容器访问 也无法访问成功 当重启容器后: 一切又恢复正常。 可能的解…

简易概况广告变现

广告变现是指媒体或平台通过向用户展示广告主的广告,从而获得收入的过程。 广告变现就像是一个店主,他需要一个吸引人的店面,提供优质的内容和服务,然后在店里摆放一些别人的商品或服务,每当有客人看了或买了这些商品或…

RocketMQ查询出重复数据,两条MessageID一样的解决办法如下

问题描述 在使用RocketMQ的可视化工具dashboard-1.0.0时,首先生产了10条数据,但是查询时却查出来了14条,有四条数据重复,重复数据MessageID和key相同,但是通过key单独查询却只能查出一条 测试代码 package com.fdw.rocketmq.producer;import org.apache.rocketmq.client…

【精通NIO】NIO介绍

一、什么是NIO NIO,全称为New Input/Output,是Java平台中用于替代传统I/O(Blocking I/O)模型的一个功能强大的I/O API。NIO在Java 1.4版本中被引入,其设计目标是提供一种非阻塞的、低延迟的I/O操作方式,以…

清华出品,开源最强,我又出手了(全网首发!)

清华出品的ChatGLM-6B自开源那刻起,GLM系列的每一次更新都受到了业界的热切关注。尤其是ChatGLM第3代开源之后,其强大和适配性让很多人惊叹,之后大家对GLM的第4代模型充满了期待。终于,今天它来了!我要为大家介绍的是这…

【YOLOv5进阶】——修改网络结构(以C2f模块为例)

一、站在巨人的肩膀上 这里我们借鉴YOLOv8源码: 上期说到,对于网络模块定义详情在common.py这个文件,如Conv、CrossConv、C3f等。本期要修改的需要参考YOLOv8里的C2f模块,它定义在YOLOv8的module文件夹的block.py文件里&#xf…

弘君资本股市资讯:增逾20倍!百亿细分龙头利好来了

5月以来,A股进入了时间短的成绩发表空档期,而百亿化工细分龙头齐翔腾达,则以一份高增的成绩预告,摆开半年报成绩预告发表序幕。 6月10日晚间,齐翔腾达发表的成绩预告显现,上半年估计完成归母净赢利1.3亿元…

【渗透测试】|dvwa命令注入乱码问题

法一: 解决方法如下: 1、按住winr,在运行框中输入cmd弹出命令行,在命令行中输入“control intl.cpl” 2、这个命令是使用control命令行工具来打开"区域和语言设置"对话框 3、选中对话框中的管理选项卡 4、可以看到这里…

理解我的积木编程思想

1 学习教程,至少7139手册2 编程实践,遇到实际问题后,在技术资料中查找关键词3 选择适合的条目找到代 码。修正,组合。

git服务器gitblit安装

1、下载 Gitblit 2、下载完后解压: 3、配制: 保存,退出编辑。 4、运行cmd,启用gitblit。 5、根据运行后的提示,也就是我们之间设置的port9990打开: 输入admin,admin就可以登录,这个账号密码&a…

iOS调整collectionViewCell顺序

效果图 原理 就是设置collectionView调整顺序的代理方法,这里要注意一点 调整过代理方法之后,一定要修改数据源,否则导致错乱。 还有就是在collectionView上面添加一个长按手势,在长按手势的不同阶段,调用collectionV…

用友U8 表单视图名查询方法

比如要获取【采购订单】表名和视图名 具体操作如下: 先打开写字板,然后进入U8的采购订单做单界面,按住键盘上的,CtrlshiftC,有的是CtrlC,点增加 然后CtrlV到写字板 key就是采购订单的值 打开SQL 输入语句…

Androidstudio项目加载不出来,显示Connect timed out

Android studio加载不出来所需要的环境依赖,99%的问题都是网络原因 解决办法有两个: 1.科学上网 2.使用国内的镜像 方法一自行解决,下面重点介绍方法二 在项目目录下找到gradle->wrapper->gradle-wrapper.properties 将项目的distributionUrl改为https://mirrors.cl…

星空如何异地组网?

网络已经成为人们生活的重要组成部分。无论是个人还是企业,都需要通过网络进行信息传输和资源共享。在传统的网络连接方式中,存在着网络限制、访问速度慢、数据安全等问题。随着科技的发展,一种全新的网络连接方式──星空异地组网&#xff0…

外贸业务员的工作日常:不止是回复询盘那么简单

1. 启动工作模式:打开电脑,迎接新的一天。首先,迅速回复客户的询盘和消息,确保每一位潜在客户都能感受到我们的专业与热情。 2. 跟进有意向的客户:对于那些未成交但表现出浓厚兴趣的客户,进行细致的跟进。…

如何做好期货投资?

期货,这个词对于很多人来说可能还是个陌生的词汇,但是,随着经济的发展和人们对金融投资的需求增加,期货投资也变得越来越受到关注。那么,如何才能做好期货投资呢? 首先,了解期货的基本知识是非…

问题:一般在管理工作复杂、面广且管理分工比较细致的单位,常采用()组织形式。 #媒体#媒体

问题:一般在管理工作复杂、面广且管理分工比较细致的单位,常采用()组织形式。 A.直线式 B.职能式 C.矩阵式 D.团队式 参考答案如图所示

Knife4j 全局鉴权需求 (在OpenAPI3规范中添加Authorization鉴权请求Header)

文章目录 引言I Knife4j 全局鉴权需求1.1 利用springdoc项目提供的customizer接口解决1.2 常见问题II 添加自定义Header参数(签名字段)see also引言 OpenAPI3规范对于Security的定义说明,主要分为两部分: 在compoents组件下定义Security的鉴权方案类型在接口级别的Operati…