圖片精靈動畫鼠標移動

Question

我整晚都在努力尋求幫助，但這並不好。 我想在這裏創建相同的效果：http://gifctrl.com在jQuery的幫助下。

我知道我需要跟蹤鼠標在x軸上的位置，但是對於我來說很困難的是如何以特定間隔移動背景。 另外，每個背景精靈都有不同數量的「幀」，所以如何讓所有幀都能播放？

我將非常感謝所有的幫助！

Answer 1

您可以定義它代表你的精靈一樣，（或包含任何你想要的）類：

function sprite(frames, frequency) { 
this.frames= frames; 
this.frequency= frequency; 
this.currentFrame= 0; 
this.getFrame = function() { return this.frames[this.currentFrame]; } 
this.next = function() { this.currentFrame = (this.currentFrame+1)%this.frames.length; } 
} 

現在，你有你的類，你可以實例化一個對象

var mysprite= new sprite(images, frequency); 

然後，創建一個更新函數來繪製精靈

function update() { 
setTimeout("update()",mysprite.frequency); 
// Do work 
// Example : 
var myframe = mysprite.getFrame(); 
// Draw the frame 
mysprite.next(); // For the next iteration 
} 

如果你把setTimeout函數放在開始時，它允許您確保更新頻率得到遵守。