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

Platform Capabilities


Technical Features

Libpag's core code is written in C++, and it utilizes WebAssembly technology to compile the C++ code into a libpag.wasm file, which can be executed on the Web platform.You do not require extensive knowledge of WebAssembly to use libpag. However, if you are interested, you can refer to the WebAssembly documentation and emscripten documentationfor more information.

Rendering uses the WebGL environment and does not support Canvas2D.

Memory Reclaim

Due to the utilization of WebAssembly, most of the objects created using libpag have C++ pointers and remain unaffected by the browser's GC. Therefore, if you do not need to use the object, it is recommended to call the destroy method of the object.

Compatibility

Chrome
Chrome
Safari
Safari
Chrome
Chrome for Android
Safari
Safari on iOS
Chrome >= 69Safari >= 11.3Android >= 7.0iOS >= 11.3

The libpag website is built using WebAssembly + WebGL, allowing it to fully utilize the capabilities of libpag through the Web platform. The compatibility table above solely indicates the supported environments.

The rendering performance of libpag is affected by the following conditions:

  • Complexity of PAG animation files
  • How to call libpag
  • Web browser environment This article focuses on the performance of the libpag website across different browsers and also discusses compatible backup solutions.

Registering the software decoder ffavc needs to load one more wasm file, which will increase memory and CPU usage.

Desktop SDK

Chrome (Win/Mac)

Good performance

Safari (Mac)

Good performance

Firefox (Win/Mac)

Performance is good except for PAG animation files with BMP sequence frames.

Because Firefox's Video tag cannot parse videos converted from BMP sequence frames in PAG animation files, it is necessary to register a software decoder ffavc. Example Demo

Mobile SDK

Safari (iOS)

Performance is good except for PAG animation files with BMP sequence frames.

Libpag parses the PAG animation file with BMP sequence frames and calls the blobURL attribute of the video tag to decode the video. However, when the blobURL is a video of src on the iOS Safari browser, there will be bugs such as "dropping frames at the end of the video" and "The currentTime attribute does not change after modification, but the video image is successfully rendered" .

Moreover, when the iOS device is in power-saving mode or in the WeChat browser, there is a rule restriction that "the user can only use the video tag to play video after interacting with the page". As a result, any scenario that involves playing animations will need to wait for user interaction before starting.

To prevent any issues caused by the compatibility of the two environments mentioned above, it is recommended to use the registered software decoder ffavc for parsing the video. This is currently the best solution available. Example Demo

Chrome (Android)

Performance is good except for PAG animation files with BMP sequence frames.

Some Android devices and WeChat browsers have a rule restriction that "the user can only use the video tag to play video after interacting with the page". As a result, any scenario that involves playing animations will need to wait for user interaction before starting.

To avoid issues, we utilize the registered decoder ffavc to parse videos. However, ffavc software decoding performance on Android devices is subpar, making it an unsuitable solution. We are working on finding a better solution to address this situation in the future. In the meantime, it is important for the access side to instruct users to interact with each other in the business scenario to avoid the rule restriction that "the user can only use the video tag to play video after interacting with the page".

Android Native Browser

Due to the diverse range of manufacturers and their respective browsers, compatibility is affected not only by variations in browser implementation but also by differences in GPU chips. As a result, we currently do not have plans to support these machines and will instead prioritize compatibility with mainstream browsers.

← Play PAG FileUse WebWorker →
  • Technical Features
  • Memory Reclaim
  • Compatibility
    • Desktop SDK
    • Mobile SDK
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
隐私政策