为有牺牲多壮志，敢教日月换新天。

HarmonyOS：三方库的基本使用（1）

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18504527
➤如果链接不是为敢技术的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

一、获取三方库
1、三方库是开发者对系统能力的封装和扩展，可以实现代码复用，提升开发效率。在进行HarmonyOS应用开发时，可以通过两种渠道获取开源第三方库：
（1）、通过Gitee社区的仓库。网址：
（2）、通过OpenHarmony三方库中心仓。网址：

2、三方库分类和概览：Gitee中收集了一些已经开源的三方库资源，每一种三方库都有其详细的使用说明，欢迎应用开发者参考和使用，同时也欢迎开发者贡献自己的开源组件库。这里列举部分三方库资源：

二、ohpm使用指导

1、请参考我写的另一篇博文：《HarmonyOS：ohpm使用指导》

2、官方文档：《下载安装三方库》

三、使用三方库举例

1、ohpm-repo是一个搭建轻量级的HarmonyOS三方库私有仓服务的工具。它与ohpm包管理器兼容，用来存储和管理您独有的三方库，以保证这些三方包的私有性。同时，便于这些三方库能在开发团队内部共享复用，从而提升团队的开发效率。
（1）、ohpm使用指导：
（3）、下载HarmonyOS NEXT版本的开发工具，选择ohpm-repo 5.0.7：
2、本文以lottie这个三方库为例，介绍如何使用ohpm下载、安装并使用这个三方库。
@ohos/lottie介绍：是一个动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的JSON格式的动画，并在移动设备上进行本地渲染。即美工设计师做了一个动画JSON文件，可以使用lottie进行一个渲染，就可以实现一个炫酷的动画效果。

3、@ohos/lottie的基本使用：

（1）、 下载和安装@ohos/lottie：使用ohpm包管理工具，下载和安装@ohos/lottie。

（2）、 @ohos/lottie具体使用：阅读三方库的指导文档，引用三方库，按指导文档步骤。

 4、具体操作：

（1）、确定已经安装了ohpm，在终端输入:

ohpm -v

显示ohpm的版本则可以确定ohpm已经安装且环境变量配置正确。

（2）、终端输入将lottie三方库下载下来，当然可以在项目根目录直接安装。但是更推荐的方式是在具体使用的模块根目录去安装。可以在IDE的控制台中跳转到指定模块。如entry模块，然后在终端输入：ohpm会自动帮你下载这个包。特别注意：是在DevEco Studio的底部Terminal菜单输入下面命令。

ohpm install @ohos/lottie

（3）、安装完成后，可以在oh-package.json5配置文件中，找到lottie的配置信息和对应的版本号，也可以在项目模块的包管理目录下，找到这个包的存放位置，这样就成功地将lottie导入到了项目模块中。

（4）、阅读lottie的详细使用指导文档：
四、引入@ohos/lottie流程：
@ohos/lottie原理概述：实际上就是将AE软件导出的JSON文件，转换为一个动画，并在屏幕上进行显示。要实现这样一个流程，需要传入两个重要参数：
数据源：美工设计师给到的JSON文件。
渲染器：HarmonyOS提供的Canvas画布组件。
lottie在其中所起的作用就类似翻译过程，把JSON转换为渲染器可以识别的内容，利用Canvas画布组件，就可以将JSON文件中的动画效果绘制到页面上进行显示。

具体代码实现过程：
1、构建渲染上下文：导入依赖模块后，需要构建一个渲染上下文对象，renderingContext就是构建的上下文对象，其中renderingSettings是入参。

2、准备JSON文件：这个JSON文件就是动画的数据源。根据其描述的点坐标和具体行为，在Canvas画布上绘制一个闪烁的五角星动画。

3、关联画布：将第1步创建的上下文对象和画布进行关联，这里是将上下文对象renderingContext传入Canvas画布中。这里还要给画布设置一个初始图片背景。

4、加载动画：完成上述操作后，就可以进行动画的加载。这里需要传入三个参数。
（1）、container：上下文对象，传入的是renderingContext，将其与Canvas画布关联。
（2）、render：渲染方式，传入的是canvas画布方式。
（3）、path：JSON文件路径，
还有一些可选参数：loop、autoplay等。

5、控制动画：lottie还提供了很多接口，方便开发者对动画进行控制。

五、代码实操：

三方库资源汇总：https://gitee.com/openharmony-tpc/tpc_resource

OpenHarmony三方库中心仓：https://ohpm.openharmony.cn

@ohos/lottie的使用：https://gitee.com/openharmony-tpc/lottieETS

（1）、首先，entry模块等oh-packgage.json5文件中，可以查看引入的lottie版本：
{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "entry",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@ohos/lottie": "2.0.0",
    "@ohos/library": "file:../library"
  }
}

（2）、导入库：

import lottie, { AnimationItem } from '@ohos/lottie';

（3）、构建上下文对象renderingContext，其中renderingSettings作为其入参:

  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

（4）、将创建的上下文对象和画布进行关联：

Canvas(this.renderingContext)
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() => {
            lottie.destroy(this.animateName);
          })

（5）、关联之后，就可以进行动画的加载，主要需要传入三个参数：上下文对象container、渲染方式renderer、JSON文件路径path。

 this.animateItem = lottie.loadAnimation({
            container: this.renderingContext,
            renderer: 'canvas',
            loop: 10,
            autoplay: true,
            name: this.animateName,
            path: 'common/lottie/data.json'
          });

（6）、最后，可以使用lottie的API控制动画的播放与暂停。

lottie.play();
lottie.pause();

源码下载：ThirdPartyLibrary.zip

posted @ 2024-10-26 21:13  为敢技术  阅读(49)  评论(0)  编辑  收藏  举报