Question

我制作了一个简单的spritesheet动画，但速度太快了。它也因某种原因闪烁。
我的代码：

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="raf.js"></script>
        <script>
            var ctx;
            var count = 0;
            var x;
            var y;
            var img = new Image();
            img.src = "images/character.png";
            img.onload = draw;

            function draw() {
                requestAnimationFrame(draw)

                ctx.clearRect(0,0,450,586);

                x = (count % 16) * 450;
                y = Math.floor(count / 16) * 586;
                ctx.drawImage(img, x, y, 450, 586, 0, 0, 450, 586);

                if(count == 16){
                    count = 0;
                } else {
                    count++;
                }
            }

            function init() {
                ctx = document.getElementById("canvas").getContext("2d");
            }

        </script>
    </head>
    <body onload = "init()">
        <canvas id="canvas" width="800" height="600">
        </canvas>
    </body>
</html>

有什么方法可以解决这个问题吗？

Answer 1

基本上，您需要限制动画帧速率。

        var ctx;
        var count = 0;
        var x;
        var y;
        var img = new Image();
        img.src = "images/character.png";
        img.onload = draw;

        var time = Date.now();
        var delay = 100;

        function draw() {
            requestAnimationFrame(draw)

            ctx.clearRect(0,0,450,586);

            x = (count % 16) * 450;
            y = Math.floor(count / 16) * 586;
            ctx.drawImage(img, x, y, 450, 586, 0, 0, 450, 586);

            if(Date.now() - time >= delay){
                if(count == 16){
                    count = 0;
                } else {
                    count++;
                }
                if ((Date.now() - time - delay) > delay){
                    time = Date.now();
                } else {
                    time += delay;
                }
            }
        }

        function init() {
            ctx = document.getElementById("canvas").getContext("2d");
        }

delay是以毫秒为单位的帧延迟（例如100，表示~10 fps），time用于跟踪当前显示的帧时间。

闪烁问题可能与精灵表中缺少精灵有关。

Answer 2

您可以使用SpriteAnimJS执行上述操作，可以将其配置为使用WebGL和canvas作为后备。

使用它运行spritesheet，根据它的演示：

var mySpriteAnimation = new SpriteAnim(canvasIdHere,useOnlyCanvasBoolean)
mySpriteAnimation.start({
            frameWidth: 100,
            frameHeight: 100,
            image: image_element, // must be preloaded
            fps: 10,
            className: 'class_name',
            loop: true,
            onStart: function() {},
            onComplete: function() {}
        });

正如您在设置中看到的那样，您可以轻松设置FPS，而无需自行计算。

图书馆+演示here

如何在javascript中减慢我的spritesheet动画？

2 个答案: