 |
| Image via Wikipedia |
I am currently giving a lecture on creating WebApplications using HTML5, CSS3 and JavaScript. This is a lecture with tutorials. For one of the tutorials, I picked a sample canvas animation - just showing in which direction we are heading to with a technology like this. Then I introduced the CSS3 animation in the lecture (everyone was very excited about it) and wanted to create a simple homework task using the CSS3 animations. What came to my mind was: how easy or hard would it be to actually transform the canvas animation into a complete CSS3 animation?
This involved several parts:
The reason for using CSS3 animation over the -element is quite important: While browsers can optimize their elements performance (regarding their style, i.e., CSS), they cannot optimize our custom drawing routines used in a canvas. The reason for this lies in the browser's ability to use hardware mainly the graphics card. Currently the browser does not give us direct access to the graphics card, i.e., every drawing operation has to go over some function in the browser first.
- Creating all the different
-elements in order to "box" everything- Draw everything using styles on those elements with style rules like borders, background-gradients and rounded corners
- Actually animating the elements
This problem could be prevented with techniques such as webgl, where the browser does give the developer direct access to the graphics card. However, this is treated as a security problem and will not become standardized. One important rule for developing WebApplications is standardization - since this is our portal to a huge customer base. If we excluded some of the most popular browsers, we would certainly lose a lot of potential visitors.
Animations in HTML5 - CodeProject
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDeleteflash to html5 converter