Question

使用JavaScript，我创建了一个对象数组。对象的一个属性是拉斐尔形状。

使用$.each(arr, function() {});，我已经绘制了形状，但我希望它们能够快速连续fadeIn。因此，arr[1].hexagon会fadeIn然后arr[2]，依此类推。我已经能够通过将fadeIn附加到对象来统一获取所有.animate()，但我无法弄清楚如何计算JavaScript。

我想更普遍的是，有没有使用Raphael或jQuery控制序列和时间的提示？

Answer 1

这不使用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);

这对你有用吗？

Answer 2

我需要解决这个问题，但是不想依赖于setTimeout（当浏览器最小化时，计时器可能表现得很奇怪，而且通常看起来它没有正确使用Raphael）。

因此，受trampolines的启发，我制作了一个动画队列。

一般策略是将匿名函数推送到队列中，要求函数中的某个位置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()以启动链。

Answer 3

您应该使用raphael Element.animate方法提供的回调。

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

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

回调将在动画结束时调用指定的函数。您可以根据需要多次重复此操作。

Answer 4

尝试使用此代码：



for(var i=0;i < numofObj;i++){

 Obj[i].animate({any animate you choose     },1000,function(){
 Obj[i+1].animate({any animate you choose},1000);

Obj[i].animate({any animate you choose },1000,function(){ Obj[i+1].animate({any animate you choose},1000);

只有在前一个结束时才会生成下一个obj动画...

动画一系列Raphael Javascript动画

4 个答案: