使用HTML5和JavaScript创建精灵动画

Create a Sprite Animation with HTML5 and JavaScript

本文关键字：精灵动画创建 JavaScript HTML5 使用更新时间：2023-09-26

我遵循这个不错的链接精灵动画来创建动画。但我只需要两三次移动硬币，我没有到达我必须设置的位置。

Js报价

 function sprite (options) {
            var that = {},
            frameIndex = 0,
            tickCount = 0,
            ticksPerFrame = options.ticksPerFrame || 0,
            numberOfFrames = options.numberOfFrames || 1;
            that.context = options.context;
            that.width = options.width;
            that.height = options.height;
            that.image = options.image;
            that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
            tickCount = 0;
            // If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) {
            // Go to the next frame
            frameIndex += 1;
            } else {
            frameIndex = 0;
            }
            }
            }

完整的脚本在jsfidle上。

以下是另一种播放精灵表的方式：

关键：因为你必须在每一帧中请求AnimationFrame，所以你可以在完成2-3次完整的小精灵表播放后停止请求。

http://jsfiddle.net/m1erickson/h85Gq/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
    $(function(){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var spritePosition=0;
        var spriteWidth=100;
        var spriteHeight=100;
        var spriteCount=10;
        var spritePlayCount=0;
        var maxSpritePlays=2;
        var sheet=new Image();
        sheet.onload=function(){
            animate();
        }
        sheet.src="coinsprite.png";
        var fps = 20;
        function animate() {
            setTimeout(function() {
                if(spritePlayCount<maxSpritePlays){
                    requestAnimationFrame(animate);
                }
                // Drawing code goes here
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(sheet,
                    spritePosition*spriteWidth,0,spriteWidth,spriteHeight,
                    0,0,spriteWidth,spriteHeight);
                spritePosition++;
                if(spritePosition>spriteCount-1){
                    spritePosition=0;
                    spritePlayCount++;
                }
            }, 1000 / fps);
        }

    }); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

这里有一个用于spritesheet动画的简单代码。首先，我们需要创建一个画布。

<canvas id='canvas'></canvas>

现在我们需要一个精灵图像，根据您的精灵表更改代码。javascript代码是.

            var canvasWidth = 650; 
        var canvasHeight = 350;
        var spriteWidth = 864; 
        var spriteHeight = 280; 
        var rows = 2; 
        var cols = 8; 
        var width = spriteWidth/cols; 
        var height = spriteHeight/rows; 
        var curFrame = 0; 
        var frameCount = 8; 
        var x=0;
        var y=0; 
        var srcX=0; 
        var srcY=0; 
        var speed = 12; 
        var canvas = document.getElementById('canvas');
        canvas.width = canvasWidth;
        canvas.height = canvasHeight; 
        var ctx = canvas.getContext("2d");
        var character = new Image(); 
        character.src = "character.png";
        function updateFrame(){
            curFrame = ++curFrame % frameCount; 
            srcX = curFrame * width; 
            ctx.clearRect(x,y,width,height);    
            x+=speed;
        }
        function draw(){
            updateFrame();
            ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
        }
        setInterval(draw,100);

有关更多详细信息，请查看这篇关于JavaScript精灵动画的博客文章。