0

This answer has been accepted but it does not work as glowSet.animate({cx: 100}) will not move the glow as well as the circle. Additionally to animate the glowSet path objects, you need to apply a transformation, something like this but a simple move transformation shrinks the glow paths to 0.

Current approach as a js fiddle, or is there a smarter way of achieving the same thing?:

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));
Community
  • 1
  • 1
AJP
  • 26,547
  • 23
  • 88
  • 127
  • Can you do a jsfiddle of what you have already to play with. – Ian Nov 05 '13 at 11:57
  • possible duplicate of [How is set animation done in Raphael?](http://stackoverflow.com/questions/8279009/how-is-set-animation-done-in-raphael) – AJP Nov 06 '13 at 08:02

1 Answers1

0

For the animation you just need to use the translate rather than matrix, for the transform:

// Animation
delay = 300
speed = 1000

_transformedPath = Raphael.transformPath('t100 100');
animGlow = Raphael.animation({transform: _transformedPath}, speed, '<>');
all.animate(animGlow.delay(delay));
AJP
  • 26,547
  • 23
  • 88
  • 127
  • Note that if you want to use a callback, you should wrap it in something like [underscore's _.once](http://underscorejs.org/#once), as otherwise it is fired for each of the elements in `all`, which in this example is 7 times. – AJP Nov 09 '13 at 01:57