Raphaël JS 中的循环动画答案

【问题标题】：Loop animation in Raphaël JSRaphaël JS 中的循环动画
【发布时间】：2015-05-04 23:10:15
【问题描述】：

这是 Raphaël JS 的 JavaScript 库中的一个简单动画。该函数绘制一个字段，然后取出粉红色矩形的对象。当您点击“灰色”按钮时，粉红色矩形开始水平移动。粉红色的矩形移动，一旦到达指定位置，它就会停止。

我需要帮助的是：

1：让粉色矩形回到起始位置。

2：循环动画，让粉色矩形来回移动。

我试图通过在“x:-1”之后添加“x:0”来解决这个问题，但没有成功。如您所见，我还将重复设置为无穷大，但也没有成功。

字段：

var p = Raphael(0, 0, 240, 140);
    p.rect(0,0,240,70);

onclick的触发按钮和功能：

p.rect(130, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    })
    .click(function(){
    pinkRect.animate({
        repeat: "Infinity",
        x:-1,
        }, 2000);

});

【问题讨论】：

小提琴会很有帮助
@GuruprasadRao 我已经尝试过几次让它在小提琴中工作。但它不会。还是要上传直播代码？
上传到fiddle遇到什么问题？？
@GuruprasadRao 我没有让动画在点击运行后出现。我选择“raphael 2.0”作为扩展，但没有工作迹象。无论如何，这是我在这个项目中使用的所有代码：jsfiddle.net/j747g5a0
那是因为您在https 中加载了fiddle，而Raphael 以正常http 加载，这是不允许的，因此加载Raphael.js 的请求被阻止。那么只需从https 中删除s 并尝试再次加载它！你会得到！！让我看看我能做什么！

标签： javascript jquery html raphael

【解决方案1】：

你需要使用 animate 方法的回调函数，并让它自己调用，因为你实际上有 2 个动画。所以关键位是下面的第二位......

p.rect(130, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    })
    .click( animPink );

function animPink() {
    var x = pinkRect.attr('x') < 0 ? 150 : -1;
    pinkRect.animate({ x: x }, 2000, animPink);
};

jsfiddle点击第三个灰色框

【讨论】：

非常感谢，100% 有效。不知道您需要为它创建一个变量。哦，好吧，学到了一些新东西：）请问您是否可以再帮我做一件事？ ID 为 4 的第四个按钮，我希望它在点击时暂停并重置拾取矩形的动画。
另外，我看到你也在这里回答了我的帖子：stackoverflow.com/questions/30001620/raphaeljs-animation-loop 这个问题和这个教程一样，但是 raphael JS 几乎没有教程，我可以问的地方很少问题并获得帮助，所以你能帮我解决一下吗？我已经坚持了很长一段时间，我想取得进步。
不确定你是否必须创建一个变量，但这样感觉更简单。关于另一个问题，我认为它在 cmets 中说它有效。
你能帮我解决最后一个第四个按钮吗？我希望按钮 id 4 暂停并重置粉红色矩形的动画/位置。那太好了！