-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，但如果我再次按下按钮，什么也没有发生。

任何想法？

4

2 回答 2

2

这将永远是true...

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

...因为您将对象传递给if, 并且对象始终为真。

我假设您的意思是传递一些rect1要评估的属性。

在此处输入图像描述

  ^^------------------^^
于 2012-06-14T13:25:29.863 回答
1

我想我明白了问题所在。每次单击按钮时，您实际上是在已经运行的动画循环之上启动了另一个动画循环。所以说你的广场向右，然后向左。如果单击左侧循环，则会在右上方应用一个新动画。

我试图在这里说明这一点。单击绿色小方块开始您的第一个周期。每一次点击都会开始一个新的循环。每个周期都会尝试改变颜色。当您多次单击它时，您会看到它以及四处颤抖的方块，随着每个动画周期的出现，颜色会发生变化。

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

希望有帮助。

N。

于 2012-06-14T16:51:00.547 回答