Complex animation on the web has been generally limited to Flash.   Flash is great for what it provides, but there are limitations, expensive tools, a browser plugin, etc… It is possible to run animations using images and browser native DOM, but this too is limited to basically static graphics and the DOM box model.  

RaphaëlJS is a powerful cross browser library for rendering Vector Graphics in either native SVG or native VML depending on the capabilities made available to the browser.   For example, IE6 even had VML.  More recently Gecko, Webkit, and Opera have support for SVG.    Both markup languages are very capable – SVG being the clear winner as now IE9 will be providing SVG support.    RaphaëlJS provides a very simple and intuitive interface for dealing with Vector Graphics.   The advantage of vector graphics to other the DOM box model is that it can animate complex shapes without multiple raster graphics.

In the simplest form, you can render basic shapes like a circle or rectangle.   More complex shapes are also supported via SVG paths.   The benefit of the path parser in RaphaëlJS is that you can create complex shapes using well established tools like Adobe Illustrator, but there are also many free SVG tools as well – even web based ones.   This makes it easy to generate paths and export them to the browser as SVG files.   Adding a little code to RaphaëlJS you can easily have it parse your SVG files allowing you to render basic SVG files to probably every browser in use today, including most mobile phone browsers, (Android, and iPhone).    For example, this library has a good start on SVG parsing with RaphaëlJS as the renderer.

Kind of a long video, but shows you how to use Illustrator and RaphaëlJS to create neat animations with Vector Graphics.

Using Adobe Illustrator to create an SVG file is easy, just “save as” SVG.   There are a few things to keep in mind however, you want to make sure to limit the type of shapes you use as it is easiest to work with SVG paths directly.   For example, the code below demonstrates animating a sequence of paths.

    $(document).ready(function() {
      var paths = ["M117.567,97.5c36.999,21,18.354,75-21.645,72s23.578-126-63.422-14",
                   "M191.5,108c-24.165,35.015-55.578,64.5-95.578,61.5s23.578-126-63.422-14",
                   "M191.5,108c-24.165,35.015-48.472-2.921-79.5,22.5c-41.5,34,7.5-87-79.5,25",
                   "M191.5,108c-37-83.5-34.972,43.079-66,68.5c-41.5,34-15-220-102-108",
                   "M200.5,108c23-108-48.972-68.921-80-43.5 c-24.942,20.435-45.803-144.374-104,26",
                   "M216,80.5c-58.5-87-64.472-41.421-95.5-16c-24.942,20.435,9-52.027-104,26",
                   "M216,80.5c-58.5-87-127.5-50.849-95.5-16 c21.809,23.75,69.149,171.346-65,142",
                   "M27.5,136.5c-58.5-87,76-129.849,108-95 C180.87,90.908,92.5,252.5,27.5,136.5",
                   "M25.25,102.5c36-48,70-65,85-27s80,49,14,73s-99,36-99-5",
                   "M20.25,95.5c36-48,70-65,85-27s80,49,14,73S20.25,136.5,20.25,95.5"];
      var paper = Raphael("icon",500,500);
      var cur=0;
      var path = paper.path(paths[cur++]).attr({stroke:"#F3AA1D",'stroke-width': 6});

      var animate = function() {
        if (cur < paths.length) {
          path.animate({path:paths[cur++]},500,"<>",animate);
        }
      }

      setTimeout(animate,500);

    });

The possibilities RaphaëlJS brings to web development is huge. With now much faster browsers we can expect to see much more interactive user interfaces using entirely native browser technology. If you’re on an iphone check this page out. The animation above works.

Tags: Animation, Javascript, Raphaël, SVG, Vector Graphics

This entry was posted on Friday, July 23rd, 2010 at 2:02 pm and is filed under Watch Videos, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.