循环动画
这是拉斐尔JS的JavaScript库一个简单的动画。 该函数绘制一个字段,然后熄灭粉红色矩形的对象。 当你点击“灰色”按钮时,粉红色的矩形开始水平移动。粉红色的矩形移动,一旦达到它的指定位置,它就会停止。循环动画
我需要帮助的是:
1:使粉红色长方形回归到它的起始位置。
2:循环动画这样的粉红色矩形往返。
我试图通过增加来解决这个“X:0”,之后的“X:-1”,但没有成功。正如你所看到的,我也将重复设置为无穷大,也没有成功。
领域:
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);
});
您需要有效地使用动画的方法的回调函数,并调用它本身,因为你有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点击第三个灰色的方块
非常感谢,工作100%。不知道你需要为它创建一个变量。噢,学到了新的东西:) 我可以问你能否帮我解决一件事?第四个ID为“= 4”的按钮,我希望它点击paus并重置选取矩形的动画。 – Winterwind
此外,我看到你在这里也回答了我的帖子:http://*.com/questions/30001620/raphaeljs-animation-loop 问题是这个教程是一样的,但拉斐尔JS几乎为零教程和几处我可以提出问题并获得帮助的地方,那么请您帮助我解决问题吗?我已经坚持了很长时间,我想取得进展。 – Winterwind
不确定你是否必须创建一个变量,但这种感觉更简单。关于另一个问题,我在评论中说它的工作。 – Ian
@GuruprasadRao我试过几次,让它工作在小提琴将是巨大的帮助上 –
小提琴。但它不会。无论如何上传实时代码? – Winterwind
你在上传到小提琴时面临什么问题? –