0

そのため、パスと円を描画するコードがいくつかあります。関数が開始されるたびに、円はパスを横切ってアニメーション化されます。私は単純に 10 個のパスを作成し、それぞれのパスをアニメーション化する独自の円を作成したいと考えています。関数を単純に 10 回実行すると、パスは正常に生成されますが、円はすべて同じ単一のパスに沿ってアニメーション化されます。ここで何が間違っていますか？for(i=0) ループを作成するための最良の方法はここにありますか?

jfiddleで私のコードを表示するか、ここでそれを見てください。

function commerce() {
Raphael("commercebounce", function () {
            var r = this;   
            function pathfade() {
            var pa = .1,
                pb = .4, 
                pc = [0, 2], 
                pd = [50, 300], 
                pe = [150, 800], 
                pf = [150, 350], 
                pg = pd[0] + Math.random() * (pd[1] - pd[0]), 
                ph = pe[0] + Math.random() * (pe[1] - pe[0]), 
                pi = pf[0] + Math.random() * (pf[1] - pf[0]),
                bd = .1,
                be = .9,
                pathspot = bd + Math.random() * (be - bd),
                colours = ["215,10,45", "115,115,115"],
                stroke = ["", "- "];
                opacity = pa + Math.random() * (pb - pa), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = pc[Math.round(Math.random())];
                pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"opacity": 0});
                bh = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {
                var t = this.attr("transform")})
                leng = pj.getTotalLength();
                r.customAttributes.along1 = function (v) {
                    var point = pj.getPointAtLength(v * leng);
                    return {
                        transform: "t" + [point.x, point.y] + "r" + point.alpha
                       }
                };
                return bh.attr({along1:0}), bh.animate({along1:pathspot},300), pj.animate({opacity:opacity},300), pj, bh
             }
pathfade();//how do i repeat this function n times?               
    }); 
}
commerce();
4

3 に答える 3

2

私が見る限り、単純なループで問題ありません。興味がある場合は、これが JavaScript でループする最速の方法です。

var i = 10; while (i--) {
//Your code..
}
于 2012-04-30T01:48:23.283 に答える
1

pathfade（）関数を、いくつかのタスクのみを実行する複数の単純な関数に分割する必要があります。

2つの主な問題があります。まず、変数宣言中にコンマが必要な場所にセミコロンを配置します。ストローク変数を見てください。次に、javascriptが1つしかサポートしていない場合、pathfadeは複数の値を返します。関数から戻ると、残りのステートメントは実行されないことに注意してください。

最後に、for、do-while、またはwhileループを使用して、関数呼び出しを繰り返します。

これが修正です。申し訳ありませんが、リファクタリングする時間がありませんでした。

function commerce() {
    Raphael("commercebounce", function () {
        var r = this;
        function pathfade() {
            var pa = 0.5,
            pb = 0.9,
            pc = [0, 2],
            pd = [50, 300],
            pe = [150, 800],
            pf = [150, 350],
            pg = pd[0] + Math.random() * (pd[1] - pd[0]),
            ph = pe[0] + Math.random() * (pe[1] - pe[0]),
            pi = pf[0] + Math.random() * (pf[1] - pf[0]),
            bd = 0.1,
            be = 0.9,
            pathspot = bd + Math.random() * (be - bd),
            colours = ["215,10,45", "115,115,115"],
            stroke = ["", "- "],
            opacity = pa + Math.random() * (pb - pa),
            colour = "rgb(" + colours[Math.round(Math.random())] + ")",
            strokeW = pc[Math.round(Math.random())],
            pj = r.path("M 0 " + pg + " C 0 " + pg + " " + (ph - 100) + " " + pg + " " + ph + " 400 M " + ph + " 400 C " + ph + " 400 " + (ph + 100) + " " + pg + " 960 " + pi).attr({
                    stroke : colour,
                    "stroke-dasharray" : stroke[Math.round(Math.random())],
                    "opacity" : 0
                }),
            bh = r.circle(0, 0, 7, 7).attr({
                    "stroke-width" : this.strokeW,
                    stroke : colour,
                    "stroke-opacity" : this.opacity,
                    fill : "none",
                    "fill-opacity" : 0
                }).onAnimation(function () {
                    var t = this.attr("transform")
                }),
                leng = pj.getTotalLength();
            r.customAttributes.along1 = function (v) {
                var point = pj.getPointAtLength(v * leng);
                return {
                    transform : "t" + [point.x, point.y] + "r" + point.alpha
                }
            };
            bh.attr({
                along1 : 0
            });
            bh.animate({
                along1 : pathspot
            }, 300);
            pj.animate({
                opacity : opacity
            }, 300);
        }
        var i = 10;
        while( i-- ){
            pathfade();
        }
    });
}
commerce();

デモ： http： //jsfiddle.net/VEdwG/6/

「C＃スタイルの要素」をお読みください。

http://www.amazon.com/The-Elements-Style-Kenneth-Baldwin/dp/0521671590/ref=cm_cr-mr-title

于 2012-04-30T05:59:09.813 に答える
1 
var n = 5; //or however much you want
for (var i = 0; i < n; i++){
    pathfade();
}

ループ メソッドは、ここforでの最も簡単なオプションです。

于 2012-04-30T01:48:03.383 に答える