Javascript 旋转动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16893844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript rotation animation
提问by
I am stuck at a point.There are 10 straight lines(png image).What I want is after the first line rotates by 40 deg,then the second line should start its rotaion and then the third,fourth,fifth and so on!!!
我被困在一个点上。有 10 条直线（png 图像）。我想要的是在第一条线旋转 40 度之后，然后第二条线应该开始它的旋转，然后是第三条、第四条、第五条等等！ !!
code:
代码：
<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:
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)
}
}
采纳答案by iblamefish
There are a couple of steps to solve your problem:
有几个步骤可以解决您的问题：
An ID in HTML cannot start with a number, so rename them to something like 'hair1', 'hair2', etc.
HTML 中的 ID 不能以数字开头，因此将它们重命名为“hair1”、“hair2”等。
The main problem is that because of the setInterval, by the time the function runs, iwill not be the ithat you were expecting. This is because of variable scope. You can get around this with an anonymous function.
主要问题是，由于 setInterval，到函数运行时，i将不是i您所期望的。这是因为变量作用域。您可以使用匿名函数解决此问题。
Combining both of the above gives this code:
结合以上两者给出以下代码：
<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);
}
I would also recommend putting the styles into a stylesheet, then apply them using a class:
我还建议将样式放入样式表，然后使用类应用它们：
.rotate
{
-webkit-transform: rotate(40deg);
-webkit-transition: -webkit-transform 1s;
}
Finally, to get the elements to rotate in a row rather than all together, you need to multiply the interval by the value of i. I think that you probably mean to use setTimeout rather than setInterval (setInterval will keep running over and over again).
最后，要让元素连续旋转而不是一起旋转，您需要将间隔乘以 的值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);
}
}
I've put together a demo here
回答by Elias Van Ootegem
You're encountering the classic scope/closure/reference problem most people run into when using anonymous functions. I've answered this questiona while back, and provided tons of info on what is actually happening (Ignore the first paragraph of my answer, the rest of the answer is applicable, though). Meanwhile, the answer to your problem is:
您会遇到大多数人在使用匿名函数时遇到的经典作用域/闭包/引用问题。我已经回答了这个问题，并提供了大量关于实际发生的事情的信息（忽略我的答案的第一段，其余的答案是适用的，尽管如此）。同时，您的问题的答案是：
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);
}
Be aware that you're setting intervals: the callback will be called every 100ms as long as the browser window remains open.
You're not storing the interval id anywhere, so I'd either use setTimeoutor create a (preferably non-global) array of id's so you can do clearInterval(intervalID[x]);when you need to.
请注意，您正在设置间隔：只要浏览器窗口保持打开状态，就会每 100 毫秒调用一次回调。
你没有在任何地方存储间隔 id，所以我要么使用setTimeout或创建一个（最好是非全局的）id 数组，这样你就可以clearInterval(intervalID[x]);在需要时进行。
回答by Diode
Not a perfect solution, but something you can start with.
不是一个完美的解决方案，但你可以开始。
Define a css3 animation and assign it using javascript.
定义一个 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();
adjust the setIntervaldealy and animation-durationto get the desired result.
调整交易setInterval并animation-duration获得所需的结果。
webkit demo: http://jsfiddle.net/NQJJp/5/
webkit 演示：http: //jsfiddle.net/NQJJp/5/
回答by elclanrs
I would do it like this on modern browsers, separating CSS and JS by using a class. This is my own example based on your requirements, using a common class boxand modern tools and patterns:
我会在现代浏览器上这样做，通过使用类来分离 CSS 和 JS。这是我根据您的要求使用通用类box和现代工具和模式的示例：
Here's the HMTL, I'm using divs just because, but you can use images or any other element:
这是 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>
Keep the CSS separate, you just need to match the transition speed with the delay:
保持 CSS 分离，你只需要匹配过渡速度和延迟：
.box {
width: 100px;
height: 100px;
margin: 40px;
background: grey;
-webkit-transition: -webkit-transform .3s linear;
}
.box.rotate {
-webkit-transform: rotate(45deg);
}
And the JS:
和 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);
Here's little demo: http://jsbin.com/ofiral/1/edit
这是小演示：http: //jsbin.com/ofiral/1/edit
