Question

我有以下代码：

HTML

<div class="gif">

</div>

<button class="stop">Stop</button>

CSS

.gif {
  background-image: url('https://img06.deviantart.net/4ba2/i/2012/053/c/c/stacey_run_sprite_sheet_by_django90-d4qo9pi.jpg');
  width: 140px;
  height: 220px;
}

的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);
});

不知何故，图像只会动画一次。如何保持动画（循环动画）？

这是JSFIDDLE

Answer 1

这里有两个问题，一个是递增水平和垂直移动（每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,-220];
var $positioncounter = 0;
var id;


$button.addEventListener('click', function () {
    if (id) return;
    id = setInterval(function () {
    $positioncounter++;
    if ($positioncounter >= $positionx.length) {$positioncounter = 2}
    $image.style.backgroundPosition = $positionx[$positioncounter] + 'px ' + $positiony[$positioncounter] + 'px';
  }, 100);
});

$button2.addEventListener('click', function () {
  clearInterval(id);
  id = null;
  $positioncounter = 0;
  $image.style.backgroundPosition = '0px 0px';
});

.gif {
  background-image: url('https://img06.deviantart.net/4ba2/i/2012/053/c/c/stacey_run_sprite_sheet_by_django90-d4qo9pi.jpg');
  width: 180px;
  height: 220px;
  background-repeat: no-repeat;
}
button {
  margin-top: 20px;
}
.stop {
  margin-left: 90px;
}

<div class="gif"></div>
<button class="start">Start</button> <button class="stop">Stop</button>

Answer 2

您的问题是您获得了返回String的backgroundPosition值，不是一个数字，所以你必须做一些操作才能使这个广告工作：

编辑：另一个问题是你的图像没有被正确划分（用于精灵）：所以我使用了另一个可以正常工作的图像：

<强> 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（更新小提琴）

Answer 3

我认为问题在于您的背景位置值。间隔工作正常，但背景位置没有变化！它始终设置为-140px。

如果您希望每次减少140。你必须使用变量。

试试这个：

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

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

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

这很好用。

JavaScript动画，图像只动画一次

3 个答案: