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 );
}

脚本是用raphael制作的，效果很好。我试图实现的是，当改变浏览器大小（在CSS中设置）时，一个齿轮（tandwiel）向相反方向旋转。

这也有效，但是当更改浏览器时，齿轮会非常快速地旋转，一段时间后减速并保持正常。您等待更改浏览器的时间越长，它旋转的时间越长我想改变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);
};

删除这两行应防止车轮失控。

此外，您应该能够大规模缩短代码，例如：

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次; - ）

在Javascript（raphael）中以正常速度左右旋转图像

1 个答案: