html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>序列幀</title> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/main.css"/> </head> <body> <div class="page hidden"> <canvas class="page" id="p0"></canvas> </div>
<script src="js/zepto.min.js"></script>
<script src="js/createjs-2015.11.26.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
css 好像沒用
*{ margin:0; padding:0; } .re{ position: relative; } .ab{ position: absolute; } .hidden{ overflow: hidden; } body img{ width: 100%; }
js
$(document).ready(function(){
var pageH,pageW;
page= {
init: function () {
//阻止微信頁面下拉
$('body').on("touchmove", function (e) {
e.preventDefault();
});
//橫豎屏變換
$(window).resize(function () {
page.resize();
});
//這里必須得是圖片的長寬，一個像素都不能差
page.imgW = 750;
page.imgH = 1334;
//用來存放圖片
page.aniImgs = {'p0': [], 'p1': [], 'p2': [], 'p3': []}
page.resize();
page.loading.init();
},
resize: function () {
pageH = $(window).height();
pageW = $(window).width();
$(".page").width(pageW).height(pageH);
},
//圖片預加載
loading: {
init: function () {
page.loading._preload();
},
_preload: function () {
page.stage = {};
var manifest = [
'./img/panzi0.jpg'//得加載點什么。否則加載完成不執行
];
var queueBe = new createjs.LoadQueue(false);
queueBe.setMaxConnections(1);//設置通道數
queueBe.maintainScriptOrder = true;
queueBe.on("progress", function () {
var progress = queueBe.progress * 100;
progress = Math.floor(progress);
//加載中。。。，可用來做百分比，或進度條
});
queueBe.on("complete", function () {
console.log("加載完成")
//將圖片存入數組
for (var a = 0; a <= 399; a++) {
page._canvas.initBitmap("p0", a, './img/panzi' + a + '.jpg')
}
});
queueBe.loadManifest(manifest);
},
},
//核心方法
_canvas: {
initBitmap: function (key, i, strurl) {
var img = new Image();
img.src = strurl;
page.aniImgs[key][i] = img;
},
playAni: function (key, id, fps, num) {
if (fps == undefined) {
fps = 25;
}
page.aniKey = key;
if (page.stage[key] == undefined) {
page.len = page.aniImgs[key].length;
page.stage[key] = new createjs.Stage(id);
var container = new createjs.Container();
page.stage[key].canvas.width = page.imgW;
page.stage[key].canvas.height = page.imgH;
var data = {
"images": page.aniImgs[key],
"frames": {width: page.imgW, height: page.imgH, count: page.len, regX: 0, regY: 0},
"animations": {
run: [0, page.len - 1, num]
}
};
var spriteSheet = new createjs.SpriteSheet(data);
var animation = new createjs.Sprite(spriteSheet, "run");
container.addChild(animation);
page.stage[key].addChild(container);
}
page.mov++;
createjs.Ticker.reset();
createjs.Ticker.setFPS(fps);
createjs.Ticker.on("tick", page._canvas.tick);
},
tick: function () {
page.stage[page.aniKey].update();
}
}
};
page.init();
});
執行：25代表頻率，1代表循環，0代表單次，並停在最后一幀。
page._canvas.playAni('p0', 'p0', 25, 1);