用HTML5和JavaScript創建一個雪碧動畫

我遵循這個不錯的鏈接sprite animation創建動畫。但我只需要兩三步硬幣，我沒有得到我必須設置的位置。用HTML5和JavaScript創建一個雪碧動畫

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。

來源

2013-12-13 Abs

這裏是打你的spritesheet的另一種方法：

關鍵：既然你必須在每一幀requestAnimationFrame，你可以阻止你完成2-3 spritesheet的全劇本後請求。

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>

來源

2013-12-13 17:16:26 markE

下面是一個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 Sprite Animation。

來源

2016-02-14 16:27:36

用HTML5和JavaScript創建一個雪碧動畫

回答

相關問題