javascript - 简单图像幻灯片上的随机动画

Question

我想在幻灯片图像上应用随机动画。首先，我尝试添加一个动画，例如缩放，但它没有像我想要的那样工作。

我要修复的东西:

1. 淡入平滑度
2. 随机动画(此时可以是任何东西，我只是想看看它是怎么做的)

fiddle :http://jsfiddle.net/jzhang172/e7cLtsg9/1/

$(function() {
  $('img').hide();

  function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(3500).addClass('transition').addClass('scaleme');
    $("#wrap img").first().fadeIn(3500).removeClass('scaleme');
    setTimeout(anim, 3700);
  }
  anim();
});

body,
html {
  margin: 0;
  padding: 0;
  background: black;
}
#wrap img {
  position: absolute;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
}
.transition {
  transition: 10s;
}
.scaleme {
  transition: 10s;
  transform: scale(1.3);
}
.box {
  height: 300px;
  width: 500px;
  position: relative;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div id="wrap">
    <img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
    <img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
    <img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />
  </div>
</div>

Answer 1

这是一个使用 CSS 动画和 jQuery(用于实现动画的随机性)的示例。如果您不想使用 CSS 动画并希望坚持使用转换 + jQuery 效果(如 fadeIn)，您仍然可以调整此代码以支持它，因为基本思想仍然保持不变。我不太喜欢 jQuery 效果，因此坚持使用 CSS 动画。

下面概述了它是如何完成的(有关更多详细信息，请参阅内联评论):

• 包装器内有一组图像，它们是幻灯片放映的一部分(就像在您的演示中一样)。
• 使用 CSS @keyframes，除了默认的淡入淡出动画之外，还创建了一个动画列表(其中一个将随机使用)。此列表也保存在一个数组变量中(在 JS 中用于从列表中随机选取一个)。
• 加载时，默认的淡入淡出动画和一个随机动画被添加到第一个元素。
• animationend 事件处理程序被添加到所有图像。当元素上的动画结束时，将触发此事件处理程序。当它被触发时，当前元素上的动画被删除，默认的淡入淡出+随机动画被添加到下一个元素。
• 动画是使用内联样式添加的，因为如果我们添加多个 CSS 类，每个类都有一个不同的动画，那么最新类中的动画将覆盖其他动画(也就是说，它们不会同时发生)。
• 通过检查当前元素是否有任何其他 img 兄弟元素来实现循环效果。如果没有，则将动画添加回第一个元素。

$(window).load(function() {
  $img = $('img'); // the images
  var anim = ['zoom', 'shrink', 'move-down-up', 'move-right-left']; // the list of random animations
  var rand = Math.floor(Math.random() * 4) + 1; // random number
  
  $img.each(function() { // attach event handler for each image
    
    $(this).on('animationend', function(e) { // when animation on one image has ended
      
      if (e.originalEvent.animationName == 'fade-in-out') { // check the animation's name
        rand = Math.floor(Math.random() * 4) + 1; // get a random number
        $(this).css('animation-name', 'none'); // remove animation on current element
        if ($(this).next('img').length > 0) // if there is a next sibling
          $(this).next('img').css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // add animation on next sibling
        else
          $img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); // else add animation on first image (loop)
      }
    });
  });
  $img.eq(0).css('animation-name', 'fade-in-out, ' + anim[rand - 1]); //add animation to 1st element on load
})

#wrapper {
  height: 250px;
  width: 300px;
  position: relative;
}
img {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 10px;
  opacity: 0;
  transform-origin: left top; /* to be on the safe side */
  animation-duration: 3s; /* increase only if you want duration to be longer */
  animation-fill-mode: backwards; /* fill mode - better to not change */
  animation-iteration-count: 1; /* no. of iterations - don't change */
  animation-timing-function: ease; /* better to leave as-is but can be changed */
}
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  33.33%, 66.66% { /* duration is 3s, so fade-in at 1s, stay till 2s, fade-out from 2s */
    opacity: 1;
  }
}
@keyframes zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
@keyframes shrink {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(.5);
  }
}
@keyframes move-down-up {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(50px);
  }
}
@keyframes move-right-left {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <img src="https://placehold.it/200/000000/ffffff" />
  <img src="https://placehold.it/200/ff0000/ffffff" />
  <img src="https://placehold.it/200/00ff00/ffffff" />
  <img src="https://placehold.it/200/0000ff/ffffff" />
</div>