1

ここに、Raphael を使用した一連のアニメーションがあります。

  1. フェードインカーブ
  2. フェードインボール 1
  3. アニメーション ボール 1
  4. フェードインボール 2
  5. アニメーション ボール 2

ただし、私のコードでは、ステップ 2 から 3 がまだアニメーション化されている間に、ステップ 4 から 5 が開始されます。1 ～ 3 のアニメーションが完了した後、ステップ 4 と 5 が確実に開始されるようにするにはどうすればよいですか? 2 番目の関数 (ball2) で 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");
                });
             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();
        }); ​
4

1 に答える 1

2

Raphael のドキュメントによると、animate メソッドは 4 番目の引数としてコールバック メソッドを受け取ります。このメソッドを使用して、シーケンス内の次のアニメーション (または 3 つ目のアニメーションの後) を開始できます。 

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

例えば。

于 2012-04-26T19:12:25.707 に答える