Best way to add animation to HTML5?

[DeX]

I have an image of a map of the city and I'm trying to incorporate a train going down the tracks and stopping at designated stops on the same timeline as the city transit. What's the best way to incorporate this animation? Can it be coded directly into the HTML5? Should I have an animator create a video file and have that portion of the image be an embedded video? Should I create a .gif and have that portion of the image be an embedded gif? What's best?

 

It's only a portion of the city map with only 1 or 2 stops and the train will enter from the top of the image and exit the bottom, it doesn't need to go all around.

 

Thanks.

[RussellReal]

I believe this is why flash was invented, you can draw a motion path along the tracks, and have your train just follow the motion tween around the tracks, you know, and it'd only be like, 4 or 5 lines of code to handle the stops..

 

but if it must be done in html/js (I haven't really used html5 much) but I believe you could probably use a canvas, but that isn't very good for IE users, you'd have to create a second version of it, in svg, but they've got some cross browser libraries that mimic canvas in IE (http://code.google.com/p/explorercanvas/)

 

but if you don't wanna go the canvas route, you'd have to go strictly html/js, which could get tricky as you'd probably need to rotate the train to follow the tracks around turns, which again, isn't supported widely amongst most browsers (but, neither is HTML5!).. You could get away with it with 4 images.. left right up down.. and swap out the images as it gets to a turn..

 

and you could make the animations with jquery relatively easy, just get a list of goTo co-ordinates, create the animation in jquery to move the train from current X,y (where it is before the animation) to the next nearest straight line end point (end X,Y), swapping images as you get to turns..  this would be absolutely hell if the track is round instead of rectangular..

 

but then again, jquery/html/canvas/svg all together, could make it almost seamless.. if you created a canvas (with the svg crossover library from google) just big enough for 1 image of the train... you can than re-draw the canvas with the rotated image in it, to perfectly contour to the track when needed.. even mathematically if it is a perfect circle..

 

and then with jquery, you animate it.. presto!

 

but, however you decide to go about it, lemme know.

[DeX]

I found a bunch of samples on this site - http://forums.pinstack.com/f214/html5_animation_examples-118598/

It looks like I can use HTML5 and CSS3 to achieve exactly what I want without any Flash/javascript at all.

[RussellReal]

I found a bunch of samples on this site - http://forums.pinstack.com/f214/html5_animation_examples-118598/

It looks like I can use HTML5 and CSS3 to achieve exactly what I want without any Flash/javascript at all.

 

PROBABLY, as I've said it my prior post,  IE 5,6,7,8 all don't support html5

[DeX]

Well then, it's a good thing I'm the boss! Another reason to tell my clients not to use that dinosaur of a browser.