From Lottie To PAG
Supported material formats for conversion to PAG files: Lottie json files, gif, apng, image sequences and videos.
Animation File Conversion
Conversion Tool PAGConvertor
A tool that can convert videos, gifs, apng, image sequences, and Lottie's JSON into PAG files. This tool only support macOS platform.
How To Use：
After decompressing the file, complete the conversion of the material by running the convert. sh script or PAGConverter executable file.
How to use the convert.sh script
Please place all the resources that require conversion into the designated input folder. Currently, json files/ image sequences with videos/gif/apng/Lottie formats are supported. Note: Image sequences are converted within their respective folders and no additional folders are created for other types of resources.
Open a terminal and cd to the current folder.
Execute the following shell script, (if you need to convert the image sequence, add parameters./convert.sh etc. ./convert.sh 25)
./convert.sh
- After the conversion is completed, you can see the converted pag files with the same name in the input folder
Note: If permission denied occurs during script execution, run it first in the directory where convert.sh is located
chmod +x ./*
How to use the PAGConvertor executable file
Open the terminal and cd to the folder where the resource is located.
Execute in the terminal
./PAGConvertor <file name/folder name> [frame rate]
etc. ./PAGConvertor animation.mov 25
You have the flexibility to choose the frame rate, allowing you to actively set it to match your desired outcome, even if it differs from the original material. It is recommended to specify the output frame rate when working with variable frame rate file formats. (Note *: Frame rate modification is currently not supported in Lottie files.)
- After the conversion is completed, you can see the converted pag files with the same name in the folder
Note: If the system prompts "Unable to open PAGConverter because the developer cannot be verified" during the execution process, please allow PAGConvertor to run in "System Preferences - Security and Privacy".
SDK Migration
PAG SDK Integration Reference
PAG SDK Switching Usage Method
For mobile applications on Android and iOS, when the rendering size is manageable and there is no need for text editing or placeholder image replacement, it is recommended to utilize PAGImageView. You can set the path of the PAG file to be rendered through the setPath interface, and then call the play method to render and play. Additionally, if you need to start playback from a specific point, you can set the initial play progress using the setCurrentFrame interface.
PAGImageView
Android example
PAGImageView pagImageView = new PAGImageView(this);
String path = "assets://test.pag";
pagImageView.setPath(path);
pagImageView.setCurrentFrame(10); // Play from frame 10 onwards
pagImageView.play();
iOS example：
PAGImageView* pagImageView = [[PAGImageView alloc] init];
NSString* path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"pag"];
[pagImageView setPath:path];
[pagImageView setCurrentFrame:10]; // Play from frame 10 onwards
[pagImageView play];
The implementation principle of PAGImageView is to compress and cache the rendered content of each frame to the local disk using LZ4. However, when rendering in larger sizes or with longer PAG file durations, such as on a full screen of a mobile phone, it can consume a significant amount of disk space for caching. In some cases, caching a PAG file could require several hundred MB. By default, the disk cache has a maximum capacity of 1GB.When there are numerous instances of such cases, the constant triggering of cache clearing logic can hinder performance rather than improve it.
PAGImageView is well-suited for scenarios involving UI lists or multiple small-scale views on a page. In such scenarios, the rendered size remains relatively small, and caching a PAG file only occupies a few tens of MB of disk space. By leveraging cache hits during rendering, performance is significantly improved. For other scenarios, we still recommend utilizing PAGView.
To meet the high CPU and low memory usage requirements in the given scenario, you can enable full memory caching by utilizing the setCacheAllFramesInMemory interface of PAGImageView.
PAGView
For full-screen plays or PAG files with a substantial number of frames that require text editing or placeholder image replacement, it is advisable to utilize PAGView.
Android example:
PAGView pagView = new PAGView(this);
String path = "assets://test.pag";
pagView.setPath(path);
pagView.setProgress(0.10); // Play from 10% progress
pagView.play();
iOS example:
PAGView* pagView = [[PAGView alloc] init];
NSString* path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"pag"];
[pagView setPath:path];
[pagView setProgress:0.10]; // Play from 10% progress
[pagView play];
Web example:
const PAG = await window.libpag.PAGInit();
const buffer = await fetch('https://pag.qq.com/file/like.pag').then((response) => response.arrayBuffer());
const pagFile = await PAG.PAGFile.load(buffer);
const pagView = await PAG.PAGView.init(pagFile, canvas);
await pagView.play();
pagView.setProgress(0.1); // Play from 10% progress
PAG Other Interface Usage
Pause play: pause or stop
Set play count: setRepeatCount, default to once, set to 0 as infinite
Get Play status: isPlaying
Get play progress: getProgress or currentFrame
Refresh and render the current frame: flush
Get current frame rendering data: makeSnapshot or currentImage
Set the fill mode: setScaleMode. For specific usage, please refer to PAG fill mode
Edit text and replace Placeholder Images:
Edit text：through the replaceText related interface of PAGComposition (the parent class of PAGFile). Replace the Placeholder Image：through the related interface of PAGComposition replaceImage. You need to use the setComposition interface of PAGView or PAGImageView instead of setPath.
For more API interface usage, please refer to: