Question

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

我想解决的问题：

淡化光滑度
随机动画（此时可以是任何内容，我只是想看看它是如何完成的）

小提琴：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兄弟元素来实现循环效果。如果没有，则将动画添加回第1个元素。

$(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>

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

1 个答案: