javascript - 寻找制作此动画的 DRY 方法

Question

我正在尝试制作此动画的 DRY 版本，我希望它可以无限循环播放。我应该注意什么才能做到这一点？

//fadeout
setTimeout(function(){$(".foot").fadeTo(1000, 0);}, 4000);
//change src
setTimeout(function(){$(".foot").attr("src","foot.png")}, 5000);
//fade in
setTimeout(function(){$(".foot").fadeTo(1000, 1)},6000)


setTimeout(function(){$(".foot").fadeTo(1000, 0);}, 10000);
//change src
setTimeout(function(){$(".foot").attr("src","follow.png")}, 11000);
//fade in
setTimeout(function(){$(".foot").fadeTo(1000, 1)},12000)

Answer 1

动画时序可以通过CSS实现@keyframes .

animationIteration 上的图像替换事件可以用jQuery实现。

这是最“干燥”。

// An array for the two images to toggle from
images = [
  "https://static.turbosquid.com/Preview/2014/07/03__20_05_28/foot_render_vray_1200x1200_001_main_image.jpg4ff0282c-0d04-4397-a6e0-855b6c0ec9f9Original.jpg",
  "https://content.marketearlybird.com/UploadedContent/Images/Follow%20Button%20Tick.png"
];

//  On animation iteration, change image.
$(".foot").on("webkitAnimationiteration oAnimationiteration msAnimationiteration animationiteration",function(){
  index = ($(this).attr("src") == images[0]) ? 1 : 0;
  $(this).attr("src",images[index]);
});

.foot{
  width:200px;
  animation-name: fadeInOut;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes fadeInOut {
  0%{opacity: 0}
  50%{opacity: 1}
  100%{opacity: 0}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="foot" src="https://static.turbosquid.com/Preview/2014/07/03__20_05_28/foot_render_vray_1200x1200_001_main_image.jpg4ff0282c-0d04-4397-a6e0-855b6c0ec9f9Original.jpg">