最佳实践 - [=10=] 使用定时背景图像更改的动画

Question

我对编码还很陌生/javascript 并且想获得有关我正在使用的方法的反馈。我在尝试导入多个 adobe animate html5/javascript 文件时感到很沮丧，所以我恢复到：

逐帧导出动画 (.png)
使用 javascript 调用本地文件并在给定特定间隔

filename1 - 是文件夹文件文件名 - 是 .png 文件名

这是不好的做法还是有更好更有效的方法来做到这一点？我计划在用户单击图像的不同区域时在交互式站点中触发它。担心不断调用文件可能是个问题，我不确定如果有人在一个动画还在的时候触发了一个新动画会发生什么运行?

到目前为止它似乎运行没问题，如果我在动画运行时与网站互动，它每隔一段时间就会 'jitter'。

function playTargetAnimation (filename1,filename) {
      let i = 1;
      $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + '0001' + ".png");
      $('#'+filename1).show();
      let runAnim = setInterval(function(){
      let imgCnt = "00" + ("0" + i).slice(-2);
       $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + imgCnt + ".png");
       console.log('src', "images/" + filename +"/" + filename + imgCnt + ".png");
       i++;
       if(i === 41) {
         clearInterval(runAnim);
       };
     }, 25);
  }

Answer 1

@import "compass/css3";

.hi {
  margin: 20px;
  width: 50px;
  height: 72px;
  background-image: url("https://s.cdpn.io/79/sprite-steps.png");
  
}
.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}

<div class="hi"></div>
<p>↑ mouse over to view animation</p>
<div><img src="https://s.cdpn.io/79/sprite-steps.png" /></div>

如果你更喜欢javascript，requestAnimationFrame比setInterval好很多。

虽然我的建议是css3动画doc in mdn:

先把这些帧图片有规律的合成一个图片文件。

然后用“动画”和“步数功能”写css。

.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}

最佳实践 - [=10=] 使用定时背景图像更改的动画

Best Practice - Javascript Animation using timed background image changes

javascript

animation

setinterval

adobe-animate

最佳实践 - [​​=10=] 使用定时背景图像更改的动画

Best Practice - Javascript Animation using timed background image changes

javascript

animation

setinterval

adobe-animate

最佳实践 - [=10=] 使用定时背景图像更改的动画