JavaScript动画，图像仅动画一次

我有以下代码：

HTML

Javascript

var $image = document.querySelector('.gif');
var $button = document.querySelector('.stop');

var id = setInterval(function () {
  $image.style.backgroundPosition = '-140px';
}, 60);

$button.addEventListener('click', function () {
  clearInterval(id);
});

不知何故，该图像仅设置一次动画。如何使其保持动画（循环动画）

---

这里是

我认为问题在于你的背景位置值。 间隔工作正常，但背景位置不变！ 它总是设置为-140px

如果你想每次减少140。你必须使用变量

试试这个：

var $position = 0;
var id = setInterval(function () {
    $position = $position - 140;
    $image.style.backgroundPosition = $position + 'px';
}, 60);

这改变了垂直和水平的位置。 我试着在小提琴上使用它，它应该是：

$image.style.backgroundPosition = $position + 'px 0';

---

这很好。

我认为问题在于你的背景位置值。 间隔工作正常，但背景位置不变！ 它总是设置为-140px

如果你想每次减少140。你必须使用变量

试试这个：

var $position = 0;
var id = setInterval(function () {
    $position = $position - 140;
    $image.style.backgroundPosition = $position + 'px';
}, 60);

这改变了垂直和水平的位置。 我试着在小提琴上使用它，它应该是：

$image.style.backgroundPosition = $position + 'px 0';

---

这很好。

这里有两个问题，一个是增加水平和垂直移动（每4步），另一个是图像不容易分割，因为它们的大小不同

一种方法是重新创建图像，另一种方法是这样的

var$image=document.querySelector（'.gif'）；
var$button=document.querySelector（'.start'）；
var$button2=document.querySelector（'.stop'）；
var$positionx=[0，-230，-515，-770,0，-230，-515，-770]；
var$positiony=[0,0,0,0，-220，-220，-220]；
var$positioncounter=0；
变量id；
$button.addEventListener（'click'，函数（）{
如果（id）返回；
id=设置间隔（函数（）{
$positioncounter++；
如果（$positioncounter>=$positionx.length）{$positioncounter=2}
$image.style.backgroundPosition=$positionx[$positioncounter]+'px'+$positiony[$positioncounter]+'px'；
}, 100);
});
$button2.addEventListener（'click'，函数（）{
清除间隔（id）；
id=null；
$positioncounter=0；
$image.style.backgroundPosition='0px 0px'；
});
.gif{
背景图像：url（'https://img06.deviantart.net/4ba2/i/2012/053/c/c/stacey_run_sprite_sheet_by_django90-d4qo9pi.jpg');
宽度：180px；
高度：220px；
背景重复：无重复；
}
钮扣{
边缘顶部：20px；
}
.停下来{
左边距：90像素；
}

开始-停止
这里有两个问题，一个是增加水平和垂直移动（每4步），另一个是图像大小不同，不容易分割

一种方法是重新创建图像，另一种方法是这样的


var$image=document.querySelector（'.gif'）；
var$button=document.querySelector（'.start'）；
var$button2=document.querySelector（'.stop'）；
var$positionx=[0，-230，-515，-770,0，-230，-515，-770]；
var$positiony=[0,0,0,0，-220，-220，-220]；
var$positioncounter=0；
变量id；
$button.addEventListener（'click'，函数（）{
如果（id）返回；
id=设置间隔（函数（）{
$positioncounter++；
如果（$positioncounter>=$positionx.length）{$positioncounter=2}
$image.style.backgroundPosition=$positionx[$positioncounter]+'px'+$positiony[$positioncounter]+'px'；
}, 100);
});
$button2.addEventListener（'click'，函数（）{
清除间隔（id）；
id=null；
$positioncounter=0；
$image.style.backgroundPosition='0px 0px'；
});
.gif{
背景图像：url（'https://img06.deviantart.net/4ba2/i/2012/053/c/c/stacey_run_sprite_sheet_by_django90-d4qo9pi.jpg');
宽度：180px；
高度：220px；
背景重复：无重复；
}
钮扣{
边缘顶部：20px；
}
.停下来{
左边距：90像素；
}

开始-停止
您的问题是您得到了返回字符串的backgroundPosition值，
不是数字，因此您必须进行一些操作才能使Anniation正常工作：

编辑：另一个问题是您的图像没有正确分割（用于精灵）：因此我使用了另一个可以正常工作的图像：

JS

var $image = document.querySelector('.gif');
var $button = document.querySelector('.stop');
//get the img width
var imgWidth = window.getComputedStyle($image,null).width.replace("px", "");

var id = setInterval(function () {
  // get backround style axis (x y)
  style=window.getComputedStyle($image,null).backgroundPosition.trim().split(/\s+/);

  // replace px by nothing to get number string
  var position = style[0].replace("px", "");
    $image.style.backgroundPosition = parseInt(position)-parseInt(imgWidth)+"px 0px";
}, 100);

$button.addEventListener('click', function () {
    clearInterval(id);
});

试试这个：（更新的Fiddle）
你的问题是你得到了返回字符串的backgroundPosition值，
不是数字，因此您必须进行一些操作才能使Anniation正常工作：

编辑：另一个问题是您的图像没有正确分割（用于精灵）：因此我使用了另一个可以正常工作的图像：

JS

var $image = document.querySelector('.gif');
var $button = document.querySelector('.stop');
//get the img width
var imgWidth = window.getComputedStyle($image,null).width.replace("px", "");

var id = setInterval(function () {
  // get backround style axis (x y)
  style=window.getComputedStyle($image,null).backgroundPosition.trim().split(/\s+/);

  // replace px by nothing to get number string
  var position = style[0].replace("px", "");
    $image.style.backgroundPosition = parseInt(position)-parseInt(imgWidth)+"px 0px";
}, 100);

$button.addEventListener('click', function () {
    clearInterval(id);
});

试试这个：（更新的Fiddle）
我可以问一下为什么你选择的答案没有考虑到你的图像大小在每一帧都不同，并且需要垂直移动吗？我可以问一下你为什么选择的答案没有考虑到你的图像大小在每一帧都不同，并且需要垂直移动吗？