0

特定の順序で起動したい一連のラファエルアニメーションがあります。

  1. カーブでフェードインします。
  2. ボールをフェードインします。
  3. カーブに沿ってボールをアニメートします。

各関数の間にsetTimeoutがありますが、アニメーションは同時に起動します。

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");
            });
        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});

        var rotateAlongThePath = true;
        function fadecurve(ca,ba,aa,ab){
            ca.animate({opacity:1},2000);
            setTimeout(fadeball(ba,aa,ab),6000);
        }
        function fadeball(ba,aa,ab) {
               ba.animate({opacity:1},400);
               setTimeout(run(ba, aa,ab),5000);
        }
        function run(ba,aa,ab) {
               ba.animate({opacity:1},400);
               ba.animate({along: aa}, ab, ">", function () {
                ba.attr({along: aa});
            });
        }
        fadecurve(p,e,.9,500);
});
4

5 に答える 5

2

問題は、 setTimeout 内で参照する関数にあります

setTimeout(fadeball(ba,aa,ab),6000);

ここで行っているのは、関数を実行し、その結果を setTimeout の最初の引数として割り当てることです。無名関数を使用すれば問題ありません。

setTimeout(function(){
  fadeball(ba,aa,ab);
},6000);
于 2012-04-26T16:46:27.820 に答える
2

次のような無名関数を使用します。

setTimeout(function(){
  fadeball(ba,aa,ab);
},6000);

setTimeout(fadeball(ba,aa,ab),6000);関数を使用すると、問題が何であるかがfadeball原因ですぐに呼び出されます。()

その方法でも関数を呼び出すようにしてくださいrun:)

于 2012-04-26T16:44:38.977 に答える
1

関数をすぐに呼び出して、その関数の結果を に渡していますsetTimeout。代わりに関数を に渡す必要がありますsetTimeout:

setTimeout(function(){
    fadeball(ba,aa,ab);
},6000);
于 2012-04-26T16:45:35.703 に答える
1

これがトピックから外れている場合は申し訳ありませんが、これを行っている方法はスケーラブルではありません。このように繰り返しタイムアウトを設定することはいくつかの機能で機能しますが、マルチステップ アニメーションはステップ数が増えるにつれてますます扱いにくくなります。jQuery はアニメーションをシーケンス化できますが、多くの場合、jQuery の組み込みのアニメーション キューは必要な機能 (ウォーターフォール プロパティなど) を提供しません。Frame.jsを使用した、より簡潔で強力でスケーラブルな代替手段を次に示します。

  var ca = p, ba = e, aa = .9, ab = 500;
  Frame(500, function(next){
      ca.animate({opacity:1}, 2000, next);
  });
  Frame(4000, function(next){
      ba.animate({opacity:1}, 400, next);
  });
  Frame(5000, function(next){
      ba.animate({opacity:1}, 400);
      ba.animate({along: aa}, ab, ">", next);
  });
  Frame(function(next){
      ba.attr({ along: aa });
      next();
  });
  Frame.init();
于 2012-04-26T17:03:27.383 に答える
0

JQuery の animate 関数には、アニメーション完了コールバックがあるため、アニメーションを連続して起動できます。

function SecondAnimation() { $('element').animate(....., ThirdAnimation); }
function ThirdAnimation() { $('element').animate(....., FourthAnimation); }
function FourthAnimation() { $('element').animate(.....); }


$('element').animate(....., SecondAnimation);
于 2012-04-26T16:47:24.370 に答える