How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?
Question
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
3 answers
solution1
5 ACCPTED 2011-10-04 15:23:58
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.
solution2
2 2011-10-04 15:24:33
您可以在http://jsanim.com/上查看一些可能对您有所帮助的示例。
solution3
1 2011-10-04 15:33:29
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.