PAG官网 | PAG动效

PAG官网 | PAG动效

  • 首页
  • 产品
  • 功能
  • 文档
  • 案例
  • GitHub
  • 官方论坛
  • 免费下载

›SDK快速接入

PAG 介绍

  • 产品介绍
  • 使用流程
  • 常见问题

快速开始

  • 安装 PAGViewer
  • 安装 AE 导出插件
  • 导出 PAG 文件

SDK快速接入

  • 移动端接入指南
  • 桌面端接入指南
  • Web端接入指南
  • 小程序端接入指南

导出插件

  • 插件选项配置面板
  • AE 导出提示
  • BMP 预合成导出
  • PAG 填充模式
  • PAG 时间伸缩
  • 导出面板快捷键设置
  • 导出错误码说明
  • AE 导出自动检测规则
  • 文本制作规则
  • 如何添加文本背景框
  • 如何在 AE 中导出音频

预览工具

  • 使用 PAGViewer 编辑预览图层
  • 使用 PAGViewer 查看 PAG 文件结构
  • PAGViewer 快捷键说明
  • 使用 beta 版本的 PAGViewer
  • 从 PAG 导出其他图片格式

性能优化

  • 使用性能监测面板
  • PAG 素材优化指南

API参考

  • iOS API文档
  • Android API文档
  • Web API文档

移动端进阶

  • UI场景及列表播放优化
  • 占位图替换视频
  • 播放有声素材
  • 使用加密素材
  • 导出视频文件
  • SDK 鉴权

Web进阶

  • 平台特性
  • 安装
  • 加载 PAG 文件
  • 播放动效
  • 兼容性情况
  • 自适应
  • WebWroker 版本

素材迁移

  • Lottie 迁移指南
  • 素材迁移说明
  • PAG SDK 迁移指南

视频教程

  • PAG 制作与性能优化培训视频
  • PAG 新版导出插件面板培训视频
  • 线上答疑

文件格式

  • PAG 文件格式规范

小程序端接入指南


SDK 的接入和使用请遵守 PAG SDK 个人信息保护规则

libpag-miniprogram 是 libpag 在微信小程序平台的 SDK

当前为 alpha 版本,欢迎使用与反馈🎉

特性

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

快速开始

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

  1. NPM 依赖
$ npm install libpag-miniprogram

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

  1. 将 node_modules/libpag-miniprogram/lib/libpag.wasm.br 文件复制到utils目录下
  2. 初始化 PAG
// index.js
import { PAGInit } from 'libpag-miniprogram';

Page({
  async onReady() {
    this.PAG = await PAGInit({locateFile: (file) => '/utils/' + file});
  }
})
  1. 播放 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(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);
      },
    });
  });
};

More

lite版本:https://github.com/Tencent/libpag/tree/main/web/lite/wechat

← Web端接入指南插件选项配置面板 →
  • 特性
  • 快速开始
  • More
公司地址:广东省深圳市南山区海天二路33号腾讯滨海大厦
联系电话:0755-86013388
QQ群:893379574
备案号:粤B2-20090059
Copyright © 2018 - 2023 Tencent. All Rights Reserved.
隐私政策

粤公网安备 44030502009351号

Copyright © 2018 - 2023 Tencent. All Rights Reserved.
公司地址:广东省深圳市南山区海天二路33号腾讯滨海大厦
联系电话:0755-86013388
QQ群:893379574
隐私政策
备案号:粤B2-20090059

粤公网安备 44030502009351号