Question

我用raphael和javascript创建了一个动画。我希望动画当时旋转120度，但我不能让它旋转120度一次然后停止

任何想法如何让它旋转这是我的javascript。

        var paper;
        var rect1;
        var rect2;
        var xEnd;
        var xEnd2;
var angleF = "120"
var angleB = "-120"
        function init()
        {
            paper = Raphael("ritYta");
            // Bakgrund
            var bg = paper.rect( 0, 0, "240px", "90px", 0 );
            bg.attr( {fill: "#f3f3ff"} );
                            // Skapa rektangel 1
            rect1 = paper.rect(150, 20, 50, 50);
            rect1.attr( {fill: "#ffaaaa", "stroke-width": 3} );
            xEnd = 150;
            rect2 = paper.rect(20, 20, 50, 50);
            rect2.attr( {fill: "#aaaaff", "stroke-width": 3} );

        };

        function moveRect1()
        {       
            // Reverse.uppfÖrande
            if( xEnd == 150 )
                xEnd = 50;
            else
                xEnd = 150;

            // x heter x på rektanglar. Vänstra övre hönet.
            rect1.animate( {x: xEnd},                       // det/de attribut som ska animeras, och till vilket värde.
                            1000,                                   // tid
                            "Sine",                         // Ease funktion
function (){ moveRect1(); } // Anropa sig själv för att få upprepning.
        ); // slut på animate
        }

function stopRect1() {
            rect1.stop();
    };


function rotRect2F(){

rect2.animate({transform: " r " + angleF}, 2000, "bounce");
}
    function rotRect2B(){
rect2.animate({transform: " r " + angleB}, 2000, "bounce");
}

Answer 1

对于raphael，形状已经旋转到120度，因此它不会做任何事情。你需要总结这些旋转，所以第一个是120deg，240deg，360deg等。

rect2.animate({transform: "... r120"}, 2000, "bounce");
}
    function rotRect2B(){
rect2.animate({transform: "... r-120"}, 2000, "bounce");
    }

省略号...表示Raphael会将此轮换添加到已应用的任何转换中。

旋转动画120度，raphael，javascript

1 个答案: