OpenHarmony实战开发-如何实现进入页面,点击动画卡片,动画播放并且文本发生变化。

介绍

Lottie是一个适用于OpenHarmony的动画库,它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画,并在移动设备上进行本地渲染, 可以在各种屏幕尺寸和分辨率上呈现,并且支持动画的交互性,通过添加触摸事件或其他用户交互操作,使动画更加生动和具有响应性。

效果图预览

在这里插入图片描述
使用说明:

1.进入页面,点击动画卡片,动画播放并且文本发生变化。

实现思路

1.添加Lottie模块。

{"name": "lottieview","version": "1.0.0","description": "Please describe the basic information.","main": "Index.ets","author": "","license": "Apache-2.0","dependencies": {// Lottie模块"@ohos/lottie": "2.0.0",}
}

2.将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中,使用相对路径无法读取)。

3.进入页面,通过Canvas的onReady函数加载动画,点击播放动画,动画执行播放,文本刷新。

// 加载动画loadAnimation(autoplay: boolean) {if (this.animateItem !== null) {this.animateItem.destroy();this.animateItem = null;}// TODO:知识点:lottie.loadAnimation将json数据生成动画this.animateItem = lottie.loadAnimation({container: this.politeChickyController,renderer: 'canvas',loop: false,autoplay: autoplay,name: this.politeChicky,path: this.politeChickyPath,initialSegment: [FRAME_START, FRAME_END]})}build() {Stack({ alignContent: Alignment.TopStart }) {// 动画Canvas(this.politeChickyController).width($r('app.integer.canvas_size')).height($r('app.integer.canvas_size')).backgroundColor($r('app.color.ohos_id_color_palette2')).borderRadius($r('app.string.ohos_id_corner_radius_default_m')).onReady(() => {this.loadAnimation(false);}).onClick(() => {this.loadAnimation(true);this.times++;})// 响应动画的文本Text(this.textArray[this.times % TEXT_DATA_LENGTH]).fontSize($r('app.string.ohos_id_text_size_headline')).margin($r('app.string.ohos_id_elements_margin_vertical_m')).fontColor(Color.White)}.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })}
}

高性能知识点

不涉及。

工程结构&模块类型

lottieview                                         // har类型
|---view
|   |---LottieView.ets                             // 视图层-应用主页面

模块依赖

本实例依赖common模块来实现日志的打印、资源 的调用、动态路由模块来实现页面的动态加载以及Lottie模块

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

在这里插入图片描述
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

一、入门必看

1.应用开发导读(ArkTS)
2………
在这里插入图片描述

二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.系统定义
2.技术架构
3.技术特性
4.系统安全
5…

在这里插入图片描述

三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3…

在这里插入图片描述

四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
在这里插入图片描述

五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
在这里插入图片描述

更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

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

相关文章

C++stack,queue,priority_queue容器(个人笔记)

C栈队列优先级队列 1.熟悉stack接口以及使用1.1stack的接口1.2stack的模拟实现1.3stack的一些笔试题 2.熟悉queue接口以及使用2.1queue的接口2.2queue的模拟实现2.3queue的笔试题 3.熟悉priority_queue的接口以及使用(底层堆)3.1priority_queue的接口3.2…

spdlog C++日志管理 安装和下载

下载地址 https://github.com/gabime/spdlog?tabreadme-ov-file 使用git拉取代码 按照操作进行编译 点击spdlog.sln,用vs2019打开,进行编译debug x64 每项都编译一下,会生成安装包 安装包下载路径 https://download.csdn.net/download…

【AI学习中常见专业英文缩写词的解释】

前言: 为了看着不无聊,文中插入了一些AI生成的狗图片 AI(Artificail Intelligence)人工智能: 让机器模拟和展示人类智能的技术。 GAI(Generative Artificail Intelligence)生成式人工智能: 利用复杂的算法、模型和规则,从大规…

mysql数据库表的数据显示到前端tableView

首先我们在ui视图设计中引入TableView, 定义一个model QSqlQueryModel *modelnew QSqlQueryModel(ui->tableView);model->setQuery(query);//将查询结果绑定到模型上ui->tableView->setModel(model); 将tableView内容设置成model然后就可以出现数据库的数据。示…

2.8 构建gradle环境

构建gradle环境 目录一、安装Java Development Kit (JDK)二、下载Gradle三、解压Gradle四、配置环境变量五、验证安装六、gradle构建java项目七、eclipse配置gradle 目录 一、安装Java Development Kit (JDK) Gradle是基于Java开发的,所以首先需要安装JDK。你可以从…

春秋云境:CVE-2022-32991[漏洞复现]

从CVE官网查询该漏洞相关信息 该漏洞是由于welcome.php中的eid参数包含了SQL注入漏洞 则我们的目标就在于寻找welcome.php地址以及相关的可注入eid参数 开启靶机 先在页面正常注册、登录一个账号。密码随便填 进入了home目录,这里有三个话题可以选择开启 随便选…

