应用简介

本文章是参加“HarmonyOS线上Codelabs系列挑战赛第二期：调用三方库，制作酷炫的视觉效果”活动写的一个应用介绍，活动地址： https://developer.huawei.com/consumer/cn/forum/topic/0202103392123890120?fid=0101587866109860105

本文档通过对第三方库LottieETS的调用为例，简单介绍了如何从零开始在自己的工程中使用第三方库。

lottieETS是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。

效果预览

![效果预览]

功能简介

中间图像部分就是通过调用第三方LottieETS库显示的json动画，这部分是图像预览区。

![图像预览区]

图像上方数字部分左侧绿色显示的部分为动画当前帧序号，右侧黑色部分显示的是动画的总帧数。

![当前帧和总帧数]

上面图片表示的是动画总帧数426，当前播放到176帧。图像下方进度条，更加形象地显示了当前动画播放的进度，播放到末尾时，重新从头开始播放。

![进度条]

此外，拖动进度条上的滑块，还可以手动控制动画跳转的位置。

最下方的按钮，代表播放或暂停当前动画。

![播放暂停按钮]

库的导入

新建工程后，需要导入第三方库后，才能在工程中使用，此时需要电脑联网，否则无法在线导入第三方库。导入库，首先打开DevEcoStudio开发工具底部的Terminal窗口，默认路径就是当前工程的根目录，

1. 设置 OpenHarmony推荐的npm专用仓库。

npm config set @ohos:registry=https://repo.harmonyos.com/npm/

如果DevEcoStudio版本高于3.0，则可以跳过这步。具体查看方法在Help->About菜单。

1. 在引用的类中导入lottieETS

import lottie from '@ohos/lottieETS'

库的使用

1. 构建渲染上下文

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

1. 将动画的json文件放到ets目录下的某个位置。示例json路径为entry/src/main/ets/common/lottieETS/grunt.json，此时动画的路径就是common/lottieETS/grunt.json，如果是放在别的地方，路径值一定是要取绝对路径中ets后面的部分。

2. 将渲染上下文与画布关联

Canvas(this.renderingContext)
  .width(CommonConstants.CONTAINER_WIDTH)
  .aspectRatio(CommonConstants.ASPECT_RATIO_176)
  .backgroundImageSize(ImageSize.Cover)
  .onDisAppear(() => {
    lottie.destroy(this.animateName);
  })

1. 加载动画

.onAppear(() => {
  this.animateItem = lottie.loadAnimation({
    container: this.renderingContext,
    renderer: 'canvas',
    loop: true,
    autoplay: true,
    name: this.animateName,
    path: this.PATH,
  });
})

1. 控制动画

.onAppear(() => {
  this.animateItem = lottie.loadAnimation({
    container: this.renderingContext,
    renderer: 'canvas',
    loop: true,
    autoplay: true,
    name: this.animateName,
    path: this.PATH,
  });
})

代码解析

通过LottieETS的函数，我们可以获取动画的总帧数，需要加参数true。

this.totalFrames = this.animateItem.getDuration(true);

为加载的动画增加了一个回调函数，并指定类型为enterFrame，代表每执行一帧就调用一次，在这里我们可以判断当前运行到哪一帧了，注意需要在调用外部执行var that = this;因为函数内部的this和外部的this指定的不是同一个上下文。

var that = this;
this.animateItem.addEventListener("enterFrame",function(){
  // TODO something
  that.currentFrame += 1
  if(that.currentFrame > that.totalFrames) {
    that.currentFrame = 0;
  }
//        console.log("currentFrame=" + that.currentFrame)
});

通过拖动进度条，可以指定动画跳转到指定位置，我们在Slider的onChange回调中调用goToAndPlay和goToAndStop。

Slider({
  value: this.currentFrame,
  min: 0,
  max: this.totalFrames,
  style: SliderStyle.OutSet
})
.showTips(true)
.width('90%')
.onChange((value: number, mode: SliderChangeMode) => {
  this.currentFrame = value;
  if(this.isPlaying) {
    this.animateItem.goToAndPlay(value,true)
  } else {
    this.animateItem.goToAndStop(value,true)
  }
})

我们还做了一个控制的图像播放的按钮，具体代码如下

Button({ type: ButtonType.Normal, stateEffect: false }) {
  Image(this.isPlaying ? $rawfile('control/pause.png') : $rawfile('control/play.png'))
    .objectFit(ImageFit.Cover)
    .height(80)
    .width(80)
    .renderMode(ImageRenderMode.Original)
}
.backgroundColor(Color.Transparent)
.onClick(() => {
  if(this.isPlaying) {
    lottie.pause();
  } else {
    lottie.play();
  }

  this.isPlaying = !this.isPlaying;
})

项目总结

在DevEco开发工具中调用第三方库不仅很简单，而且丰富了开发资源，真正让开发者事半功倍。

总结一下使用第三方库，就两步：

1. 导入库
2. 调用库