How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

my boss asked me to create an HTML5, Javascript and CSS animation program where several balls travel at a constant velocity across pre-defined curved paths. The pre-defined paths will probably spell out an english word (in cursive hand-writing). When a ball arrives at a point of intersection between 2 or more paths, the program should display a speech bubble with some text/graphics. The program must work in IE8, FF, Chrome, Safari, ipad safari, iphone safari, android browser and black berry browser.

Does anyone know how I might begin? Are any of these options available to me?

• a development framework that helps me create animation relevant to my project?

• an already existing software that I can reverse engineer?

Any suggestions on how I am to im开发者_Python百科plement this project would be great

nice to have feature - when a ball arrives at point of intersection, it randomly chooses one of the points

I would suggest using a Javascript library such as Raphael for this kind of thing.

Raphael allows you to draw items on the browser and animate them.

There are examples of complex animations available on the Raphael homepage (including animate-along-a-predefined-path examples).

It is actually a very easy-to-use graphics library, and best of all it even works in older versions of IE (as far back as IE6). It uses SVG for its graphics, except in old IEs, where it uses VML.

Hope that helps.

[EDIT]

By the way -- Raphael 2.0 has been released today. Make sure you grab the latest version when you donwnload.

You can check some examples at http://jsanim.com/ that might help you.

SixRevisions recently had an article listing 10 javascript frameworks. There are some notable ommissions from this list, but for the most part they are addressed in the comments section. I haven't had time to check them all out, but I really like Raphael

Perhaps worth mentioning is Adobe's new beta product: Adobe Edge whic apparently provides a flash-like interface for making html5/js animations