Почему моя анимация Raphael JS не зацикливается?

Привет, я сделал эту анимацию, используя структуру 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();
}

javascript animation raphael
person KemanoThief    schedule 09.11.2010    source источник

Ответы (6)


arrow_upward
18
arrow_downward 

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

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

person Dmitry Baranovskiy    schedule 10.11.2010
comment
Да! Ты легенда Дмитрий. Большое спасибо. Золотая (крутящаяся) звезда для вас. - person KemanoThief; 16.11.2010
comment
После тысячи часов попыток понять, что не так, я обнаружил, что синтаксис: transform: r180 вместо rotarion: 180. Каркас изменился? Не могли бы вы отредактировать пост, чтобы добавить эту информацию? - person Ismael; 13.02.2012
comment
Если вы используете версию 2.0, это уже не правильный ответ. Однако это. - person Jason; 04.08.2012

arrow_upward
6
arrow_downward

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

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

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

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

person Jason    schedule 04.08.2012

arrow_upward
3
arrow_downward

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

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

eg:

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

arrow_upward
0
arrow_downward

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

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

в петле.

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

person Boris Hamanov    schedule 09.11.2010

arrow_upward
0
arrow_downward

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

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

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

to

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

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

ПОСМОТРЕТЬ: http://jsfiddle.net/rbf5x/1/

person Sean Vieira    schedule 09.11.2010
comment
Это не так. Функция определена. Ваши конструкции абсолютно идентичны с точки зрения языка JavaScrupt. - person Boris Hamanov; 10.11.2010
comment
@ avok00 - совершенно верно - я не думал, что проблема в этом, но я не был уверен ... спасибо за предупреждение! - person Sean Vieira; 10.11.2010
comment
avok00, это не проблема, конечно, но эти две конструкции не "абсолютно равны". :) - person Dmitry Baranovskiy; 10.11.2010

arrow_upward
-2
arrow_downward

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

while(true){starSpin();}

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

person Michael Mao    schedule 09.11.2010
comment
Идея состоит в том, что анимация принимает обратный вызов, когда она завершается. Такие бесконечные циклы, как в вашем ответе, не очень распространены в разработке на стороне клиента, поскольку они могут привести к зависанию потока пользовательского интерфейса. - person jbeard4; 10.11.2010