Анимируйте элемент Рафаэля и его множество путей свечения

Question

Этот ответ принят, но он не работает, так как glowSet.animate({cx: 100}) не будет перемещать свечение, а также круг. Кроме того, для анимации объектов пути glowSet необходимо применить преобразование, что-то вроде этого, но простое преобразование перемещения сокращает пути свечения до 0.

Нынешний подход как js fiddle, или есть ли более умный способ достижения того же самого?

paper = Raphael(0, 0, 200, 200);
circle = paper.circle(10, 10, 10);
glow = circle.glow();
glow.push(circle);
all = glow;
all.attr("stroke", "#f00");

// Animation
delay = 300
speed = 1000

// Will only animate the glow paths and not the circle
// Also shrinks the glow paths to nothing.
_transformedPath = Raphael.transformPath('M100 100');
animGlow = Raphael.animation({path: _transformedPath}, speed);
all.animate(animGlow.delay(delay + 200));

//We shouldn't want or need to do this.  You can apply an
//element.matrix.translate(x, y), followed by a //element.transform(element.matrix.toTransformString()) for 
//each of the elements in the glowSet
anim = Raphael.animation({cx: 100, cy: 100}, speed);
circle.animate(anim.delay(delay));

Answer 1

Для анимации вам просто нужно использовать translate скорее, чем matrixдля преобразования:

// Animation
delay = 300
speed = 1000

_transformedPath = Raphael.transformPath('t100 100');
animGlow = Raphael.animation({transform: _transformedPath}, speed, '<>');
all.animate(animGlow.delay(delay));