这是RaphaëlJS的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);
});
答案 0 :(得分:1)
你需要使用animate方法的回调函数,并让它自己调用,因为你实际上有2个动画。所以关键位是下面的第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点击第3个灰色框