[英]Javascript rotation animation
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条直线。我想要的是第一条线旋转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)
}
}
You're encountering the classic scope/closure/reference problem most people run into when using anonymous functions. 使用匿名函数时,您会遇到大多数人遇到的经典范围/关闭/引用问题。 I've answered this question a 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. 请注意,您正在设置时间间隔:只要浏览器窗口保持打开状态,就会每100毫秒调用一次回调。
You're not storing the interval id anywhere, so I'd either use setTimeout
or create a (preferably non-global) array of id's so you can do clearInterval(intervalID[x]);
您不会在任何地方存储间隔ID,因此我将使用setTimeout
或创建ID的(最好是非全局的)ID数组,以便可以执行clearInterval(intervalID[x]);
when you need to. 在需要的时候。
I would do it like this on modern browsers, separating CSS and JS by using a class. 我会在现代的浏览器中这样做,通过使用类将CSS和JS分开。 This is my own example based on your requirements, using a common class box
and modern tools and patterns: 这是我自己的示例,它基于您的要求,使用通用的类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
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, i
will not be the i
that you were expecting. 主要问题是由于setInterval,在函数运行时, i
将不是您期望的i
。 This is because of variable scope. 这是因为范围可变。 You can get around this with an anonymous function. 您可以使用匿名函数解决此问题。
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
的值。 I think that you probably mean to use setTimeout rather than setInterval (setInterval will keep running over and over again). 我认为您可能打算使用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);
}
}
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 setInterval
dealy and animation-duration
to get the desired result. 调整setInterval
和animation-duration
以获得所需的结果。
webkit demo: http://jsfiddle.net/NQJJp/5/ Webkit演示: http : //jsfiddle.net/NQJJp/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.