记一次使用apng动画两种方式

1. apng-canvas
2. apng-js

1. 使用apng-canvas做apng动画

使用起来代码简单，容易理解；但是监听动画的过程。

APNG

APNG 全称是 Animated Portable Network Graphics ， 是 PNG 格式的动画扩展。APNG 的第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块里。这里有点类似于视频的关键帧，关键帧有完整的图像信息，而两个关键帧之间只保留了变化的信息。
简单来说，APNG 支持全彩和透明，无杂边问题.

但并不是所有软件都支持APNG。

Android上有APNG View等，iOS上有APNGKit等

而Web上，Firfox和Safari是支持APNG，Chrome是支持WebP的。

所以我们要在Web上使用APNG可以使用Canvas

Canvas & APNG

我们可以使用 apng-canvas库。

举例

APNG.ifNeeded().then(function() {var images = document.querySelectorAll(".apng-image");for (var i = 0; i < images.length; i++) APNG.animateImage(images[i]);
});

APNG这个对象是apng-canvas这个库提供的，ifNeeded()函数是用来判断浏览器是否支持APNG。

APNG.animateImage()是需要传入一个 Image Element，之后就交给Canvas去处理了。

2. 使用apng-js做apng动画

注：底部有作者 apng.vue的组件源码作参考

apng-js

apng-js 官方demo

使用方式

import parseAPNG from 'apng-js';const apng = parseAPNG(buffer);
if (apng instanceof Error) {// handle error
}
// work with apng object

parseAPNG的参数是一个ArrayBuffer类型，比起apng-canvas的使用要较为复杂一些。
在这里我就举一下我之前的做法：

我们需要的是加载本地和远端的apng图片来进行动画操作.

因为最终参数需要一个ArrayBuffer类型的，而我们只有一张图片的url，因此需要进行转换。
经过测试得出转换步骤如下：

1. 先去请求这张图片以返回类型设为blob类型

// 加载图片资源，得到blob类型的值
loaderURL(url) {function createXmlHttpRequest() {if (window.ActiveXObject) {return new ActiveXObject('Microsoft.XMLHTTP');} else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}return new Promise((resolve) => {let xhr = createXmlHttpRequest();xhr.open("get", url, true);xhr.responseType = "blob";xhr.onload = function (res) {if (this.status == 200) {var blob = this.response;resolve(blob);}}xhr.send();})
}

2. 将blob转换成ArrayBuffer类型

// 将blob转换成buffer
blobToArrayBuffer(blob) {return new Promise((resolve) => {// Blob 转 ArrayBufferlet reader = new FileReader();reader.readAsArrayBuffer(blob);reader.onload = function() {console.log(reader.result)resolve(reader.result)}})
}

3. 可以使用apng-js的parseAPNG得到apng对象，通过该对象可以获得动画播放器player

var apng = parseAPNG(buffer);
apng.getPlayer(canvas.getContent('2d')).then(player => {// 调用播放动画player.play();
})

player对象中有

• play – playback started;
• frame – frame played (frame number passed as event parameter);
• pause – playback paused;
• stop – playback stopped;
• end – playback ended (for APNG with finite count of plays).
  通过官方文档可看出，我们可以监听整个动画的事件。
  官方demo中监听代码片段
  

作者apng.vue源码

<template lang="pug">.apng-div(ref="apng-div" v-if="src")canvas(ref="apng-canvas")
</template><script>
// require('./../libs/apng-canvas.min.js')
import commonMixin from '@/mixins/commonMixin'
import parseAPNG from 'apng-js'export default {mixins: [commonMixin],data() {return {}},props: {width: {type: String | Number,required: true},height: {type: String | Number,required: true},src: {type: String,required: true}},mounted() {let canvas = this.$refs['apng-canvas'];this.loaderURL(this.src).then(blob => {console.log(blob)this.blobToArrayBuffer(blob).then(arrayBuffer => {let apng = parseAPNG(arrayBuffer);canvas.width = apng.width;canvas.height = apng.height;let scale = this.width * this.remVal / apng.widthcanvas.style = 'zoom: ' + scale;apng.getPlayer(canvas.getContext('2d')).then(player => {player.play();})})})},methods: {calc(val) {return this.remVal * val;},blobToArrayBuffer(blob) {return new Promise((resolve) => {// Blob 转 ArrayBufferlet reader = new FileReader();reader.readAsArrayBuffer(blob);reader.onload = function() {console.log(reader.result)resolve(reader.result)}})},loaderURL(url) {function createXmlHttpRequest() {if (window.ActiveXObject) {return new ActiveXObject('Microsoft.XMLHTTP');} else if (window.XMLHttpRequest) {return new XMLHttpRequest();}}return new Promise((resolve) => {let xhr = createXmlHttpRequest();xhr.open("get", url, true);xhr.responseType = "blob";xhr.onload = function (res) {if (this.status == 200) {var blob = this.response;resolve(blob);}}xhr.send();})}}
}
</script><style lang="less" scoped></style>