【问题标题】:EaselJS: Cannot get BitmapAnimation to display on stageEaselJS:无法让 BitmapAnimation 在舞台上显示
【发布时间】:2013-09-22 01:06:25
【问题描述】:

我正在尝试在舞台上绘制动画位图,但似乎无法正常工作。我可以验证动画是否已添加到控制台中的舞台,但它没有显示。

HTML:

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript:

var canvas = document.getElementById('canvas'),
    stage = new createjs.Stage(canvas),
    chopperImg = document.createElement('img'),
    spriteSheet,
    animation;

chopperImg.addEventListener('load', function ( e ) {

    spriteSheet = new createjs.SpriteSheet({
        images: [ chopperImg ],
        frames: { width: 64, height: 75, count: 10 },
        animations: {
            idle: [ 0, 9, 'idle', 4 ]
        }
    });

    animation = new createjs.BitmapAnimation(spriteSheet);
    animation.gotoAndPlay('idle');

    stage.addChild(animation);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(stage);
});

chopperImg.src = 'http://dutchnoobz.nl/chopper.gif';

我在这里制作了一个 JSFiddle 来演示我的问题:http://jsfiddle.net/WWpVX/1/

【问题讨论】:

    标签: javascript canvas easeljs createjs


    【解决方案1】:

    你的 GIF 的高度只有 73px,你的帧尺寸不能超过图像尺寸,我已经更新了你的小提琴,它在这里工作:http://jsfiddle.net/WWpVX/2/

    frames: { width: 64, height: 73, count: 10 }
    

    【讨论】:

    • 谢谢伙计,不会猜到的。
    猜你喜欢
    • 1970-01-01
    • 2014-07-01
    • 1970-01-01
    • 2016-04-30
    • 2014-08-07
    • 1970-01-01
    • 1970-01-01
    • 2015-12-21
    • 1970-01-01
    相关资源
    最近更新 更多