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 implement 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.