RaphaelJS

Chapter 7. Animations, Part Two

The animations we covered in Chapter 5 were basically ways of delaying our hard work. By feeding attributes through an animation, we instruct Raphael to take its sweet time altering the appearance of an object instead of changing it all at once. That suits us just fine a lot of the time, but it can get dull. When moving an object to a different point in space, for example, we’re currently only able to send it there in a straight line. And RaphaelJS takes a strong stance against that sort of unadventurous attitude.

Before we get too funky, however, I’d like to briefly touch upon the straightforward subject of how you can add your own functions and properties to Raphael, which will come in handy.

Extending Raphael

In Chapter 4, we ginned up a function called NGon to make regular polygons of any number of sides (of three or more). The function accepted coordinates for the center of the shape, the length of each side of the shape, and number of sides. It returned a path string which we were responsible for feeding to paper.path().

That worked fine, but it would be nice to be able to use NGon alongside circle, rect, and the rest of the beloved crew. You could add this function to the source code, but this is generally a horrible way to do things because it runs a high risk of messing something else up and gets overwritten every time we update Raphael. Fortunately, Raphael offers an object called Raphael.fn that allows us to extend its out-of-the-box functions. ...