Почему не будет мой цикл анимации Raphael JS?

Question

Привет! Я сделал эту анимацию с использованием фреймворка Raphael.Я хочу, чтобы звезда (logoStar) вращалась бесконечно, но она запускается только один раз.Кто-нибудь может помочь?Спасибо

window.onload = function () {
buildLogo();
}

var buildLogo = function () {
    var logo = Raphael("title",800,236);

    var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"});

    var starSpin = function () {
        logoStar.animate({rotation: "360"}, 5000, starSpin);
    }
    starSpin();
}

Answer 1

var starSpin = function () {
    logoStar.attr({rotation: 0}).animate({rotation: 360}, 5000, starSpin);
}

Анимация от 360 ° до 360 ° выглядит так, как будто анимации нет, поэтому вам нужно сбросить поворот до нуля.

Answer 2

С тех пор, как вышла версия 2, реальный способ создания бесконечно циклической анимации заключается в следующем:

var spin = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);
myElement.animate(spin);

Infinity - это свойство в Javascript , поэтому не вводите его в виде строки.

Вот рабочая скрипка .

Answer 3

Просто быстрое наблюдение:

Похоже, что "Вращение" больше не является частью Atrr начиная с версии 2, поэтому вы не можете использовать его в "одушевленном", но вы можете заменить это на "transform:" r "+ (некоторая степень)" ..

например:

 element.animate( {transform: "r" + (-90)}, 2000, 'bounce');

Answer 4

Я согласен с Майклом Мао, вы должны поместить

logoStar.animate({rotation: "360"}, 5000, starSpin);

в цикл.

Но такие циклы, хотя (true) не всегда хорошая идея.Это потребует слишком много ресурсов процессора, и некоторые браузеры могут предупредить пользователя о том, что скрипт вызывает медленную работу страницы.Может быть, лучше добавить тайм-аут перед повторным выполнением анимации.Просто попробуйте и посмотрите, что работает лучше;)

Answer 5

Я не совсем уверен, но я думаю , что starSpin еще не определено, когда вы пытаетесь использовать его в анонимной функции.

Попробуйте изменить:

var starSpin = function () {
    logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

до

function starSpin() {
    logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

РЕДАКТИРОВАТЬ
Оказывается, что это совсем не так - я не знаю, в чем проблема (надеюсь, кто-то, кто больше знаком с библиотекой Рафаэля, может помочь в этом), но решение kludgey-but-works - очистить рассматриваемый элемент перед вызовом всей функции конструкции в обратном вызове (я предупреждалты был клуджый).

СМОТРИ: http://jsfiddle.net/rbf5x/1/

Answer 6

Я не очень уверен, но что, если вы сделаете это:

while(true){starSpin();}

Похоже, что метод выполняется только один раз, поэтому он "вращается" один раз ...