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

【问题标题】：How can i slow down my spritesheet animation in javascript?如何在 javascript 中减慢我的 spritesheet 动画？
【发布时间】：2016-06-24 06:43:13
【问题描述】：

我做了一个简单的 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>

有没有办法解决这个问题？

【问题讨论】：

requestAnimationFrame 以监视器刷新速度运行（或尝试运行）回调。控制动画速度的标准解决方案是将值更改绑定到时间，而不是屏幕更新。
@VallyN 但是我该怎么做呢？我已经尝试过 setInterval 和 setTimeout 之类的方法，但到目前为止我还没有让它们工作。
不不不。只是让计数增长不像现在那么快。将count++ 替换为count+=.1 并亲自查看。
@VallyN 我用 count+=.1 替换了 count++，但现在我的 spritesheet 只是从右向左滚动了一段时间，然后就消失了。很奇怪。它现在也一直在闪烁。
行x = (count % 16) * 450：将16乘以450并与宽度进行比较。

标签： javascript animation sprite-sheet arrow-keys

【解决方案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 用于跟踪当前帧显示的时间。

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

【讨论】：

【解决方案2】：

您可以使用 SpriteAnimJS 完成上述操作，它可以配置为使用 WebGL 和画布作为后备。

要使用它运行 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

【讨论】：