JavaScript动画,图像只动画一次

时间:2016-01-31 11:09:54

标签: javascript html css animation

我有以下代码:

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

3 个答案:

答案 0 :(得分:2)

这里有两个问题,一个是递增水平和垂直移动(每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>

答案 1 :(得分: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(更新小提琴)

答案 2 :(得分:1)

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

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

试试这个:

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

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

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

这很好用。