-1

画像を前後に移動する必要があるというステートメントがありますが、アニメーションを前後に移動するだけのようです。

これが私が考えてきた方法です：

var rect1;
var rect2;
var xEnd = 50;
var xEnd2 = 150;

function init() {
    paper = Raphael("loadSVG");
    rect1 = paper.rect(150, 20, 50, 50);
    rect1.attr({
        fill: "#ffaaaa",
        "stroke-width": 3
    });
};

function moveRect1() {
    if (rect1.animate({
        x: xEnd
    })) {
        rect1.animate({
            x: xEnd
        });
    }
    else {
        rect1.animate({
            x: xEnd2
        });
    }
};

ですから、私の問題は、アニメーションが50に1回しか移動しないことですが、ボタンをもう一度押しても何も起こりません。

何か案が？

4

2 に答える 2

2

これは常にtrue...

if (rect1.animate({x: xEnd})) {

...オブジェクトを に渡しているためif、オブジェクトは常に true です。

rect1代わりに評価されるプロパティを渡すつもりだと思います。

ここに画像の説明を入力

  ^^------------------^^
于 2012-06-14T13:25:29.863 に答える
1

問題が何であるかがわかると思います。ボタンをクリックするたびに、すでに実行中のアニメーション サイクルに加えて、別のアニメーション サイクルが開始されます。あなたの正方形が右に行き、次に左に行くとしましょう。左のサイクルをクリックすると、新しいアニメーションが上から右に適用されます。

ここでこの点を説明しようとしました。小さな緑色の四角をクリックして、最初のサイクルを開始します。クリックするたびに、新しいサイクルが開始されます。各サイクルは、色を変更しようとします。2 回以上クリックすると、アニメーション サイクルが前面に出てくるたびに四角形がガタガタと動き、色が変化することがわかります。

ボタンのクリック イベントは、次のアニメーション サイクルを開始する前に、既存のアニメーション (rect1.halt()) を停止するだけで済みます。

それが役立つことを願っています。

N.

于 2012-06-14T16:51:00.547 に答える