PAG

PAG

  • 首页
  • 设计师文档
  • 开发者文档
  • 案例展示
  • FAQ
  • GitHub
  • 官方论坛
  • 免费下载

›SDK快速接入

SDK快速接入

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

Web进阶

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

API参考

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

文件格式

  • PAG文件格式规范

素材迁移

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

视频分享

  • 线上答疑

Web端接入指南


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

特性

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

快速开始

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

<canvas class="canvas" id="pag"></canvas>
<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script>
  window.onload = async () => {
    // 实例化 PAG
    const PAG = await window.libpag.PAGInit();
    // 获取 PAG 素材数据
    const buffer = await fetch('https://pag.art/file/like.pag').then((response) => response.arrayBuffer());
    // 加载 PAG 素材为 PAGFile 对象
    const pagFile = await PAG.PAGFile.load(buffer);
    // 将画布尺寸设置为 PAGFile的尺寸
    const canvas = document.getElementById('pag');
    canvas.width = pagFile.width();
    canvas.height = pagFile.height();
    // 实例化 PAGView 对象
    const pagView = await PAG.PAGView.init(pagFile, canvas);
    // 播放 PAGView
    await pagView.play();
  };
</script>

浏览器兼容性

Chrome
Chrome
Safari
Safari
Chrome
Chrome for Android
Safari
Safari on iOS
QQ Browser Mobile
Chrome >= 69Safari >= 11.3Android >= 7.0iOS >= 11.3last 2 versions

更多版本的兼容工作正在进行中

以上的兼容表仅代表可以运行的兼容性。对于有移动端接入需要的用户,需要阅读一下这篇兼容性情况的文章

More

Web-lite:https://github.com/Tencent/libpag/tree/main/web/lite

Github:https://github.com/Tencent/libpag/blob/main/web/README.md

Web demo:https://github.com/libpag/pag-web

Web SDK 未来能力支持规划可以点击 这里 查看

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

粤公网安备 44030502009351号