if else语句似乎不起作用

Question

我有一个声明，应该向前和向后移动图像，但它似乎只是向前移动我的动画..一次。

这就是我一直在想的：

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，但是如果我再次按下按钮则没有任何反应。

有什么想法吗？

Answer 1

这将永远是true ...

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

...因为您将对象传递给if，对象始终为真。

我认为您的意思是传递rect1的某些属性来进行评估。

  ^^------------------^^

Answer 2

我想我知道问题是什么。每次单击按钮时，您实际上都会在已经运行的动画循环之上设置另一个动画循环。所以说你的广场正确，然后离开。如果单击左侧循环，则会在右上角应用新动画。

我试图说明这一点here。单击小绿色方块开始第一个循环。每次点击都会开始一个新的循环。每个循环都会尝试改变颜色。当你不止一次点击它时，你会看到它和周围的方形一样，颜色会随着每个动画周期的出现而改变。

按钮上的点击事件只需要在开始下一个动画循环之前停止现有动画（rect1.halt（））。

希望有所帮助。

<磷>氮