如何在 javascript 中减慢我的精灵表动画

How can i slow down my spritesheet animation in javascript?

本文关键字：我的 精灵 动画 javascript      更新时间：2023-09-26

我做了一个简单的精灵表动画，但它太快了。由于某种原因，它也在闪烁。
我的代码： 

<!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>

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

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

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

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

你可以用SpriteAnimJS做上述事情，它可以配置为使用WebGL和canvas作为回退。

要用它运行精灵表，按照其演示：

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，而无需自己计算它们。

库 + 演示在这里

相关文章：