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>
</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);
时间： 2024-10-07 04:08:59