旋转图像左，右，在Javascript中（拉斐尔）正常速度

Question

我做了下面的代码：

var w = window.innerWidth; 

if (w>=960) { 
    window.direction = -1; 
} else { 
    window.direction = 1; 
} 

window.onresize=function(){ 
    var w = window.innerWidth; 
    if (w>=960) { 
     window.direction = -1; 
     var angle=0; 
    } else { 
     window.direction = 1; 
     var angle=0; 
    } 
    console.log(window.direction); 
}; 

window.onload = function() { 
    var paper = new Raphael(document.getElementById('canvas_container'), 730, 750); 

    var paper = new Raphael(document.getElementById('tandwiel-1'), 240, 240); 
    var tandwiel1 = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png",0,0,240,240); 

    var paper = new Raphael(document.getElementById('tandwiel-2'), 240, 240); 
    var tandwiel2 = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png",0,0,240,240); 

    var paper = new Raphael(document.getElementById('tandwiel-3'), 240, 240); 
    var tandwiel3 = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png",0,0,240,240); 

    var paper = new Raphael(document.getElementById('tandwiel-4'), 240, 240); 
    var tandwiel4 = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png",0,0,240,240); 

    var paper = new Raphael(document.getElementById('tandwiel-5'), 240, 240); 
    var tandwiel5 = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png",0,0,240,240); 

    var angle = 0; 

    setInterval(function() { 
     angle += 2;   
     tandwiel1.stop().animate({ "transform": "R" + angle }, 1000, "<>"); 
    }, 150); 

    setInterval(function() { 
     angle += 2; 
     tandwiel2.stop().animate({ "transform": "R" + direction * angle }, 1000, "<>"); 
    }, 150); 

    setInterval(function() { 
     angle += 2;   
     tandwiel3.stop().animate({ "transform": "R" + angle }, 1000, "<>"); 
    }, 150); 

    setInterval(function() { 
     angle += 2;   
     tandwiel4.stop().animate({ "transform": "R" + -angle }, 1000, "<>"); 
    }, 150); 

    setInterval(function() { 
     angle += 2;   
     tandwiel5.stop().animate({ "transform": "R" + -angle }, 1000, "<>"); 
    }, 150); 
} 

脚本在拉斐尔制成，工作正常。我试图实现的是，当更改浏览器大小（在CSS中设置）时，一个齿轮（tandwiel）以相反的方向旋转。

这也是可行的，但是当改变浏览器的sieze时，齿轮旋转非常快，一段时间后变慢并且正常。您等待更改浏览器的时间越长，它转动得越快。
我以为改变angle += 2;进入angle -= 2向后旋转，但这不起作用。我现在已经设置了{ "transform": "R" + angle }或- angle向后旋转，但有上述问题。

我没有解决方案来解决这个问题。任何人有一个想法如何使这项工作？

在此先感谢！

Answer 1

我相信这个问题是在这里：

window.onresize=function(){ 
    var w = window.innerWidth; 
    if (w>=960) { 
     window.direction = -1; 
     var angle=0; // <-- There 
    } else { 
     window.direction = 1; 
     var angle=0; // <-- And there 
    } 
    console.log(window.direction); 
}; 

删除那些2线应防止车轮失控。

此外，你应该能够大量缩短你的代码，就像这样：

window.onload = function() { 
    var canvas = new Raphael(document.getElementById('canvas_container'), 730, 750); 

    var angle = 0; 

    wheels([ 
     {id:'tandwiel-1', animation:{ "transform": "R" + angle }}, 
     {id:'tandwiel-2', animation:{ "transform": "R" + direction * angle }}, 
     {id:'tandwiel-3', animation:{ "transform": "R" + angle }}, 
     {id:'tandwiel-4', animation:{ "transform": "R" - angle }}, 
     {id:'tandwiel-5', animation:{ "transform": "R" - angle }}, 
    ]); 
} 

function wheels(properties){ 
    for(var i = 0; i < properties.length; i++){ 
     var paper = new Raphael(document.getElementById(properties[i].id), 240, 240); 
     var tandwiel = paper.image("https://cdn1.iconfinder.com/data/icons/customicondesign-mini-deepcolour-png/32/Wheel.png", 0, 0, 240, 240); 

     setInterval(function() { 
      angle += 2;   
      tandwiel.stop().animate(properties[i].animation , 1000, "<>"); 
     }, 150); 
    } 
} 

基本上，再利用的功能，而不是编码一切5倍;-)