PAG官网 | PAG动效

PAG官网 | PAG动效

  • 首页
  • 产品
  • 功能
  • 文档
  • 案例
  • CN
  • GitHub
  • 论坛交流
  • 免费下载
  • Languages iconEN
    • CN

›Web 进阶

了解 PAG

  • Introduction
  • FAQs

快速开始

  • Install PAGViewer
  • Install PAGExporter
  • Export PAG Files
  • SDK Integration

导出插件

  • Use Configuration Panel
  • Use Exporting Panel
  • Export BMP Compositions
  • Config Fill Modes
  • Config Time Stretch Modes
  • Exporting Shortcut Keys
  • Error Code
  • Auto Detection Rules
  • Text Editing Rules
  • Add Text Background
  • Export Audio
  • Manually Install PAGExporter

预览工具

  • Preview Replacements
  • View File Structure
  • Preview Shortcut Keys
  • Export Image Sequence
  • File Encryption
  • Add Watermark
  • Upgrade to Beta Version

性能优化

  • Use Performance Panel
  • PAG File Optimization

移动端进阶

  • Common API Overview
  • Use PAGImageView
  • Video Replacement
  • Play Audio
  • Text Layer Description
  • Use Encripted File
  • Export To Video
  • SDK Authentication

Web 进阶

  • SDK Installation
  • Load PAG File
  • Play PAG File
  • Platform Capabilities
  • Use WebWorker

API 参考

  • API Document

视频教程

  • PAG Workflow
  • File Optimization Best Practices
  • Use PAGExporter Panel
  • PAG Online Q&A

资源下载

  • PAGViewer Installer
  • PAG Test Files
  • PAG Demo Projects
  • China LiveVideoStackCon2022
  • PAG Conversion Tool
  • PAG File Format Spec

TAVMedia

  • Introduction to TAVMedia
  • TAVMedia Quick access
  • Common API Overview

其他

  • From Lottie To PAG
  • PAG Dictionary

SDK Installation


The functionality of the libpag SDK relies on two key components: libpag.js and libpag.wasm files. To simplify, libpag.js serves as the interface module while libpag.wasm acts as the core module. When integrating libpag.js, it is necessary to instantiate the loading of libpag.wasm by invoking the PAGInit()nterface. The libpag.wasm file in the same directory as the currently executing script will be loaded by default. In cases where libpag.wasm is not located in the same directory, the locateFile hook on PAGInit()can be utilized to specify the path for libpag.wasm.

Wasm files can be GZIP. Public CDN enables GZIP of wasm files by default. If it's your own static resource service, you need to configure it manually.

Use Via CDN

Directly use <script> o import js files on the CDN.

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>

You can browse the contents of the NPM package in the public CDN cdn.jsdelivr.net/npm/libpag/,if you want to specify a certain version, you can use @<version> to specify it.

Alternatively, you can use other public CDNs that synchronize NPM, such as unpkg , or download the files and load them yourself.

Use the Globally Imported Version

libpag will be registered as a global variable. You can call libpag.PAGInit o instantiate to obtain the PAG instance:

<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script>
  libpag.PAGInit().then((pag) => {
    // Instantiation succeeded
  })
</script>

Online Example

Versions Imported Using ES Modules

Most modern browsers now natively support ES modules, so you can utilize it as follows:

<script type="module">
    import { PAGInit } from "https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.esm.js";
    PAGInit({
      locateFile: (file) => "https://cdn.jsdelivr.net/npm/libpag@latest/lib/" + file
    }).then((pag) => {
      // Instantiation succeeded
    })
</script>

In the PAGInit method, you'll see that the hook using locateFile indicates the location of libpag.wasm.

Online Example

Use Via NPM

Prerequisites

  1. You have successfully installed Node.jsand are well-versed with using the command line.
  2. You are familiar with packaging tools, such as Webpack/Rollup.

In this section, we will introduce how to introduce libpag into the engineering project, in which Webpack/Rollup needs to be configured to copy libpag.wasm.

Run npm on the command line to install libpag (without the > symbol):

> npm install libpag

Introduce in the code:

import { PAGInit } from 'libpag';
PAGInit().then(pag => {
  // Instantiation succeeded
})

Please keep in mind that packaging tools like Webpack and Rollup do not include .wasm files in the packaging process by default. If your project is built using scaffolding tools such as Vue or React, you will need to package the libpag/lib/libpag.wasm file located under node_modules into the final product. Additionally, you should use the locateFile hook to retrieve the path of the libpag.wasm file. This ensures that the libpag.wasm file can be successfully loaded during network requests.

For simple access examples and configuration examples of Vue/React/PixiJS, you can click here to view.

← SDK AuthenticationLoad PAG File →
  • Use Via CDN
    • Use the Globally Imported Version
    • Versions Imported Using ES Modules
  • Use Via NPM
Address: Tencent Binhai Building, No. 33 Haitian Second Road, Nanshan District, Shenzhen, Guangdong Province, China.
TEL: 0755-86013388
QQ Group: 893379574
Copyright © 2018 - 2025 Tencent. All Rights Reserved.
Privacy Policy
公司地址:广东省深圳市南山区海天二路33号腾讯滨海大厦
联系电话:0755-86013388
QQ群:893379574
Copyright © 2018 - 2025 Tencent. All Rights Reserved.
隐私政策
Copyright © 2018 - 2025 Tencent. All Rights Reserved.
Address: Tencent Binhai Building, No. 33 Haitian Second Road, Nanshan District, Shenzhen, Guangdong Province, China.
TEL: 0755-86013388
QQ Group: 893379574
Privacy Policy
Copyright © 2018 - 2025 Tencent. All Rights Reserved.
公司地址:广东省深圳市南山区海天二路33号腾讯滨海大厦
联系电话:0755-86013388
QQ群:893379574
隐私政策