2012-04-26 58 views
1

所以在這裏,我使用聖拉斐爾一個動畫序列:在曲線如何在初始化另一個功能或動畫之前確保動畫已完成?

  1. 褪色
  2. 淡入球1
  3. 有生球1
  4. 淡入球2
  5. 有生球2

但是,使用我的代碼,步驟4-5在步驟2-3仍在動畫時啓動。我如何確保在1-3的動畫完成後啓動步驟4和5?我試過在我的第二個函數(ball2)上使用setTimeout,但沒有運氣。

View on JSFiddle或在這裏:

Raphael("bounce", 640, 480, function() { 
       var r = this, 
       p = r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: 0, "stroke-width": 1}), 
       len = p.getTotalLength(), 
      e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function() { 
        var t = this.attr("transform"); 
       }); 
      f = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000",opacity:0}).onAnimation(function() { 
        var t = this.attr("transform"); 
       }); 
      r.customAttributes.along = function (v) { 
       var point = p.getPointAtLength(v * len); 
       return { 
        transform: "t" + [point.x, point.y] + "r" + point.alpha 
       }; 
      }; 
      e.attr({along: 0}); 
      f.attr({along: 0}); 

      var rotateAlongThePath = true; 
      function fadecurve(ca,ba,aa,ab){ 
       ca.animate({opacity:1},500); 
       setTimeout(function(){fadeball(ba,aa,ab); 
       },1000); 
      } 
      function fadeball(ba,aa,ab) { 
        ba.animate({opacity:1},400); 
        setTimeout(function(){run(ba, aa,ab); 
        },1000); 
      } 
      function run(ba,aa,ab) { 
        ba.animate({along: aa}, ab, ">", function() { 
        ba.attr({along: aa}); 
       }); 
      } 
      function startbounce() { 
       fadecurve(p,e,.9,400), 
       setTimeout(function(){fadeball(f,.8,400); 
        },1000); 
      } 
      startbounce(); 
     }); ​ 

回答

2

根據拉斐爾的文檔中,動畫的方法需要一個回調方法,因爲它的第四個參數。該方法可用於在序列中啓動下一個動畫(或在第三個動畫之後)。

function fadecurve(ca,ba,aa,ab){ 
     ca.animate({opacity:1},500,,function(){fadeball(ba,aa,ab);}); 
    } 

例如,

+0

謝謝!我得到它的工作! – 2012-04-26 22:09:13

相關問題