特效介绍
我爱模板网有个需求，做一个沿线路运动的光的动画，起初用GIF实现，发现动画质量太差了。只能用js将几十张png图片接连播放，如果网络差可能会有闪烁效果，当然也可以等所有图片都加载完再执行。但是，当我在网上闲逛时，发现了：canvas-keyframes.min.js，它是一款强大的可以将序列图片生成canvas并实现连续播放的js插件。而且它可以通过参数轻松配置动画的快慢，并且多次调用能在一个页面生成多个动画，由于生成的是canvas，控制样式也很方便。
使用方法
1、定义一个容器，用来显示canvas动画，控制其大小和帧一样大。如下：
1 | .animate{width: 640px; height:480px; margin:auto;} |
2 | <div class="animate"></div> |
2、引入
canvas-keyframes.min.js
1 | <script src="js/canvas-keyframes.min.js"></script> |
3、在页面或您的公共js中加入下面的函数，这个函数是我爱模板网对调用的封装，传几个参数更加方便
01 | function keyAnimate(dom,startnum,picnum,path,fps){ |
04 | for(var i=0;i<=picnum;i++){ |
06 | var img = new Image(); |
07 | img.onload = function(){ |
16 | img.onerror = function(){ |
18 | img.src = path+(startnum+i)+'.png'; |
22 | function keyFrames(imgArr){ |
23 | keyFrames = new CanvasKeyFrames(document.querySelector(dom), 'array', imgArr, { |
参数说明：
dom：需要显示动画的div的选择器
startnum：起始帧图片的名字，不要扩展名
picnum：序列图数量
path：图片相对于当前页面的位置
fps：不用说都明白！不传的话，默认是每秒24帧
4、调用示例
1 | keyAnimate('.animate',1,33,'img/',60); |
