Несколько анимаций в Рафаэле (перемещение линии и круга плюс преобразование круга)

Question 1

У меня есть круг и путь (четыре маленькие линии). Я сделал группу из круга и пути (с линиями). Теперь я пытаюсь переместить группу И (при движении) трансформирую круг (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/

Как я могу перемещать путь (с линиями) и круг, и, пока они двигаются, трансформировать круг одновременно?

javascript animation svg raphael

1

royu 27 Фев 2014 в 18:59

Answer

Поскольку кажется невозможным запускать несколько анимаций одновременно в 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);

2

benzkji 27 Фев 2014 в 20:13

1

Спасибо! Бамбер, что он не может быть кратным. Проблема в том, что это был всего лишь небольшой тестовый сценарий. У настоящего решения есть путь, который непросто разорвать заранее.

–

royu

28 Фев 2014 в 16:18

1

Возможно, этот stackoverflow может помочь. анимация вдоль пути выполняется независимо с помощью setInterval, а сам переведенный объект может быть анимирован с помощью .animate. может быть. в противном случае масштабирование также необходимо было бы выполнить в setINterval. на самом деле это было бы более элегантным решением :-)

–

benzkji

28 Фев 2014 в 18:03

Question 2