【服务器部署篇】Linux下Nginx的安装和配置

作者介绍:本人笔名姑苏老陈,从事JAVA开发工作十多年了,带过刚毕业的实习生,也带过技术团队。最近有个朋友的表弟,马上要大学毕业了,想从事JAVA开发工作,但不知道从何处入手。于是,产…

【MySQL】20. 使用C语言链接

mysql connect mysql的基础,我们之前已经学过,后面我们只关心使用 要使用C语言连接mysql,需要使用mysql官网提供的库,大家可以去官网下载 我们使用C接口库来进行连接 要正确使用,我们需要做一些准备工作: …

从零构建生产级 AI 应用 ChatWithPDF

前言 目前 AIGC 的浪潮很火,不管你是什么方向的程序员,都可以通过大模型去构建自己的 App,但是搜索资料学习的时候发现: 目前构建 AI 应用的中文资源比较少,大多数都是英文的。教程大多是 demo 级别,没有…

claude3会员版怎么在国内充值

由于国内尚未正式开放注册,许多用户可能感到有些不便。但在这个时代,如果没有几个得心应手的AI工具链接,似乎都与时代脱节了。今天推荐一个非常实用的Claude3镜像站点: https://hiclaude3.cn 这个站点不仅拥有简洁明了的对话操作…

车联网大数据与人工智能一体化:开启智慧出行新时代

随着物联网技术的快速发展,车联网已经成为了汽车行业的重要趋势之一。而在车联网的发展过程中,大数据和人工智能的应用也日益成为关键因素。本文将探讨如何将大数据与人工智能一体化应用于车联网,以实现智慧出行的目标。 尤其是近来国内的华为…

JavaSE备忘录(未完)

文章目录 基本数据类型println 小知识除法( / ) 和 Infinity(无穷) 小知识除法InfinityInfinity 在除法中正负判断 求余(%) 小知识 基本数据类型 除 int、char 的包装类分别为 Integer、Character 外,其余基本数据类型的第一个字母大写就是它的包装类。 println 小…

spingboot3项目创建入门体验

spingboot3流程体验 项目简易打包部署 Spring Initializr 创建向导 spingboot3流程体验 先在IDEA创建一个新的空项目 然后在项目中创建一个模块 在pom.xml文件中添加maven配置继承spingboot3父项目和web开发场景启动器 创建启动springboot项目的主入口程序文件 import org.sp…

初识C++ · 类和对象(中)(1)

目录 1 类的6个默认成员函数 2 构造函数 3 析构函数 3 拷贝构造函数 1 类的6个默认成员函数 class Date { public:private:}; 这是一个空类,试问里面有什么? 可能你会觉得奇怪,明明是一个空类,却问里面有什么。其实一点也不…

数据融合概念解析:特征融合与特征交互

特征融合与特征交互的区别 我是目录 特征融合与特征交互的区别前言三者关系三者定义特性融合(Feature Fusion):特征拼接(Feature Concatenation):特征交互(Feature Interaction): 特征融合和特征交互关键的不同点数据处理目的应用 总结 前言 遥感系列第14篇。遥感图像处理方向…

js解密心得,记录一次抓包vue解密过程

背景 有个抓包结果被加密了 1、寻找入口,打断点 先正常请求一次,找到需要的请求接口。 寻找入口,需要重点关注几个关键字:new Promise 、new XMLHttpRequest、onreadystatechange、.interceptors.response.use、.interceptors.r…

c++的学习之路:25、map与set

摘要 本文中说一下map与set的使用 目录 摘要 一、关联式容器 二、键值对 三、map 1、map的介绍 2、map的使用 1、map的模板参数说明: 2、map的构造 3、map的迭代器 4、map的容量与元素访问 5、map中元素的修改 6、代码使用 ​编辑 三、总结 四、se…

PMM2 MySQL监控管理工具

目录 1. PMM介绍 2. 安装PMM服务端 2.1 安装docker 2.1.1 下载docker 2.1.2 上传docker包 2.1.3 启动守护进程 2.1.4 查看docker状态 2.2 安装PMM 2.2.1 下载镜像 2.2.2 load镜像 2.2.3 查看镜像 2.2.4 创建容器 2.2.5 运行镜像 2.2.6 验证PMM服务器 2.2.7 删除…

外包干了16天,技术倒退明显

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近6年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能…

【剪映专业版】09定格、倒放、镜像、旋转、裁剪

视频课程:B站有知公开课【剪映电脑版教程】 分别为定格、倒放、镜像、旋转、裁剪 定格 时间指示器移动到需要定格的地方,点击定格,自动生成一张图片,时长为3秒。 定格出来的画面,可以任意调整长短时间。 如果需要导…