使用animateSprite動畫框 - jQuery

Question

基本上，我有一個picture 17幀，我想動畫使用animateSprite該圖片。 這裏是我的代碼：

jQuery("div.model").animateSprite({ 
    loop: true, 
    fps: 12 , 
    animations: { 
     move: [0, 1, 2, 3, 4, 5, 6, 7, 8 , 9, 10, 11, 12, 13, 14, 15, 16 ], 
    }, 
}); 

這是我的CSS：

div.model { 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 423px; 
    width: 145px; 
    background-image: url(http://i.imgur.com/ANiuASa.jpg); 
} 

HTML：

<div class="model"></div> 

，它似乎並沒有perfectely工作！ 對此有何幫助？非常感激。這裏有一個codepen output

Answer 1

我注意到你有17'幀'爲2992px寬的圖像。

2992px/17 = 176px不是145px。

我調整了這一點：

$(".model").animateSprite({ 
    loop: true, 
    fps: 12, 
    animations: { 
    walkRight: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16] 
    } 
}); 

div.model { 
    height: 423px; 
    width: 176px; 
    background-image: url(http://i.imgur.com/ANiuASa.jpg); 
} 

Codepen Demo