使用apng-js,apng动画连续播放,取代gif

通过使用apng-js可以控制播放图片,或者点击按钮达到播放多次动画的效果,在动画播放结束页可以执行一些操作。

废话不多说,直接上代码

1、npm install apng-js

2、新建apng.js文件,里面做了一些通用封装

javascript 复制代码
import parseAPNG from 'apng-js';
/**
 * 获取图片ArrayBuffer
 * @param url 图片地址
 * @returns {Promise<ArrayBuffer>}
 */
export 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);
   };
  });
}

/**
 * 获取apng图片的控制实例
 * @param url 图片地址
 * @param options apng配置参数
 * @returns {Promise<APNG>}
 */
export async function getApng(url, options = {}) {
  const imgBuffer = await getImgBuffer(url);
  const apng = parseAPNG(imgBuffer);
  Object.keys(options).forEach((key) => {
   apng[key] = options[key];
  });
  return apng;
}


/**
 * 播放anpng
 * @param apngFile apng图片
 * @param canvasClass className
 * @param canvasWidth canvasWidth
 * @param canvasWidth canvasWidth
 * @param appendParent 需要追加到 父组件id
 */
export async function playApng(apngFile, canvasClass,appendParent, canvasWidth=375,canvasHeight=375,canvasStyles) {
  let apngObj = null
  let apngPlayer = null
  await getApng(apngFile).then(res => {
    apngObj = res
  })
  if (!apngObj) {
    return
  }
  const container = document.getElementById(appendParent); // 放到 某个 模块下
  let canvas = document.createElement('canvas');// 每次新建canvas,可以达到类似于敲木鱼多次播放的效果(播放结束后该canvas自动隐藏)
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  canvas.setAttribute('class', canvasClass);
  Object.assign(canvas.style, canvasStyles);
  container.appendChild(canvas);
  // willReadFrequently: true可以提升 canvas 渲染速度
  apngObj.getPlayer(canvas.getContext('2d', { willReadFrequently: true })).then(res => {
    apngPlayer = res
    // 开始播放apng动画
    apngPlayer.play()
    // 添加动画播放结束监听事件
    apngPlayer.on('end', () => {
      // 动画播放结束,当前的canvas隐藏(或者做其他动作)
      canvas.style.display = 'none';
    })
  })
}
export default {
  getImgBuffer,
  getApng,
  playApng
};

3、对应页面引入上面定义好的apng.js,具体路径根据自己项目定

javascript 复制代码
import Apng from '@/utils/apng.js'
import pngSrc from '@/static/makeCake/xxx.png'

4、传入具体的apng图片(本地地址)、canvas命名和apng要插入的某个父容器id

javascript 复制代码
const canvasPlay = () => {
  let apngWidth = 300 //宽和高是必须要的
  let apngHeight = 300
  let apngFile = pngSrc
// canvasStyle 按需设置,看自己需要放置的位置
  let canvasStyle = {
    position: 'absolute',
    bottom: '0',
    zIndex: '12',
    left: '50%',
    transform: 'translateX(-50%)'
  }
  Apng.playApng(pngSrc, 'canvasName', 'canvasParent', apngWidth, apngHeight, canvasStyle)
}

canvasPlay () // 执行
相关推荐
你怎么知道我是队长14 分钟前
python-input内置函数
开发语言·python
前端康师傅24 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang42 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6661 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼1 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心1 小时前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt1 小时前
真的!真的就一句话就能明白this指向问题
前端·javascript
jyan_敬言1 小时前
【C++】string类(二)相关接口介绍及其使用
android·开发语言·c++·青少年编程·visual studio
慕y2741 小时前
Java学习第十六部分——JUnit框架
java·开发语言·学习
liulilittle2 小时前
SNIProxy 轻量级匿名CDN代理架构与实现
开发语言·网络·c++·网关·架构·cdn·通信