HarmonyOS鸿蒙Next中ArkTS实现PAG动画

您好，可以采取以下方式解决：

一、相关背景知识

• PAG（可移植动画图形）是一种开源的动画记录格式。PAG文件可以通过AE插件PAGExporter创建并导出，并且可以在桌面端预览工具PAGViewer中进行实时预览，该工具可以从pag.io获取。
• libpag是一个用于实时渲染PAG文件的库，支持在多个平台上渲染矢量和位图动画。[@tencent/libpag](https://gitcode.com/gh_mirrors/li/libpag)和[@ohos/libpag](https://gitcode.com/openharmony-sig/ohos_libpag)均可以实现实时渲染PAG文件的功能。在@tencent/libpag实现OpenHarmony集成之前，基于@tencent/libpag修改产生了适用于OpenHarmony系统的@ohos/libpag。目前，@tencent/libpag支持iOS、Android、OpenHarmony、macOS、Windows、Linux和Web平台，@ohos/libpag已不再维护。

二、解决方案 在HarmonyOS中可以使用@tencent/libpag库实现PAG动图播放的功能。

1. 将@tencent/libpag添加到项目中：

   • 在应用模块的oh-package.json5文件中加入以下依赖项声明：

     "dependencies": {
       "[@tencent](/user/tencent)/libpag": "^4.4.27"
     }
     

   • 执行安装命令以更新项目依赖：

     ohpm install
     

2. 下列代码段展示了如何在一个应用中加载和播放一个PAG动画文件，并提供了简单的用户交互来控制动画的播放和暂停：

   import * as pag from '[@tencent](/user/tencent)/libpag'
   import { PAGView } from '[@tencent](/user/tencent)/libpag'
   
   [@Entry](/user/Entry)
   [@Component](/user/Component)
   struct Index {
     @State viewController: pag.PAGViewController = new pag.PAGViewController();
   
     async aboutToAppear(): Promise<void> {
       // LoadFromPathAsync()可以加载网络或者本地文件
       let file = await pag.PAGFile.LoadFromPathAsync('https://pag.io/file/like.pag')
       this.viewController.setComposition(file);
       this.viewController.setRepeatCount(-1);
       this.viewController.play();
     }
   
     build() {
       Column() {
         Row() {
           PAGView({
             controller: this.viewController
           })
         }.height("70%")
   
         Row() {
           Button("play").width("40%").margin(10)
             .onClick(() => {
               this.viewController.play();
             })
   
           Button("pause").width("40%")
             .onClick(() => {
               this.viewController.pause();
             })
         }
       }
     }
   }
   

三、拓展延申 如何加载本地PAG图片：

• 将本地的PAG图片置于resources/resfile目录中，通过调用getContext().resourceDir来获取文件路径，并将此路径作为参数传递给LoadFromPathAsync()方法以实现PAG图片的加载。示例代码如下：

  import * as pag from '[@tencent](/user/tencent)/libpag'
  import { PAGView } from '[@tencent](/user/tencent)/libpag'
  
  [@Entry](/user/Entry)
  [@Component](/user/Component)
  struct Index {
    @State viewController: pag.PAGViewController = new pag.PAGViewController();
  
    async aboutToAppear(): Promise<void> {
      // 获取本地PAG图片路径
      let filePath = getContext().resourceDir + "/like.pag"
      let file = await pag.PAGFile.LoadFromPathAsync(filePath)
      this.viewController.setComposition(file);
      this.viewController.setRepeatCount(-1);
      this.viewController.play();
    }
  
    build() {
      Column() {
        Row() {
          PAGView({
            controller: this.viewController
          })
        }.height("70%")
  
        Row() {
          Button("play").width("40%").margin(10)
            .onClick(() => {
              this.viewController.play();
            })
  
          Button("pause").width("40%")
            .onClick(() => {
              this.viewController.pause();
            })
        }
      }
    }
  }