Jump to content

Best way to add animation to HTML5?


DeX

Recommended Posts

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.

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.