0.0.6 • Published 1 year ago
libpag-lite-miniprogram v0.0.6
libpag-lite-miniprogram
介绍
libpag-lite-miniprogram 是 libpag 在微信小程序平台的简化版 SDK
特性
- 基于 Javascript + WebGL,不使用 WebAssembly
- 仅支持播放包含单独一个 BMP 视频序列帧的 PAG 动效文件
- 包体minify只有 57KB,GZip之后只有 15KB,比完整版 libpag 小很多
- 具有更好的兼容性
关于 BMP 序列帧
导出单一 BMP 序列帧的 PAG 文件
点击菜单“文件” -> “导出” -> “PAG File(Panel)...”,选择需要导出的合成,点击设置按钮,在根节点勾选BMP,导出全BMP预合成的PAG文件。
查看 PAG 文件是否为单一 BMP 序列帧
可以下载 PAGViewer 打开 PAG 文件,点击"视图"->"显示 编辑面板",在编辑面板中我们能看到 Video 的数量,当 Video数量为 1 时,即为单一 BMP 序列帧。
快速开始
- npm 依赖
$ npm install libpag-lite-miniprogram
点击「微信开发者工具」- 「工具」- 「构建npm」,进行小程序 npm 依赖构建
- 绘制
<!-- index.wxml -->
<canvas type="webgl" id="pag" style="width: 300px; height:300px;"></canvas>
// index.js
import { PAGView } from 'libpag-lite';
Page({
onReady() {
wx.createSelectorQuery().select('#pag').node().exec(async(res) => {
const canvas = res.node
wx.request({
url,
method: 'GET',
responseType: 'arraybuffer',
success(res) {
const pagView = PAGView.init(res.data, canvas);
pagView.play();
},
});
})
}
})
使用指南
缓存
因为 PAG 解码的时候用到了 VideoDecoder,而 VideoDecoder 的解码并不支持 blobURL,所以会把 BMP 预合成的视频数据缓存在本地。
为避免PAG的缓存把用户缓存目录内存占用过高,建议在不需要使用PAG的时候,调用 clearCache()
方法进行缓存清理。
API
PAGView
static create(mp4Data, canvas, options)
创建 View 实例
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
data | ArrayBuffer | PAG文件 | Y | |
canvas | HTMLCanvasElement | 用于绘图的 canvas 标签 | Y |
play(): Promise\<void>
播放
pause(): void
暂停
stop(): void
停止
destroy(): void
销毁
isPlaying(): boolean
是否播放中
isDestroyed(): boolean
是否已经销毁
duration(): nunber
动画持续时间,单位:秒
setRepeatCount(repeatCount): void
设置动画重复的次数
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
repeatCount | number | 设置动画重复的次数,如为 0 动画则无限播放。 | 1 | N |
getProgress(): number
返回当前播放进度位置,取值范围为 0.0 到 1.0
setProgress(value): Promise\<boolean>
设置播放进度位置
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
progress | number | 设置播放进度位置,取值范围为 0.0 到 1.0 | Y |
scaleMode(): ScaleMode
返回当前填充模式
setScaleMode(scaleMode: ScaleMode)
指定内容的填充模式
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
scaleMode | ScaleMode | 缩放模式,可选值:None 、Stretch 、 LetterBox 和 Zoom | LetterBox | N |
addListener(eventName, listener):void
增加事件监听
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
eventName | string | 事件名称 | Y | |
listener | funtion | 监听器 | Y |
事件列表:
名称 | 说明 |
---|---|
onAnimationStart | 动画开始播放 |
onAnimationCancel | 动画取消播放 |
onAnimationEnd | 动画结束播放 |
onAnimationRepeat | 动画循环播放 |
removeListener(eventName, listener?):void
增加事件监听
名称 | 类型 | 说明 | 默认值 | 必传 |
---|---|---|---|---|
eventName | string | 事件名称 | Y | |
listener | funtion | 监听器,如不传入 listener 则移除该事件下所有监听器 | undefined | N |
getDebugData():DebugData
clearCache():void
清理 PAG 产生的缓存
Interface
DebugData
键 | 类型 | 说明 | 默认值 |
---|---|---|---|
FPS | number | 过去一秒内渲染帧数量 | 0 |
getFrame | number | 当前帧获取耗时,单位 ms | 0 |
draw | number | 当前帧渲染耗时,单位 ms | 0 |
decodePAGFile | number | PAG 文件解码耗时,单位 ms | 0 |
coverMP4 | number | 合成 MP4 耗时,单位 ms | 0 |
writeFile | number | 写入文件耗时,单位 ms | 0 |
createDecoder | number | 创建解码器耗时,单位 ms |
Enum
ScaleMode
填充模式
键 | 类型 | 值 | 说明 |
---|---|---|---|
None | String | None | 不缩放 |
Stretch | String | Stretch | 拉伸内容到适应画布 |
LetterBox | String | LetterBox | 根据原始比例缩放内容 |
Zoom | String | Zoom | 根据原始比例被缩放适应,一个轴会被裁剪 |