关于javascript:使用-apngjs-控制-apng-动画的播放

49次阅读

共计 1955 个字符，预计需要花费 5 分钟才能阅读完成。

在最近的需要中，设计师给了我两个 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 file

import 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
// 获取图片并转化成 ArrayBuffer
function 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…

功败垂成！

正文完