使用HTML5和JavaScript创建Sprite动画

Question

I follow this nice link sprite animation for creating animation. 我遵循这个漂亮的链接精灵动画来创建动画。 But I required only two or three moves of coin , I did not get where I have to set it. 但是我只需要动两三步硬币，就没有到达必须设置的位置。

JsFiddle 的jsfiddle

 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;
            }
            }
            }

complete script is on jsfidle. 完整的脚本在jsfidle上。

Answer 1

Here is an alternate way of playing your spritesheet: 这是播放电子表格的另一种方法：

The key: Since you must requestAnimationFrame in every frame, you can just stop requesting after you have completed 2-3 full plays of the spritesheet. 关键：由于必须在每个帧中都请求requestAnimationFrame，因此您可以在完成2-3次Spritesheet的完整播放后停止请求。

http://jsfiddle.net/m1erickson/h85Gq/ 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>

Answer 2

Here is a simple code for an spritesheet animation. 这是Spritesheet动画的简单代码。 First we need to create a canvas. 首先，我们需要创建一个画布。

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

Now we need an sprite image, change the code according to your spritesheet. 现在我们需要一个精灵图片，根据您的精灵表更改代码。 the javascript code is. 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);

For more details check this blog post about JavaScript Sprite Animation . 有关更多详细信息，请查看有关JavaScript Sprite Animation的博客文章。

使用HTML5和JavaScript创建Sprite动画

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-12-13 17:16:26

解决方案2
0 2016-02-14 16:27:36

使用HTML5和JavaScript创建Sprite动画

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-12-13 17:16:26

解决方案2 0 2016-02-14 16:27:36

解决方案1
2 已采纳 2013-12-13 17:16:26

解决方案2
0 2016-02-14 16:27:36