How to create an animation sequence using RaphaelJS

Question

so here is my question I am using RaphaelJS to build an animation in the HTML5 canvas, the thing is I don't quite understand how do I create the animation events and how do I trigger them. The documentation isn't very helpful. Thanks

RaphaelJS outputs vector drawings in SVG/VML depending on the browser, this has nothing to too with the canvas api which has an entirely different approach to drawing. Raphael uses the 'eve' library for it's event handling, but only supports mouse and touch events: see [reference](http://raphaeljs.com/reference.html#Element.click) — Goldfrapper, Feb 03 '12 at 10:13

score 0 · Answer 1 · answered Jul 17 '13 at 12:14

Firstly as pointed out you aren't utilising HTML5 Canvas, raphael actually uses SVG. Creating animations with raphaelJS is actually quite easy. You can just adapt the line bellow to your needs.

raphaelObject.animate({ attribute: value } , time , easing );

The raphaelObject is what you are trying to animate e.g. a shape you made earlier

attribute is what you are animating e.g. color

value is what you are changing it to e.g. "red"

time is how long the animation should take (milliseconds)

easing describes the nature of the animation, to start with use "<>" which performs a simple animation as you might expect. The easing 'bounce' causes the animation to well, bounce. Examples of different easings here: http://raphaeljs.com/easing.html

Here is an example where we are animating the object 'icon' by rotating it 90 degrees and changing its colour to red. The animation will take 300 milliseconds and will have a fancy bounce effect.

    icon.stop().animate({
            transform: "r90",
            fill: "red"
        }, 300 , 'bounce' );

How to create an animation sequence using RaphaelJS

1 Answers1