анимация поворота на 120 градусов во времени, Рафаэль, JavaScript - PullRequest
Новая
       2

анимация поворота на 120 градусов во времени, Рафаэль, JavaScript

0 голосов
/ 03 марта 2012

Я создал анимацию с Рафаэлем и 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");
}

1 Ответ

1 голос
/ 03 марта 2012

Для Рафаэля форма уже повернута на 120 градусов, поэтому она ничего не делает.Вам нужно сложить эти повороты так, чтобы первым было 120 градусов, 240 градусов, 360 градусов и т. Д. 

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

Многоточие ... означает, что Рафаэль добавит этот поворот к любому преобразованию, которое уже применено.

...