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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于图片序列帧播放,干净整洁版相关的知识，希望对你有一定的参考价值。

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

 

以上是关于关于图片序列帧播放,干净整洁版的主要内容，如果未能解决你的问题，请参考以下文章

关于WPF中Image控件不释放内存的问题

unity怎么让贴图序列播放

jquery序列帧播放(支持视频自动播放和不是全屏播放)

最简单的序列帧动画canvas插件

关于Unity中的帧动画

跟我一起学Unity3D代码中分割图片而且载入帧序列动画