基于lottie的动画资源加载

zbw_apple

发布于 2024-9-26 08:48

1.2w浏览

0收藏

简介

lottie是一个适用于HarmonyOS的动画库，它可以解析json格式的动画，并在移动设备上进行本地渲染。

下载安裝：ohpm install @ohos/lottie。

场景一：本地资源加载

path相对路径加载

项目内entry/src/main/ets文件夹下创建和pages同级的目录common。

将需要播放的json文件放在目录common下。

基于lottie的动画资源加载-鸿蒙开发者社区

path路径加载只支持文件夹下的相对路径，不能使用./或者../的相对路径，会导致动画加载不出来

正确格式：path: 'common/lottie/grunt.json'。
错误格式：path: './common/lottie/grunt.json'。

核心代码

Button('播放') 
  .onClick(() => { 
    if (this.animateItem == null) { 
      this.animateItem = lottie.loadAnimation({ 
        container: this.mainCanvasRenderingContext, 
        renderer: 'canvas', // canvas 渲染模式 
        loop: 10, 
        autoplay: true, 
        name: this.animateName, 
        contentMode: 'Contain', 
        path: 'common/lottie/grunt.json', //路径加载动画只支持entry/src/main/ets 文件夹下的相对路径 
      }) 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

ResourceManager

animationData参数：可结合ResourceManager进行读取资源文件内容进行设置。

下图为resource的路径。

基于lottie的动画资源加载-鸿蒙开发者社区

创建一个对象储存从rawfile中获取的数据。

private mLottieData: object | null = null;1.

获取rawfile下得文件，获取red_heart.json里的内容，使用utf-8解码得到JSON，解析JSON后得到数据。

aboutToAppear() { 
  let resStr = new util.TextDecoder('utf-8', { ignoreBOM: true }); 
  let context = getContext(this).createModuleContext('entry') as common.UIAbilityContext 
  context.resourceManager.getRawFile('red_heart.json', (err: Error, data: Uint8Array) => { 
    if (data === null || data === undefined || data.buffer === undefined) { 
      return; 
    } 
    let lottieStr = resStr.decode(new Uint8Array(data.buffer)); 
    this.mLottieData = JSON.parse(lottieStr); 
  }) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

给animationData属性赋值，加载数据。

Button('播放') 
  .onClick(() => { 
    if (this.animateItem == null) { 
      this.animateItem = lottie.loadAnimation({ 
        container: this.mainCanvasRenderingContext, 
        renderer: 'canvas', // canvas 渲染模式 
        loop: 10, 
        autoplay: true, 
        name: this.animateName, 
        contentMode: 'Contain', 
        animationData: this.mLottieData, 
      }) 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

场景二：不同的网络资源加载

uri资源加载

uri 参数：支持加载网络资源和通过URI路径方式加载动画，该方式需申请 ohos.permission.INTERNET，ohos.permission.GET_NETWORK_INFO两个权限。

加载网络json

将配置好的json网络链接以字符串形式加到uri属性。

Button('加载网络Json') 
  .onClick(() => { 
    if (this.jsonNameItem == null) { 
      this.jsonNameItem = lottie.loadAnimation({ 
        container: this.downLoadJsonContext, 
        renderer: 'canvas', // canvas 渲染模式 
        loop: 10, 
        autoplay: true, 
        name: this.jsonName, 
        contentMode: 'Contain', 
        uri: 'https://assets7.lottiefiles.com/packages/lf20_sF7uci.json', 
      }) 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

网络zip

将配置好的zip包链接以字符串形式加到uri属性。

Button('加载网络ZIP') 
  .onClick(() => { 
    if (this.zipNameItem == null) { 
      this.zipNameItem = lottie.loadAnimation({ 
        container: this.downLoadZipContext, 
        renderer: 'canvas', // canvas 渲染模式 
        loop: 10, 
        autoplay: true, 
        name: this.zipName, 
        contentMode: 'Contain', 
        uri: 'https://smarthome-drcn.dbankcdn.com/device/guide/KW38/template/lottie/lottie.zip', 
      }) 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

网络img

将配置好的img链接以字符串形式加到uri属性。

Button('加载网络IMG') 
  .onClick(() => { 
    if (this.imgNameItem == null) { 
      this.imgNameItem = lottie.loadAnimation({ 
        container: this.downLoadImgContext, 
        renderer: 'canvas', // canvas 渲染模式 
        loop: 10, 
        autoplay: true, 
        name: this.imgName, 
        contentMode: 'Contain', 
        uri: "网络地址", 
      }) 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

场景三： hsp加载

准备好shareLibrary内得资源，把动画json资源文件放在rawfile下进行读取加载。

使用ResourceManager加载方式（场景一内），调用getContext注意需要加载数据得模块，因为需要使用到得是sharedLibrary内得资源，所以createModuleContext得模块为'sharedLibrary'，getRawFile指定模块内需要加载哪个json文件。

async aboutToAppear() { 
  let resStr = new util.TextDecoder('utf-8', { ignoreBOM: true }); 
  let context = getContext(this).createModuleContext('sharedLibrary') as common.UIAbilityContext 
  context.resourceManager.getRawFile('data.json', (err: Error, data: Uint8Array) => { 
    if (data === null || data === undefined || data.buffer === undefined) { 
      return; 
    } 
    let lottieStr = resStr.decode(new Uint8Array(data.buffer)); 
    this.mLottieData = JSON.parse(lottieStr); 
  }) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

在HSP场景下，lottie加载动画json资源文件需通过animationData方式加载。

let contexts = getContext(this).createModuleContext('sharedLibrary') as common.UIAbilityContext 
this.animateItem = lottie.loadAnimation({ 
  container: this.canvasRenderingContext, 
  renderer: 'canvas', // canvas 渲染模式 
  loop: true, 
  autoplay: true, 
  context: contexts, 
  name: this.animateName, 
  animationData: this.mLottieData, 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.