canvas-keyframes.min.js将序列图生成帧动画插件

    我爱模板网有个需求，做一个沿线路运动的光的动画，起初用GIF实现，发现动画质量太差了。只能用js将几十张png图片接连播放，如果网络差可能会有闪烁效果，当然也可以等所有图片都加载完再执行。但是，当我在网上闲逛时，发现了：canvas-keyframes.min.js，它是一款强大的可以将序列图片生成canvas并实现连续播放的js插件。而且它可以通过参数轻松配置动画的快慢，并且多次调用能在一个页面生成多个动画，由于生成的是canvas，控制样式也很方便。
1、定义一个容器，用来显示canvas动画，控制其大小和帧一样大。如下：

.animate{width: 640px; height:480px; margin:auto;}
<div class="animate"></div>

2、引入canvas-keyframes.min.js

<script src="js/canvas-keyframes.min.js"></script>

3、在页面或您的公共js中加入下面的函数，这个函数是我爱模板网对调用的封装，传几个参数更加方便

function keyAnimate(dom,startnum,picnum,path,fps){
    var count = 0;
    var imgArr = [];
    for(var i=0;i<=picnum;i++){
        (function(i){
            var img = new Image();
            img.onload = function(){
                img.onload = null;
                count++;
                // 有可能图片加载有快有满慢，所以用角标存
                imgArr[i-1] = img;
                if(count==picnum){
                    keyFrames(imgArr);
                }
            }
            img.onerror = function(){
            }
            img.src = path+(startnum+i)+'.png';
        })(i);
    }
    var keyFrames;
    function keyFrames(imgArr){
        keyFrames = new CanvasKeyFrames(document.querySelector(dom), 'array', imgArr, {
            fps:fps || 24  //动画速度
        });
        keyFrames.play();
    }
}

参数说明：
    dom：需要显示动画的div的选择器
    startnum：起始帧图片的名字，不要扩展名
    picnum：序列图数量
    path：图片相对于当前页面的位置
    fps：不用说都明白！不传的话，默认是每秒24帧

4、调用示例

keyAnimate('.animate',1,33,'img/',60);

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！