Question

我有一个圆圈和一条路径（四条小线条）。我制作了一组圆圈和路径（用线条）。现在我尝试移动组AND（移动时）变换圆（s3）。任何人都知道为什么这不起作用？

var paper = Raphael(0, 0, 500, 500);

var circle = paper.circle(8, 8, 1).attr({ stroke: '#fff', fill: '#f00'});

var anim1 = Raphael.animation({ transform: "s3"}, 500);
circle.animate(anim1.repeat(Infinity));

var line = paper.path('M 0,8 l 5,0 M 8,0 l 0,5 M 11,8 l 5,0 M 8,11 l 0,5 z'); line.attr('stroke', 'red');

var group = paper.set(); group.push(circle, line);

var anim3 = Raphael.animation({ transform: "T 100, 100 R 360"}, 1500);
group.animateWith(circle, anim1, anim3.repeat(Infinity));

小提琴：http://jsfiddle.net/76CGE/

如何移动路径（带线条）和圆圈，同时它们同时移动转换圆圈？

Answer 1

由于似乎不可能在raphael中同时运行多个动画，因此您可能不得不将动画剪成碎片。这不是一个优雅的解决方案，但结果可能是你想要实现的目标。

小提琴：http://jsfiddle.net/75ZFU/

var paper = Raphael(0, 0, 500, 500);
var circle = paper.circle(8, 8, 1).attr({ stroke: '#fff', fill: '#f00' });

var anim1 = Raphael.animation({ transform: "s3 T 33,33"}, 500, "linear", function() {         circle.transform("s1 T 33,33").animate(anim2)});
var anim2 = Raphael.animation({ transform: "s3 T 66,66"}, 500, "linear", function() {     circle.transform("s1 T 66,66").animate(anim3)});  
var anim3 = Raphael.animation({ transform: "s3 T 100,100"}, 500, "linear", function() { circle.transform("s1 T 0,0").animate(anim1)});
circle.animate(anim1);

var line = paper.path('M 0,8 l 5,0 M 8,0 l 0,5 M 11,8 l 5,0 M 8,11 l 0,5 z');
line.attr('stroke', 'red');

var anim4 = Raphael.animation({ transform: "T 33, 33 R 120"}, 500, "linear", function() { line.transform("T 33, 33 R 120").animateWith(circle, anim2, anim5)});
var anim5 = Raphael.animation({ transform: "T 66, 66 R 240"}, 500, "linear", function() { line.transform("T 66, 66 R 240").animateWith(circle, anim3, anim6)});
var anim6 = Raphael.animation({ transform: "T 100, 100 R 360"}, 500, "linear", function() { line.transform("T 0, 0 R 0").animateWith(circle, anim1, anim4)});
line.animateWith(circle, anim1, anim4);

拉斐尔的多个动画（移动线和圆圈加上变换圆圈）

1 个答案: