0

私は通常、コードの大きな乱雑なブロックを投稿することを避けようとしますが、このスクリプトをコンソールにコピーすると、なぜこのスクリプトが正常に機能するのか本当にわかりませんが、すべてを関数でラップしてからその関数を呼び出すと、エラーが発生します。animate が定義されていません。

var animation;
var e;
var myPath;
var paper = Raphael(document.getElementById('svgArea'), 600, 400);
e = paper.circle(106.117, 82.076, 5, 5).attr({
    stroke: "none",
    fill: 'red'
});
var path = 'M106.117,82.076c0,0,227.487-121.053,183.042,22.222c-44.445,143.275-95.322,83.041-95.322,83.041L106.117,82.076z';
myPath = paper.path(path).attr({
    stroke: 'black',
        "stroke-width": 2,
        "stroke-opacity": 0.2
});
animation = setInterval("animate()", 10); //execute the animation function all 10ms (change the value for another speed)
var counter = 0; // a counter that counts animation steps

function animate() {
    if (myPath.getTotalLength() <= counter) { //break as soon as the total length is reached
        counter = 0;
    }
    var pos = myPath.getPointAtLength(counter); //get the position (see Raphael docs)
    e.attr({
        cx: pos.x,
        cy: pos.y
    }); //set the circle position
    counter++; // count the step counter one up
};
4

2 に答える 2

2

@Coin_op の答えに代わる方法は、関数参照を渡すことです。

animation = setInterval(animate, 10);
于 2013-06-06T22:39:48.210 に答える
1

settimeout 呼び出しは、文字列として渡すときに animate 呼び出しからスコープを削除します。これは、animate がグローバルの場合は問題ではありませんが、関数に含まれると問題になります。関数内で animate 呼び出しを閉じると、animate への参照がまだあり、動作するはずです。

animation = setInterval(function(){ animate(); }, 10);
于 2013-06-06T22:37:23.993 に答える