在最近的需要中，设计师给了我两个 apng 格局的动图，要求是在同样的地位，第一个动图播放1遍，第二个动图循环播放，两头要天然连接和过渡。
apng 格局的动图是我第一次应用到的，我对它的理解仅仅局限于“会动的png图片”。起初几经搜寻，总算是把 apng 的一些知识点给补全了。因为网上对于 apng 的材料十分多，因而就不在这里对 apng 进行过多的介绍了。
浏览器默认没有提供 api 让咱们去操纵 apng，所以咱们无奈间接监听 apng 的播放事件，更无法控制它的播放动作。怎么办呢？还好有万能的 npm，间接搜寻 apng 就呈现了一个名为 apng-js 的库，它能够满足咱们的需要。
apng-js 写得很简洁，其外围原理是依照 apng 的标准解析 apng 图片的数据，而后把它们绘制到 canvas 上。与此同时，它还提供了 api 让咱们去管制 apng 图片的播放、暂停、复位，更能监听这些图片播放中产生的事件，使得咱们领有了对 apng 的齐全控制权。废话不多说，间接上例子让咱们看看 apng-js 是如何实现咱们的需要的。
- 首先在 html 中把
<canvas>元素筹备好，而后引入 apng-js 库，初始化 canvas 的尺寸和图片资源。
<canvas id="canvas"></canvas>// js fileimport parseAPNG from "https://cdn.skypack.dev/apng-js@1.1.1";const img1Src = 'https://official-account-web-1251316161.cos.ap-guangzhou.myqcloud.com/mqq-static/open-platform-animate-1-new.png'const img2Src = 'https://official-account-web-1251316161.cos.ap-guangzhou.myqcloud.com/mqq-static/open-platform-animate-2-new.png'const canvas = document.querySelector('#canvas')canvas.width = 640;canvas.height = 540;canvas.style = 'zoom: 0.75';const ctx = canvas.getContext('2d');- 因为 apng-js 只承受
ArrayBuffer模式的数据，因而咱们须要自行写函数来把 apng 转化成 ArrayBuffer。
// js file// 获取图片并转化成 ArrayBufferfunction getImgBuffer(url) { return new Promise(async resolve => { const blob = await fetch(url).then(res => res.blob()); const reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = () => { resolve(reader.result); }; });}- 拿到了 ArrayBuffer 格局的 apng 图片资源当前，就能够通过 apng-js 来进行解析并应用了。这里我创立了一个名为
createApngPlayer()的专用函数，输入 apng-js 的 player 实例，不便咱们的后续应用。
async function createApngPlayer(url, ctx, options = {}) { const imgBuffer = await getImgBuffer(url); const apng = parseAPNG(imgBuffer); Object.keys(options).forEach(key => { apng[key] = options[key]; }); const player = await apng.getPlayer(ctx); return player;}- 失去了 player 实例当前，就能够用它来管制 apng 的播放啦！
;(async () => { const player1 = await createApngPlayer(img1Src, ctx, { numPlays: 1 }); // 设置图1的 numPlays 为1，让其只播放一次 const player2 = await createApngPlayer(img2Src, ctx); player1.play(); // 图1播放 player1.on('end', () => { // 监听图1的播放，当其播放结束时，马上开始图2的播放 player2.play(); });})()实现成果能够看我在 Codepen 的例子：
https://codepen.io/jrainlau/p...
功败垂成！