关于图片序列帧播放,干净整洁版

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

 

posted on 2017-05-18 15:16  楚云实  阅读(2495)  评论(0)    收藏  举报

导航