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>

它看起来并不完美！对此有何帮助？非常感激。这是codepen output

Answer 1

我注意到你有17帧＆＃39;对于2992像素宽的图像。

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

使用animateSprite构建框架动画 - jQuery

1 个答案: