您现在的位置是：首页 >其他 >PAG 动效方案使用总结网站首页其他

近几年能明显感觉到，互联网产品已经越来越离不开动效了：不管是APP里会动的加载动画UI，还是直播间里华丽的礼物，都需要经历动效上线的过程。而负责这些动效上线的前端同学应该有过这样的体验：各种加班写代码上线动画效果，并且在动效还原过程中反复和设计师联调效果。

最近接触到一个开源项目可以帮助大家解决这个问题，它就是PAG动效组件。

PAG 简介：认识 PAG动效

PAG是来自腾讯的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 的流程图下图所示，设计师在 AE 上设计出动画后，可以通过导出插件导出 pag 文件，同时 PAG 提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过 PAG SDK 加载渲染 PAG 动画。

PAG 特点及优势 ：和其他动效上线方案相比，它强在哪里

● 开源项目：无需担心团队维护问题。

● 文件更小：PAG采用针对 AE 时间轴属性设计的二进制文件编码器，能够使用动态比特位紧凑存储，冗余信息极少，文件体积最小，解码速度最快，且支持单文件集成图片和音频等外部资源。

● 全 AE 特性支持：在纯矢量的导出模式下，无论是哪种实现方案，在众多的 AE 特性面前，都只支持将有限的 AE特性导出渲染，PAG 方案提供了 BMP 预合成的解决方案，支持将特定图层截图导出成透明视频，实现了对于所有 AE 特性导出的支持。

● 运行时编辑：PAG 不仅仅支持文本图层的文本编辑、图片图层的占位图替换，还支持图层级别的增加、删除及更改渲染位置，实现原子素材的自由组合，典型的应用场景就是视频模版和游戏战报，一个模版中由多个 pag 有机组合在一起。

● 渲染架构：相对于 Lottie 、SVGA 依赖于平台端相关的渲染接口，PAG 使用了跨平台一致的 C++ 架构，平台层面仅仅提供渲染环境，渲染的主体位于 C++ 层，可以实现跨平台的渲染一致性。

● 支持的平台更多：相比 Lottie 支持 Android、iOS、Web 和 macOS， SVGA 支持 Android、iOS、Web，PAG 实现了 Android、iOS、Web、macOS、Windows、Linux 和 微信小程序，支持的平台更多。

这里放一张对比图，大家就一目了然了：

想进一步了解也可以去开源地址：https://github.com/Tencent/libpag

PAG 使用：核心类分析及常用方法解读

在浏览过开源地址后，这里帮大家整理出核心类的分析：

这些PAG常用方法解读也能帮助大家使用起来更轻松：

PAG 运行时编辑

PAG 的运行时编辑主要分为两类：1）修改文本图层的文本信息、替换图片图层中的占位图、修改实色图层中的颜色

// C++
std::shared_ptr<pag::PAGFile> ReplaceImageOrText() {
  auto pagFile = pag::PAGFile::Load("../../assets/test2.pag");
  if (pagFile == nullptr) {
    return nullptr;
  }
  for (int i = 0; i < pagFile->numImages(); i++) {
    auto pagImage = pag::PAGImage::FromPath("../../assets/scene.png");
    pagFile->replaceImage(i, pagImage);
  }

  for (int i = 0; i < pagFile->numTexts(); i++) {
    auto textDocumentHandle = pagFile->getTextData(i);
    textDocumentHandle->text = "hah哈 哈哈哈哈👌";
    pagFile->replaceText(i, textDocumentHandle);
  }
  return pagFile;
}

2）渲染树编辑

渲染树编辑指的是通过使用 PAGComposition 的相关接口，完成多个图层、多个 pag 文件的自由组合。具体如何使用可以参考下面的代码：

// 以 OC 版本为例
- (PAGComposition *)makeComposition {
    PAGComposition* compostion = [PAGComposition Make:self.view.bounds.size];
    float itemWidth = self.view.bounds.size.width / 5;
    float itemHeight = 100;
    for (int i = 0; i < 20; i++) {
        PAGFile* pagFile = [self getPAGFile:i / 5 clume:i % 5 name:[NSString stringWithFormat:@"%d", i] itemWidth:itemWidth itemHeight:itemHeight];
        [compostion addLayer:pagFile];
    }
    return compostion;
}

- (PAGFile*)getPAGFile:(int)row clume:(int)colume name:(NSString*)name itemWidth:(float)itemWidth itemHeight:(float)itemHeight {
    PAGFile* pagFile = [PAGFile Load:[[NSBundle mainBundle] pathForResource:name ofType:@"pag"]];
    if (pagFile) {
        float scaleX = itemWidth * 1.0f / [pagFile width];
        CGAffineTransform transform = CGAffineTransformMakeScale(scaleX, scaleX);
        CGAffineTransform tranflate = CGAffineTransformMakeTranslation(itemWidth * colume, row * itemHeight + 150);
        transform = CGAffineTransformConcat(transform, tranflate);
        [pagFile setMatrix:transform];
        [pagFile setStartTime:0];
        [pagFile setDuration:10000000];
    }
    return pagFile;
}

