2019-11-20 canvas实现序列帧动画
(function () {
//1.创建要加载的图片
var imgs = function () {
var fileList = [
"static/images/0.jpg",
"static/images/1.jpg",
"static/images/2.jpg",
"static/images/3.jpg",
"static/images/4.jpg",
"static/images/5.jpg",
"static/images/6.jpg",
"static/images/7.jpg",
"static/images/8.jpg",
"static/images/9.jpg",
"static/images/10.jpg",
"static/images/11.jpg",
"static/images/12.jpg",
"static/images/13.jpg",
"static/images/14.jpg",
"static/images/15.jpg",
"static/images/16.jpg",
"static/images/17.jpg",
"static/images/18.jpg",
"static/images/19.jpg",
"static/images/20.jpg",
"static/images/21.jpg",
"static/images/22.jpg",
"static/images/23.jpg",
"static/images/24.jpg",
"static/images/25.jpg",
"static/images/26.jpg",
"static/images/27.jpg",
"static/images/28.jpg",
"static/images/29.jpg",
"static/images/30.jpg",
"static/images/31.jpg",
"static/images/32.jpg",
"static/images/33.jpg",
"static/images/34.jpg",
"static/images/35.jpg",
"static/images/36.jpg",
"static/images/37.jpg",
"static/images/38.jpg",
"static/images/39.jpg",
"static/images/40.jpg",
"static/images/41.jpg",
"static/images/42.jpg",
"static/images/43.jpg",
"static/images/44.jpg",
"static/images/45.jpg",
"static/images/46.jpg",
"static/images/47.jpg",
"static/images/48.jpg",
"static/images/49.jpg",
];
return fileList;
}
//2.加载图片
var loadImgs = function(fn) {
var loaded = 0; //记录已经加载图片的个数
var loadedImgsArr = []; //用来存放加载的图片
var imgsArr = imgs();
var imgObj = null;
imgsArr.forEach(function(value, index, arr) {
imgObj = new Image();
imgObj.onload = function() {
loaded++;
//这里所有的图片加载完成
if (loaded == imgsArr.length) {
fn && fn(loadedImgsArr);
}
}
imgObj.src = imgsArr[index];
loadedImgsArr.push(imgObj);
});
}
//3.配置参数
var config = {
fps: 10, //帧率
parentBox: document.querySelectorAll('.page-home1')[0]
}
//4.创建canvas
var createCanvas = function() {
var canvas = document.createElement('canvas');
config.parentBox.appendChild(canvas);
var { offsetWidth, offsetHeight } = canvas.parentNode;
canvas.width = 750;
canvas.height = 1508;
return canvas;
}
//5.有了图片和canvas对象，创建动画函数
var ani = function(imgsArr, cb) {
var canvas = createCanvas();
//图片的宽高
var offsetWidth = imgsArr[0].width;
var offsetHeight = imgsArr[0].height;
var ctx = canvas.getContext('2d');
var n = 0;
var timer = setInterval(function() {
//清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
//绘制图片
ctx.drawImage(
imgsArr[n],
0, 0, offsetWidth, offsetHeight,
0, 0, canvas.width, canvas.height
);
n++;
//播放到最后一张图片
if (n == imgsArr.length) {
n = 0;
cb && cb(timer);
}
}, 1000 / config.fps);
}
var init = function() {
//加载图片，执行动画
loadImgs(function(imgs) {
ani(imgs, function(timer) {
clearInterval(timer);
$(".img-2").css("display","block").addClass("heartBeat")
});
});
}
init();
})()
