序列帧播放图片，利用canvas插件实现

最新推荐文章于 2024-02-23 18:01:36 发布

原创最新推荐文章于 2024-02-23 18:01:36 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #javascript

本文介绍了一款基于HTML5 canvas的序列帧播放插件，可用于创建图片动画。该插件支持控制播放帧率、播放时长，并提供数组和雪碧图两种图片模式。关键功能包括设置封面帧、帧率、循环次数等，适用于网页开发中的动态图片效果制作。通过提供的链接可以查看详细代码和实现效果。

分享一个宝藏序列帧插件，简单可复用！

图片序列帧播放工具,用canvas操作图片动画，封装了常用方法。

①可以控制播放图片帧率

②可以控制图片多少s内完成播放

③图片模式可为数组array或者sprite是基于宽度扩展的单张雪碧图，通常开发中经常适用的都是array模式。

基本方法以及其他方法如下描述所示：

el [canvas容器,必须是DOM对象]
- type [图片模式，'array'和 'sprite'模式，array是图片对象数组，sprite是基于宽度扩展的单张雪碧图]
- imgs [图片帧对象数组或单图，对应不同模式]
- options {
  cover: 10, //指定封面帧，默认是0
  fps: 30, //默认是24
  loop: 10 //初始化默认的循环次数，可以手动设置大于等于1的整数。在formTo中可以设置。默认是infinite。
  width: 300, //注意，隐藏元素是拿不到宽度的，所以特殊情况下需要指定宽度
  height: 300,
  _iw: 300, // 雪碧图中单个图片的宽度
  _ih: 300, // 雪碧图中单个图片的高度
  framesCount: 10 // 雪碧图帧数
  }

话不多说上代码！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简单序列帧播放</title>
  </head>
  <body>
    <div class="app"></div>
    <script src="./js/canvas-keyframes.min.js"></script>
    <script>
      window.addEventListener("load", () => {
        var count = 0;
        //这里的图片模式为array模式
        const FrameImgArr = [];
        for (var i = 0; i <= 47; i++) {
          (function (i) {
            var img = new Image();
            img.onload = function () {
              img.onload = null;
              count++;
              FrameImgArr[i - 1] = img;
              if (count == 47) {
                initKeyFrames(FrameImgArr);
              }
            };
            img.onerror = function () {};
            img.src = "./img/gift1/" + i + ".png";
          })(i);
        }
      });
      function initKeyFrames(imgArr) {
        const keyFrames = new CanvasKeyFrames(
          document.querySelector(".app"),
          "array",
          imgArr,
          {
            fps: 24,
            width: 720,
            height: 1280,
          }
        );
        keyFrames.play();
      }
      initKeyFrames(FrameImgArr);
    </script>
  </body>
</html>

具体操作细节可看下面链接！

https://github.com/wenyiweb/canvasKeyFrames

实现效果：