Анимация последовательности анимаций Raphael Javascript - PullRequest
Новая
       0

Анимация последовательности анимаций Raphael Javascript

2 голосов
/ 27 декабря 2011

Используя JavaScript, я создал массив объектов.Одним из свойств объекта является форма Рафаэля.

Используя $.each(arr, function() {});, я нарисовал фигуры, но хотел бы, чтобы они были fadeIn в быстрой последовательности.Так что arr[1].hexagon будет fadeIn, затем arr[2] и так далее.Я смог собрать их все fadeIn в унисон, просто прикрепив .animate() к объекту, но я не могу понять, как рассчитать время выполнения JavaScript.

Я предполагаю, что в целоместь какие-нибудь советы по управлению последовательностью и временем с помощью Raphael или jQuery?

Ответы [ 4 ]

2 голосов
/ 14 января 2014

Вам следует использовать обратный вызов, предоставляемый методом raphael Element.animate. 

window.onload = function () {
el.animate({theAnimation}, 1000, nextAnim);
}

function nextAnim(){ 
el2.animate({theAnimation2}, 1000);
}

Обратный вызов вызовет указанную функцию после завершения анимации.Вы можете повторять это столько раз, сколько необходимо.

2 голосов
/ 05 августа 2013

Мне нужно было решить эту проблему, но я не хотел зависеть от setTimeout (таймеры могут вести себя странно, когда браузер свернут, и обычно кажется, что он не использует Рафаэля правильно).

Итак, вдохновленныйпо батутам я создал очередь анимации.

Общая стратегия состоит в том, чтобы помещать анонимные функции в очередь, требуя, чтобы где-то в функции animations.next вызывался напрямую или передавалсяанимация для запуска. 

animations = function() {
  var animationQueue = []
    , obj = {}

  obj.push = function(fn) {
    animationQueue.push(fn)
  }

  obj.next = function() {
    if (animationQueue.length !== 0) {
      animationQueue.shift().call()
    }
  }

  return obj
}()

Затем вы можете сделать что-то подобное несколько раз: 

animations.push(function() {
  paper.circle(x, y, 2)
    .attr('fill', '#fff')
    .animate({r: radius}, animationSpeed, animations.next)
})

Наконец, в конце того, что вы делаете, позвоните animations.next() чтобы запустить цепочку.

2 голосов
/ 27 декабря 2011

Это не использует Raphael или JQuery, но это просто способ задержки итераций по массиву в JavaScript: 

var doSomethingWithValue = function(v) {
    // your call to animate the object, or do anything really.
    console.log(v);
}

var timer = function(a, n) {       
    var delay = 1000; // a second, probably change this to same duration as the fadeIn()
    doSomethingWithValue(a[n]); // do work
    n += 1;
    if (n == a.length) {
        // if we're at the end, return
        return;
    } else {
        // repeat after delay
        setTimeout(function() {timer(a, n)}, delay);
    }
}

var arr = [1,2,3];
// kick things off starting at first entry
timer(arr, 0);

Это работает для вас?

1 голос
/ 28 декабря 2011

попробуйте использовать этот код: </p> <p>for(var i=0;i < numofObj;i++){</p> <pre><code> Obj[i].animate({any animate you choose },1000,function(){ Obj[i+1].animate({any animate you choose},1000);

});

Это сделает следующую анимацию obj только тогда, когда предыдущий конец ...

...