Search code examples
javascripthtmlcanvashtml5-animation

Canvas or PNG? (for html5 animation)


I'm going to develop an html5 rich animation. I've already design the components in Illustrator, but now the question is how to export this components? via Canvas object? or via Image(png)?.

Notice that the components may have some changes(like a flower who get an wings at some point)..

  1. Canvas it will able me easily add and remove this additions, But with Image I should make them absolute with z-index..
  2. Image will prevnt copying my components without permission(at least it prevent anybody take them as vector image).. so it really advantage.

Thanks!, ~ Almog Baku

Solution


  • I found out that the easiest and powerfull way to deal with building rich animations(short film) for web is using both JS and css animations/transictions..

    Building it with sass+compass make it easily and powerfull as well..

    Why? and about my research

    Actually I was built this same animation-film twice and half:
    first I built the whole film with jQuery only(wich was really slow, clumsy, and hard-to-build).
    Than, I give a try for canvas.. but I found out that it very hard to create some common transictions like slide-up and much more. So, I try to implement it using some common canvas libraries.. and gave up after some time(1/5 completed of the film).
    Than I choose to implement it from scratch using compass+sass and CSS ANIMATIONS/TRANSICTIONS, and I found out that it the most powerfull, easy way to solve, and fast development to deal with this issue.

    I was implement every "slide" within css animations who detected by css class. and determinate the end of every slide using JS who listen to the css animation event..