libpag-miniprogram v4.2.82

官网 | English | Web版本 | Weblite版本 | 小程序版本 | 小程序lite版本

介绍

libpag 是 PAG (Portable Animated Graphics) 动效文件的渲染 SDK，目前已覆盖几乎所有的主流平台，包括：iOS, Android, macOS, Windows, Linux, 以及 Web 端。

特性

• Web 平台能力适配，支持 libpag 全能力
• 基于 WebAssembly + WebGL

快速开始

PAG Web 端，由 libpag.js + libpag.wasm.br 文件组成。

1. NPM 依赖

$ npm install libpag-miniprogram

点击「微信开发者工具」- 「工具」- 「构建npm」，进行小程序 npm 依赖构建

2. 将 node_modules/libpag-miniprogram/lib/libpag.wasm.br 文件复制到utils目录下
3. 初始化 PAG

// index.js
Page({
	async onReady() {
		this.PAG = await PAGInit({locateFile: (file) => '/utils/' + file});
		wx.createSelectorQuery()
      .select('#pag')
      .node()
      .exec((res) => {
        const canvas = res[0].node;
      });
	}
})

4. 播放 PAG 动效

<!-- index.wxml -->
<canvas type="webgl" id="pag" style="width: 300px; height:300px;"></canvas>

// index.js
wx.createSelectorQuery()
	.select('#pag')
	.node()
	.exec(async (res) => {
		const canvas = res[0].node;
  	const buffer = await loadFileByRequest('https://pag.art/file/test.pag');
  	const pagFile = await this.PAG.PAGFile.load(buffer);
  	const pagView = await this.PAG.PAGView.init(this.pagFile, canvas);
  	pagView.play();
	});
const loadFileByRequest = async (url) => {
  return new Promise((resolve) => {
    wx.request({
      url,
      method: 'GET',
      responseType: 'arraybuffer',
      success(res) {
        if (res.statusCode !== 200) {
          resolve(null);
        }
        resolve(res.data);
      },
      fail() {
        resolve(null);
      },
    });
  });
};