[web]pag分段播放问题

[pag-bbs-bot]

jenson

如何设置播放指定范围的动画？如动画时长4s，播放完成一轮后，再继续循环播放1s ～ 2.5s间的动画。
自己想到一个办法是，用pag-file的setStartTime()+ setDuration()实现，但是不起作用。

// 实例化 PAG
const PAG = await window.libpag.PAGInit();
// 获取 PAG 素材数据
const buffer = await fetch('https://st.moneydata.hk/res/uploadcdn-static/hkwallet/hongbao/20230130144659/pag-home-aimation2_bmp.pag').then(response => response.arrayBuffer());
// 加载 PAG 素材为 PAGFile 对象
const pagFile = await PAG.PAGFile.load(buffer);

// ----------------分段播放--------------------
// 设置pag开始播放时间点
pagFile.setStartTime(110001000);
// 设置duration
pagFile.setDuration(1.510001000);
// ----------------分段播放--------------------

// 将画布尺寸设置为 PAGFile的尺寸
const canvas = document.getElementById('pag');
canvas.width = window.document.documentElement.clientWidth;
canvas.height = pagFile.height() * canvas.width / pagFile.width();
// 实例化 PAGView 对象
const pagView = await PAG.PAGView.init(pagFile, canvas, { firstFrame: true });
await pagView.play();

其中setDuration(1.510001000)成功了，通过pagFile.startTime()得到的值是1000000us，但是动画仍然是从0开始的，运行起来似乎没有任何影响。

---

jenson

之所以有这个问题，是因为之前用lottie的时候用过分段播放；

lottie通过通过lottieObj.playSegments()设置[开始帧, 结束帧]，就能达到分段播放的目的。

---

jenson

最终demo代码：

// 实例化 PAG

const PAG = await window.libpag.PAGInit();

// 获取 PAG 素材数据

const buffer = await fetch('https://st.moneydata.hk/res/uploadcdn-static/hkwallet/hongbao/20230130144659/pag-home-aimation2_bmp.pag').then(response => response.arrayBuffer());

// 加载 PAG 素材为 PAGFile 对象

const pagFile = await PAG.PAGFile.load(buffer);

// 分段播放（注意：要将pagFile的width/height传给make）

const pagCom = PAG.PAGComposition.make(pagFile.width(), pagFile.height());

pagCom.addLayer(pagFile);

// 注意：是负数，原因看管理员的回复

pagFile.setStartTime(-1 * 1000 * 1000);

pagFile.setDuration(3 * 1000 * 1000);

// 将画布尺寸设置为 PAGFile的尺寸

const canvas = document.getElementById('pag');

// @ts-ignore

canvas.width = window.document.documentElement.clientWidth;

// @ts-ignore

canvas.height = pagFile.height() * canvas.width / pagFile.width();

// 实例化 PAGView 对象（注意：这里传入的对象是PAGComposition了）

const pagView = await PAG.PAGView.init(pagCom, canvas, { firstFrame: true });

pagView.setRepeatCount(100);

// 播放 PAGView

await pagView.play();

[pag-bbs-bot]

The above content was transferred from a legacy post on the PAG forum
以上内容搬运来自 PAG 论坛的历史帖子