我爱模板网 > 特效插件 > 动画插件 >  canvas-keyframes.min.js将序列图生成帧动画插件正文

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);



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
下载 提取码/密码:6me9(点击复制密码) 预览
上一篇:轻量级jQuery动画库jquery.velocity.min.js 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