javascript - 如何将这个 onclick 动画变成 onload 动画？

Question

我一直在拆这个 JS FIDDLE 在单击按钮时将硬币随机翻转到一边。我试图做到这一点，而不是在点击时播放动画。动画在加载时播放。并每 30 秒重复一次。

我尝试将函数包装在 $(document).ready(function(){ }); 中并删除按钮单击并将函数名称替换为 rotate()...

这是如何正确完成的？非常感谢任何帮助。

var deg = [0, 0, 0, 0];

rotate = function() {
  for (var i = 0; i < 4; ++i) {
    deg[i] += 180 * 4;
    if (Math.random() > 0.5)
      deg[i] += 180;
    $('#flip' + i).css({
      '-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
      '-o-transform': 'rotateY(' + deg[i] + 'deg)',
      'transform': 'rotateY(' + deg[i] + 'deg)'
    });
  }
};

body {
  perspective: 800px;
  -webkit-perspective: 800px;
  -o-perspective: 800px;
}

.coin {
  background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 100px;
  margin: 50px auto;
  position: relative;
  width: 100px;
  -webkit-transition: 2.5s ease-in-out;
  -o-transition: 2.5s ease-in-out;
  transition: 2.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.coin:after {
  background-color: #a37131;
  background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, .25), hsla(0, 0%, 0%, .25));
  bottom: 0;
  content: '';
  left: 45px;
  position: absolute;
  top: 0;
  width: 5px;
  z-index: -10;
  -webkit-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.coin:before {
  background-color: #a37131;
  background-image: url("https://www.intnumis.com.au/images/product_gub257zcoy_201310GoldProofHoleyDollarDumpREV_medium.jpg");
  background-size: 100% 100%;
  border-radius: 100%;
  content: '';
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  -webkit-transform: translateZ(-5px);
  -o-transform: translateZ(-5px);
  transform: translateZ(-5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="spin" onclick="rotate();">Spin</button>
<span id="flip0" class="coin" style="display:inline-block;"></span>

Answer 1

为此，您只需在页面加载时调用 rotate()，然后每 30 秒调用一次 setInterval():

rotate();
setInterval(rotate, 30000);

Updated fiddle