Harmony OS DevEco Studio 如何导入第三方库(以lottie为例)?-- HarmonyOS自学2

在做鸿蒙开发时,离不开第三方库的引入 

一.有哪些支持的Harmony OS的

第三方库?

 第三方库下载地址:

1  tpc_resource: 三方组件资源汇总

2  OpenHarmony三方库中心仓 

二. 如何加入到DevEco Studio工程

  以 lottie为例

   OpenHarmony-TPC/lottieArkTS  

  1. 安装

安装lottie库,如下图所示

cke_16682.png

    1) 在DevEco Studio的底部找到"Terminal"

    2) 输入:ohpm install @ohos/lottie

    3)输出:install completed in xxx s,就表示安装成功

2 查看工程依赖情况

   1)在目录"oh_modules" 已经新增了 lottie

   2)  在工程的oh_package.json5文件中的"dependencies"中也增加了lottie

   

cke_38450.png

三.  如何使用

1.在相应的类中引入组件:

import lottie from '@ohos/lottie'

2.构建渲染上下文

  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings)

3.json文件引入

將动画需要的json文件放到pages同级别目录下,然后引用。(json路径为entry/src/main/ets/common/lottie/data.json)

注意:json文件路径不能使用 ./ 或者 ../ 等相对路径,相对路径获取不到动画源数据,会导致动画加载不出来,

传递给loadAnimation 方法的路径是相对于pages父文件夹为基准的,而index页面内引入的相对路径的动画是以index.ets文件为基准的,两者基准不一致。

所以如果json文件放置在pages文件夹下,路径应为 'pages/common/data.json' 样式

  private path:string = "common/lottie/data.json"或private jsonData:string = {"v":"4.6.6","fr":24,"ip":0,"op":72,"w":1000,"h":1000,"nm":"Comp 2","ddd":0,"assets":[],...}

4.关联画布

       Canvas(this.mainCanvasRenderingContext).width('50%').height(360 + 'px').backgroundColor(Color.Gray).onReady(()=>{//抗锯齿的设置this.mainCanvasRenderingContext.imageSmoothingEnabled = true;this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'})

注意:canvas设置的宽高比例建议和动画json资源里面的宽高比例一致,如:json动画资源里的宽高比例是 1:2 ,则canvas设置的宽高也是 1:2

  • 想要的抗锯齿效果:mainCanvasRenderingContext.imageSmoothingEnabled = true 与 mainCanvasRenderingContext.imageSmoothingQuality = 'medium'

  • 动画绘制前会对canvas画布进行清空处理,画布清空后再绘制动画。

5.加载动画

  • 加载动画的时机需要注意,点击按钮加载动画可按照正常逻辑放在点击事件内,如果想要实现进入页面自动播放动画,需要结合Canvas组件的onReady()生命回调周期实现,加载动画时机需放置在onReady()生命周期回调内或及之后。
  • 同一Canvas组件加载多次/不同动画资源,需要手动销毁动画(lottie.destroy()/animationItem.destroy()),之后才可再次加载其他动画资源。
    lottie.destroy('2016'); //加载动画前先销毁之前加载的动画this.animationItem = lottie.loadAnimation({container: this.mainCanvasRenderingContext,  // 渲染上下文renderer: 'canvas',                          // 渲染方式loop: true,                                  // 是否循环播放,默认trueautoplay: true,                              // 是否自动播放,默认truename: '2016',                                // 动画名称contentMode: 'Contain',                      // 填充的模式frameRate: 30,                               //设置animator的刷帧率为30imagePath: 'lottie/images/',                 // 加载读取指定路径下的图片资源path: this.path,                             // json路径initialSegment: [10,50]                      // 播放的动画片段})或      lottie.loadAnimation({container: this.mainCanvasRenderingContext,  // 渲染上下文renderer: 'canvas',                          // 渲染方式loop: true,                                  // 是否循环播放,默认trueautoplay: true,                              // 是否自动播放,默认truecontentMode: 'Contain',                      // 填充的模式frameRate: 30,                               //设置animator的刷帧率为30animationData: this.jsonData,                // json对象数据initialSegment: [10,50]                      // 播放的动画片段})或lottie.loadAnimation({uri: "https://assets7.lottiefiles.com/packages/lf20_sF7uci.json",  // uri网络资源container: this.canvasRenderingContext,                            // 渲染上下文renderer: 'canvas',                                                // canvas 渲染模式loop: true,                                                        // 是否循环播放,默认trueautoplay: true,                                                    // 是否自动播放,默认truename: this.animateName,                                            // 动画名})
  • 加载动画时,path 参数和 animationData 参数,二者选其一。
  • path 参数:只支持加载entry/src/main/ets 文件夹下的相对路径,不支持跨包查找文件。
  • animationData 参数:可结合ResourceManager进行读取资源文件内容进行设置。
  • uri 参数:支持加载网络资源和通过URI路径方式加载动画,该方式需申请 ohos.permission.INTERNET,ohos.permission.GET_NETWORK_INFO两个权限。
  • 加载外部资源图片:应用默认读取沙箱路径下的图片,如果沙箱下没有对应的资源图片,则会继续读取rawfile下的对应资源图片

具体可参见:OpenHarmony-TPC/lottieArkTS  

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

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

相关文章

nginx 新建一个 PC web 站点

注意:进行实例之前必须完成nginx的源码编译。(阅读往期文章完成步骤) 1.编辑nginx的配置文件,修改内容 [rootlocalhost ~]# vim /usr/local/nginx/conf/nginx.conf 2.创建新目录/usr/local/nginx/conf.d/,编辑新文件…

基于飞腾平台的Hive的安装配置

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力,聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域,包含了应用使能套件、软件仓库、软件支持、软件适…

通信工程学习:什么是PCM脉冲编码调制、DPCM差分脉冲编码调制、ADPCM自适应差分脉冲编码调制

PCM脉冲编码调制、DPCM差分脉冲编码调制、ADPCM自适应差分脉冲编码调制 PCM、DPCM、ADPCM是音频编码技术中的三种重要方式,它们在音频信号的数字化、压缩和传输中起着关键作用。以下是对这三种技术的详细解释: 一、PCM(Pulse Code Modulatio…

2024数学建模国赛选题建议+团队助攻资料(已更新完毕)

目录 一、题目特点和选题建议 二、模型选择 1、评价模型 2、预测模型 3、分类模型 4、优化模型 5、统计分析模型 三、white学长团队助攻资料 1、助攻代码 2、成品论文PDF版 3、成品论文word版 9月5日晚18:00就要公布题目了,根据历年竞赛题目…

爬虫 4399 小游戏

import requests from bs4 import BeautifulSoup import pymongo# 发起请求获取数据 res requests.get("https://www.4399.com/") # 解码数据 content res.content.decode("gbk") # 解析数据 soup BeautifulSoup(content, parserhtml.parser)# 获取推荐…

[C#学习笔记]注释

官方文档&#xff1a;Documentation comments - C# language specification | Microsoft Learn 一、常用标记总结 1.1 将文本设置为代码风格的字体&#xff1a;<c> 1.2 源代码或程序输出:<code> 1.3 异常指示:<exception> 1.4 段落 <para> 1.5 换行&…

Reflection 70B:震撼AI行业的开源模型

随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;开源与闭源模型的竞争变得越来越激烈。近日&#xff0c;Reflection 70B模型的发布在AI行业引发了巨大的震动。这款拥有70亿参数的开源模型不仅在多项基准测试中取得了优异成绩&#xff0c;还在很多情况下超越…

滑动窗口系列(同向双指针)/9.7

新的解题思路 一、三数之和的多种可能 给定一个整数数组 arr &#xff0c;以及一个整数 target 作为目标值&#xff0c;返回满足 i < j < k 且 arr[i] arr[j] arr[k] target 的元组 i, j, k 的数量。 由于结果会非常大&#xff0c;请返回 109 7 的模。 输入&…

Gemini AI 与 ChatGPT:哪个更适合为我策划婚礼?

我在六月订婚后&#xff0c;一心想着婚礼钟声&#xff0c;但在看到这些婚礼场地报价后&#xff0c;更像是警铃声响起。 “叮咚”已经被重新混音成“哗啦啦”——我需要帮助。 我甚至不知道如何 开始 计划婚礼。第一步是什么&#xff1f;我需要优先考虑什么&#xff1f;哪些任…

【阿里云】个人认证与公司认证

个人认证和企业认证的区别 更新时间&#xff1a;2024-05-20 09:32:52 本文档主要介绍个人认证账号和企业认证账号的区别。 账号实名认证分为个人实名认证和企业实名认证。 个人账号认证&#xff0c;请选择认证类型为 个人&#xff0c;支持个人支付宝授权认证和个人扫脸认证。…

使用cage工具包生成验证码

目录 1. 导入依赖2. 控制类3. 测试 1. 导入依赖 <!-- 验证码工具 --><dependency><groupId>com.github.cage</groupId><artifactId>cage</artifactId><version>1.0</version></dependency>2. 控制类 RestControl…

探索 RAD:5 个最佳实践案例解析

天下武功&#xff0c;唯快不破&#xff01;应用开发&#xff0c;唯速称王&#xff01; 在当今快速发展的科技环境中&#xff0c;企业面临的挑战不断升级。传统的应用开发方法往往因其复杂的流程和较长的开发周期而无法满足快速变化的市场需求。在这种背景下&#xff0c;快速应…

前端vue项目服务器部署(docker)

前端vue项目服务器部署(docker) 步骤 1: 导入 Nginx Docker 镜像 1、上传 Nginx Docker 镜像 将你的nginx-alpine.tar包上传到服务器上。假设路径为 /var/v3-admin-vite/nginx-alpine.tar。 scp -r "C:\Users\86184\Desktop\v3-admin-vite" root110.40.179.182:/…

两个长整数字符串求和(不允许使用ES6+)

两个长整数字符串求和(不允许使用ES6), 面试手撸代码遇到到这个问题 1. 实现方式第一种 // 短整数字符串前边补 0; num需要补 0 的短整数字符串, len 长整数字符串的长度 function fillZero (num, len) {let str num.toString();if (str.length < len) {str 0.repeat(…

Math Reference Notes: 三角函数术语的几何学解释

在三角函数中&#xff0c;“正”、“余”、“弦”、"割"这些词汇源自古代的几何学术语&#xff0c;它们与三角形的边和角的关系密切相关。 1. 弦&#xff08;sin&#xff0c;cos的含义&#xff09;&#xff1a; “弦”字来源于圆中的“弦线”&#xff0c;即连接圆周…

Mybatis【分页插件,缓存,一级缓存,二级缓存,常见缓存面试题】

文章目录 MyBatis缓存分页延迟加载和立即加载什么是立即加载&#xff1f;什么是延迟加载&#xff1f;延迟加载/懒加载的配置 缓存什么是缓存&#xff1f;缓存的术语什么是MyBatis 缓存&#xff1f;缓存的适用性缓存的分类一级缓存引入案例一级缓存的配置一级缓存的工作流程一级…

【JavaSE基础】Java 基础知识

Java 转义字符 Java 常用的转义字符 在控制台&#xff0c;输入 tab 键&#xff0c;可以实现命令补全 转义字符含义作用\t制表符一个制表位&#xff0c;实现对齐的功能\n &#xff1a;换行符\n换行符一个换行符\r回车符一个回车键 System.out.println(“韩顺平教育\r 北京”);&…

java实现,PDF转换为TIF

目录 ■JDK版本 ■java代码・实现效果 ■POM引用 ■之前TIF相关的问题&#xff08;两张TIF合并&#xff09; ■对于成果物TIF&#xff0c;需要考虑的点 ■问题 ■问题1&#xff1a;无法生成TIF&#xff0c;已解决 ■问题2&#xff1a;生成的TIF过大&#xff0c;已解决 …

RAG与LLM原理及实践(14)---RAG Python 前端构建技术Flask

目录 背景 Flask 简介 Flask 的特点 flask 安装 Flask python server 端处理 app 资源映射 router概念 Flask 客户端处理 Jinja2 概述 具体语法 实例 python 后端 代码 前端相关代码 代码解释 运行 check 启动日志 背景 本专栏之前的文章都在描述RAG后台的搭…

MySQL之DQL-分组函数

1、分组函数 1. 分组函数语法 分组函数也叫聚合函数。是对表中一组记录进行操作&#xff0c;每组只返回一个结果。我们只讲如下5个常用的分组函数&#xff1a; 分组函数 含义 MAX 求最大值 MIN 求最小值 SUM 求和 AVG 求平均值 COUNT 求个数 分组函数的语法如下…