apng-canvas的使用

最近第一次接触APNG,看到了png结尾的图片还能动，也是蛮惊讶的。

1. APNG的理解

APNG是png格式的扩展，支持动图.

个人理解APNG相比于gif的显著优缺点:

APNG画质更加清晰
gif的兼容性更高

2 APNG的图怎么找

APNG图片下载

1634787217(1).png

3 apng-canvas使用步骤

3.1下载包

进入apng-canvas官方地址,直接执行

 git clone https://github.com/davidmz/apng-canvas.git

将build/apng-canvas.min.js放到自己的项目里面

3.2 在main.js里面全局引入,或者单个页面局部引入都行

import "../js/apng-canvas.min.js";

3.3 需求代码

apng-canvas主要用于监听动画的过程

APNG可以直接像普通png一样正常使用<img src="../img/8.png" alt="">,但是如果需要去控制显示动画,比如这里的预先加载APNG.parseURL以及每次点击,需要重新开始动画animation.rewind(),还是通过apng-canvas方便点.假设在vue中用v-if或者v-show,都很难去满足需求的.

<template>
  <div>
    <div style="color:white;margin-bottom:10px" @click="repeatShow()">点击</div>
    <div>
      <canvas ref="canvas" width="174" height="222"></canvas>
    </div>
  </div>
</template>

<script>
import "../js/apng-canvas.min.js";
export default {
  data() {
    return {
      url: require('../img/8.png'),
    }
  },
  created() {
    this.preloadAPNG() // 预加载
  },
  methods: {
    preloadAPNG(){
      if(APNG.preloaded) return;  // 给他新增一个属性,后续判断是不是已经加载了
      APNG.preloaded = true;
      APNG.parseURL(this.url);
    },
    repeatShow() {
      APNG.parseURL(this.url) // 如果已经加载了,不会重复加载
      .then((animation) => {
        animation.rewind();  // 让动画回复到最初始的状态,并且暂停
        animation.addContext(this.$refs.canvas.getContext("2d")); 
        // 在此canvas画布上下文中播放动画
        animation.play(); // 开始播放动画
        setTimeout(() => {
          animation.removeContext(this.$refs.canvas.getContext("2d"));  
          // playTime为完整动画周期的时间（毫秒）,
          这里表示完成一个动画的时候后去从动画从画布中卸载
        }, animation.playTime);
      }).catch(() => {
        this.$toast("该浏览器不支持apng动画~");
      });
    }
  }
}
</script>

上面每行都有中文注释，也可以参考文档:

以下为预加载: 1634788519(1).png

以下为多次点击,重新初始化动画并且播放

测试2.gif

前段时间情绪低迷,终于开启了很久就想写又没有写的公众号,主要是记录在前端行业中的摸爬滚打以及生活中真实趣事与感悟。
技术虽菜，但是不能放弃,慢慢进步呀~

欢迎关注,一起唠嗑!
微信公众号：程序媛爱唠嗑