PAG官网 | PAG动效

PAG官网 | PAG动效

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

›移动端进阶

PAG 介绍

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

快速开始

  • 安装 PAGViewer
  • 安装 AE 导出插件
  • 导出 PAG 文件
  • SDK 接入指南

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 文件格式规范

占位图替换视频


包含 Movie 功能的 PAG 企业版(包名带有 movie 后缀)通过视频素材可以构建 PAGMovie。PAGMovie 继承自 PAGImage,可以直接替换 PAGImageLayer 的占位图。在替换后,PAGView、PAGPlayer 和 PAGAudioPlayer 都会自动更新内部的数据,无需其他操作即可呈现。

PAGMovie 继承了 PAGImage 的完整特性,PAGImage 的详细文档参见:Android | iOS。

PAGMovie支持的封装格式为 mov,mp4,m4a,3gp,3g2,mj2,支持的编码格式为 h264和 h265(hevc)。

使用流程

1、构建 PAGMovie 实例

PAGMovie 支持通过本地视频路径构建,同时支持裁剪和变速以及音量设置。

android:

// 方法1:通过文件路径生成 PAGMovie,默认完整区间不变速:starttime = 0 us , duration = 文件 duration us, speed = 1.0f, volume = 1.0f
PAGMovie movie = PAGMovie.MakeFromFile(MOVIE_FILE_PATH);
// 方法2:通过文件路径生成 PAGMovie 并设置属性,这里的参数表示选取该视频素材的完整区间,不变速,音量为0
PAGMovie silentMovie = PAGMovie.MakeFromFile(MOVIE_FILE_PATH, -1, -1, 1, 0);
// 方法3:通过文件路径生成 PAGMovie 并设置属性,这里的参数表示选取该视频素材的1~3秒,设置为0.5倍速,音量为0.5
PAGMovie cutMovie = PAGMovie.MakeFromFile(MOVIE_FILE_PATH, 1_000_000, 2_000_000, 0.5f, 0.5f);

iOS:

// 方法1:通过文件路径生成 PAGMovie,默认 starttime = 0 us , duration = 文件 duration us, speed = 1.0f, volume = 1.0f
PAGMovie *movie = [PAGMovie MakeFromFile:moviePath];
// 方法2:通过文件路径生成 PAGMovie 并设置属性,这里的参数表示选取该视频素材的1~3秒,设置为0.5倍速,音量为0.5。
// 当 startTime 和 duration 都是-1时,如果 PAGMovie 会自动适配成视频全时长
movie = [PAGMovie MakeFromFile:moviePath startTime:1*1000*1000 duration:2*1000*1000 speed:0.5f volume:0.5f];
2、替换占位图

PAGMovie 是 PAGImage 的子类,替换占位图的方式与 PAGImage 一致。

当视频时长比图片图层所需时长短时,视频会定格在最后一帧。

代码示例

android:

// 方式1,直接替换图片资源
for (int i = 0; i < selectData.size() && i < pagFile.numImages(); i++) {
    PAGMovie movie = makePAGMovie(selectData.get(i));
    pagFile.replaceImage(i, movie);
}
// 方式二,通过可编辑图层替换
int[] indices = pagFile.getEditableIndices(PAGLayer.LayerTypeImage);
for (int i = 0; i < selectData.size() && i < indices.length; i++) {
    PAGMovie movie = makePAGMovie(selectData.get(i));
    PAGLayer[] pagLayers = pagFile
            .getLayersByEditableIndex(indices[i], PAGLayer.LayerTypeImage);
    for (PAGLayer layer : pagLayers) {
        ((PAGImageLayer) layer).setImage(movie);
    }
}

iOS

// 常用替换用例1:PAGFile 直接替换
for (int i = 0; i < moviePaths.count && i < pagFile.numImages; i++) {
    PAGMovie *movie = [PAGMovie MakeFromFile:moviePaths[i]];
    [pagFile replaceImage:i data:movie];
}


// 常用替换用例2,通过 PAGImageLayer 替换
NSArray *indices = [pagFile getEditableIndices:PAGLayerTypeImage];
for (NSUInteger i = 0; i < moviePaths.count && i < indices.count; i++) {
  PAGMovie *movie = [PAGMovie MakeFromFile:moviePaths[i]];
  NSArray *imageLayers = [pagFile getLayersByEditableIndex:indices[i] layerType:PAGLayerTypeImage];
  for (PAGImageLayer *layer in imageLayer) {
      [layer setImage:movie];
  }
}
← UI场景及列表播放优化播放有声素材 →
公司地址:广东省深圳市南山区海天二路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号