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