PAG UI场景及列表播放

当一个页面中含有多个pag 文件时，如果使用多个 PAGView，由于每一个 PAGView 都需要一个独立的渲染环境，内存和 CPU 占用相对较高，推荐的处理方法有两种：

1）通过使用 PAG 的组合模式用将多个 PAG 文件添加到同一个 PAGComposition 中，具体使用方法见运行时编辑，从而将多个渲染环境缩减到一个渲染环境，降低内存和 CPU 占用；

2）对于一些 UI 列表场景，需要有多个 View 的存在， pag 文件无法添加到一个 PAGComposition 中，此时可以使用 PAGImageView。

// 以 OC 版本为例
#import <libpag/PAGImageView.h>

#define WIDTH  100

@interface PAGCell : UITableViewCell
@property (nonatomic,strong) PAGImageView* pagImageView;
@property (nonatomic,strong) NSString* filePath;
@end

@implementation PAGCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        self.pagImageView = [[PAGImageView alloc] initWithFrame:CGRectMake(20, 0, WIDTH, WIDTH)];
        [self.contentView addSubview:self.pagImageView];
    }
    return self;
}

- (void)setFilePath:(NSString *)filePath {
    if ([filePath length] > 0) {
        [self.pagImageView setPath:filePath];
        [self.pagImageView setCurrentFrame:0];
        [self.pagImageView setRepeatCount:-1];
        [self.pagImageView play];
    }
}

PAG 字体注册

PAG 除了支持修改文本图层的文本信息外，还支持修改字体。具体方法如下：

（1）通过 PAGFont 获取字体的相关信息，然后赋值给 PAGText，使用到的接口如下：

获取字体信息

  // C++
  /**
   * Registers a font required by the text layers in pag files, so that they can be rendered as
   * designed.
   */
  static PAGFont RegisterFont(const std::string& fontPath, int ttcIndex,
                              const std::string& fontFamily = "",
                              const std::string& fontStyle = "");
  /**
   * Registers a font required by the text layers in pag files, so that they can be rendered as
   * designed.
   */
  static PAGFont RegisterFont(const void* data, size_t length, int ttcIndex,
                              const std::string& fontFamily = "",
                              const std::string& fontStyle = "");
  PAGFont(std::string fontFamily, std::string fontStyle)
      : fontFamily(std::move(fontFamily)), fontStyle(std::move(fontStyle)) {
  }

  /**
   * A string with the name of the font family.
   **/
  const std::string fontFamily;
  /**
   * A string with the style information — e.g., “bold”, “italic”.
   **/
  const std::string fontStyle;                              
                              

（2）fontFamlily 和 fontStyle 赋值给 PAGText，PAGText 再填充到 PAGTextLayer 中。

 // C++
   for (int i = 0; i < pagFile->numTexts(); i++) {
    auto textDocumentHandle = pagFile->getTextData(i);
    textDocumentHandle->text = "hah哈 哈哈哈哈👌";
    // Use special font
    auto pagFont = pag::PAGFont::RegisterFont("../../resources/font/NotoSansSC-Regular.otf", 0);
    textDocumentHandle->fontFamily = pagFont.fontFamily;
    textDocumentHandle->fontStyle = pagFont.fontStyle;
    pagFile->replaceText(i, textDocumentHandle);
  }

如果使用了特定字体而又没有注册或字体文件中没有包含该字符，PAG 内部（Android、iOS、macOS、Windows 平台）有一个默认字体列表（同时支持外部设置字体回退列表，外部设置时会覆盖默认设置），会回退到 PAG 的默认字体列表中，此时使用那种字体对于业务方而言是不确定的。

// C++
  /**
   * Resets the fallback font names. It should be called only once when the application is being
   * initialized.
   */
  static void SetFallbackFontNames(const std::vector<std::string>& fontNames);

  /**
   * Resets the fallback font paths. It should be called only once when the application is being
   * initialized.
   */
  static void SetFallbackFontPaths(const std::vector<std::string>& fontPaths,
                                   const std::vector<int>& ttcIndices);

PAG 视频编辑场景

在视频编辑场景，使用的不是 PAGView，而是 PAGPlayer、PAGSurface 和 PAGComposition。

PAGSurface 可以通过 CVPixelBufferRef 或纹理创建，方便快捷的与视频后编辑中的 CVPixelBuffer 或 纹理进行整合。同时 PAGImage 也支持通过 CVPixelBufferRef 或 纹理创建，通过 PAGPlayer 控制播放进度，将视频内容填充进图片图层的占位图。

// OC
/**
 * Creates a PAGImage object from the specified CVPixelBuffer, return null if the CVPixelBuffer is
 * invalid.
 */
+ (PAGImage*)FromPixelBuffer:(CVPixelBufferRef)pixelBuffer;

// java
public static PAGImage FromTexture(int textureID, int textureTarget, int width, int height);

public static PAGImage FromTexture(int textureID, int textureTarget, int width, int height, boolean flipY);

PAG 软解注入

为什么会有软解注入？PAG 的导出方式中支持 BMP 预合成导出，在 pag 文件中，如果含有 BMP 预合成，一个 BMP 预合成相当于一个视频，视频则需要解码。 在 PAG SDK 中默认使用硬件解码，但硬件解码存在两个问题：

1）移动端硬件解码器的瞬时存在数目是有限制的，不能无限的创建，如果创建硬件解码器的数目超过限制，就会出现解码器创建失败的情况，在视频编辑场景中需要关注；

2）Android 平台由于机型兼容性、碎片化验证，不能保证所有的机型都能硬件解码成功，因此 Android 平台软解是必须的。

于是，在提供的制品库中， iOS 平台由于没有兼容性的问题，默认是不带软解的，Android 提供了两个包，普通的包默认是内置软解的，noffavc 的包是没有内置软解的。

具体怎么注入软解呢：Android 平台可以选择完整制品库，iOS 平台可以引入 ffavc。

pod 'ffavc'

通过如下方法完成软件解码器的注册：

// OC
-(void)registerSoftwareDecoder
{
    // 注册软件解码器工厂指针
    auto factory = ffavc::DecoderFactory::GetHandle();
    [PAGVideoDecoder RegisterSoftwareDecoderFactory:(void*)factory];
    }

如果接入方自己的 APP 中已经内置了软解库，可以通过外部注入的方式注入软解。

PAG 官网提供了下面这个软解注入接口，需要业务方基于自己的解码器实现，PAG BMP 预合成中的视频编码格式为 h264。

https://github.com/libpag/ffavc/blob/main/vendor/libpag/include/pag/decoder.h

具体的实现方式可以参考：

ffavc/FFAVCDecoder.cpp at main · libpag/ffavc · GitHub

然后自己通过上面提到的方式注入软解。

PAG 服务端渲染

和 Lottie、SVGA 不同的是，PAG 支持服务端渲染，尽管 PAG 的渲染依赖 OpenGL 环境，但 服务端却可以继续使用 CPU 服务器。具体实现层面，PAG 通过 swiftshader 在 CPU 服务器上构建出了 OpenGL 环境，使得 pag 文件可以在 CPU 环境中正常渲染。

在服务端的具体使用如下，获取到的是 BGRA 的数据，该数据可以用于视频编码。

 // C++
  auto pagFile = pag::PAGFile::Load("../../assets/test2.pag");
  auto pagSurface = pag::PAGSurface::MakeOffscreen(pagFile->width(), pagFile->height());
  if (pagSurface == nullptr) {
    printf("---pagSurface is nullptr!!!
");
    return -1;
  }
  auto pagPlayer = new pag::PAGPlayer();
  pagPlayer->setSurface(pagSurface);
  pagPlayer->setComposition(pagFile);

  auto totalFrames = TimeToFrame(pagFile->duration(), pagFile->frameRate());
  auto currentFrame = 0;

  int bytesLength = pagFile->width() * pagFile->height() * 4;

  while (currentFrame <= totalFrames) {
    pagPlayer->setProgress(currentFrame * 1.0 / totalFrames);
    auto status = pagPlayer->flush();

    // PAG 渲染数据读取
    auto data = new uint8_t[bytesLength];
    pagSurface->readPixels(pag::ColorType::BGRA_8888, pag::AlphaType::Premultiplied, data,
                           pagFile->width() * 4);
    delete[] data;

    currentFrame++;
  }

  delete pagPlayer;

开始使用 ：如何接入

接入使用分为开发部分和设计部分，这里分别为大家介绍下：

(1) 开发者——接入SDK

在PAG的Github Wiki中有非常详细的接入指引（包括Android、iOS、Web等平台的接入方法和范例工程），大家自行学习就好：https://github.com/Tencent/libpag/wiki

(2)设计师——下载导出插件和预览工具

设计师想要使用PAG，只需在官网下载预览工具 PAGViewer和 AE 导出插件即可:https://pag.art/docs/install.html

整体看来，PAG的核心价值如下：

据官网显示已经有很多头部应用接入使用（如微信、王者荣耀、小红书、知乎等），稳定性应该很有保证，如果有动效上线相关业务的朋友非常值得试试。

最后顺便附上 PAG 相关的资源，大家感兴趣可以进一步了解：

官网: https:/pag.art/

Github：https://github.com/Tencent/libpag

QQ 群:893379574