Javascript旋转动画

Question

我卡在一个点上。有 10 条直线（png 图像）。我想要的是在第一条线旋转 40 度后，第二条线应该开始旋转，然后是第三条，第四条，第五条和等等！！！

代码：

<div class="hair" onclick="rotate()">
    <img src="single.png" id="1" width="10" height="40">
    <img src="single.png" id="2" width="10" height="40">
    <img src="single.png" id="3" width="10" height="40">
    <img src="single.png" id="4" width="10" height="40">
    <img src="single.png" id="5" width="10" height="40">
    <img src="single.png" id="6" width="10" height="40">
    <img src="single.png" id="7" width="10" height="40">
    <img src="single.png" id="8" width="10" height="40">
    <img src="single.png" id="9" width="10" height="40">
    <img src="single.png" id="10" width="10" height="40">
</div>

Javascript：

function rotate(){
    for(var i=1;i<11;i++)
    {
        setInterval(function(){
            document.getElementById(i).style.WebkitTransitionDuration="1s";
            document.getElementById(i).style.webkitTransform = 'rotate(40deg)';
        },100)
    }
}

Answer 1

您遇到了大多数人在使用匿名函数时遇到的经典范围/闭包/引用问题。我已经answered this question 一段时间了，并提供了大量关于实际发生的事情的信息（忽略我答案的第一段，但答案的其余部分是适用的）。同时，您的问题的答案是：

for(var i=1;i<11;i++)
{
    setInterval((function(myI)
    {
        return function()
        {
            document.getElementById(myI).style.WebkitTransitionDuration='1s';
            document.getElementById(myI).style.webkitTransform = 'rotate(40deg)';
        };
    }(i)),100);
}

请注意，您正在设置间隔：只要浏览器窗口保持打开状态，就会每 100 毫秒调用一次回调。
您没有将区间 id 存储在任何地方，所以我要么使用 setTimeout，要么创建一个（最好是非全局的）id 数组，以便您可以在需要时执行 clearInterval(intervalID[x]);。

Answer 2

有几个步骤可以解决您的问题：

HTML 中的 ID 不能以数字开头，因此请将其重命名为“hair1”、“hai​​r2”等。

主要问题是由于 setInterval，到函数运行时，i 将不是您所期望的i。这是因为范围可变。您可以使用匿名函数解决此问题。

结合以上两者给出以下代码：

<div class="hair" onclick="rotate()">
  <img src="single.png" id="hair1" width="10" height="40">
  <img src="single.png" id="hair2" width="10" height="40">
  <!-- etc -->
</div>

// NOTE: This is not the final code listing, see below for a final answer. 
for (var i = i; i < 11; i++) {
  (function(local_i) {
    setInterval(function () {
      // use local_i instead of i inside this function for the results you expect
      document.getElementById('hair' + local_i).style.WebkitTransitionDuration='1s';
      document.getElementById('hair' + local_i).style.webkitTransform = 'rotate(40deg)';
    }, 100);
  })(i);
}

我还建议将样式放入样式表，然后使用类应用它们：

.rotate
{
  -webkit-transform: rotate(40deg);
  -webkit-transition: -webkit-transform 1s;
}

最后，要让元素连续旋转而不是一起旋转，您需要将间隔乘以i 的值。我认为您可能的意思是使用 setTimeout 而不是 setInterval （setInterval 将一遍又一遍地运行）。

function rotate(){
  for(var i=1;i<11;i++) {
    (function (local_i) {
      setTimeout(function(){
        document.getElementById('hair' + local_i).classList.add('rotate');
      }, 100 * local_i);
    })(i);
  }
}

我整理了一个demo here

Answer 3

我会在现代浏览器上这样做，通过使用一个类来分隔 CSS 和 JS。这是我自己根据您的要求使用通用类box 和现代工具和模式的示例：

这是 HMTL，我使用 div 只是因为，但您可以使用图像或任何其他元素：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

保持CSS分开，你只需要匹配过渡速度和延迟：

.box {
  width: 100px;
  height: 100px;
  margin: 40px;
  background: grey;
  -webkit-transition: -webkit-transform .3s linear;
}

.box.rotate {
  -webkit-transform: rotate(45deg);
}

还有 JS：

function rotate() {
  var elements = document.querySelectorAll('.box');
  [].forEach.call(elements, function(element, i) {
    setTimeout(function(){ element.classList.add('rotate'); },i*300);
  });
}

document.querySelector('.container')
        .addEventListener('click',rotate);

这是一个小演示：http://jsbin.com/ofiral/1/edit

Answer 4

不是一个完美的解决方案，但你可以开始。

定义一个 css3 动画并使用 javascript 分配它。

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
.hair {
    position:relative;
}
.hair div {
    width:40px;
    height:40px;
    border-bottom: 1px solid #000;
    position:absolute;
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

.

function rotate() {
    for (var i = 1; i < 11; i++) {
        (function (x) {
            setInterval(function () {
                document.getElementById("d" + x).style.WebkitAnimationName = "rotation";
            }, 200 * i);
        })(i);
    }
}

rotate();

调整setInterval 和animation-duration 以获得所需的结果。

webkit 演示：http://jsfiddle.net/NQJJp/5/