Create a Visual Library of Images in HTML5 Canvas: Animations and Handling Multiple Devices
written by David Catuhe
Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we told you about mouse management and state storage. In this week's tutorial, we're going to discuss animations, how to handle multiple devices, and will conclude the tutorial.
To add even more dynamism to our application we will allow our users to double-click on a card to zoom and focus on it.
Our system should animate three values: the two offsets (X, Y) and the zoom. To do this, we will use a function that will be responsible of animating a variable from a source value to a destination value with a given duration:
The use of this function is:
The advantage of the AnimationHelper function is that it is able to animate as many parameters as you wish (and that only with the setTimer function!)
Finally we will ensure that our page can also be seen on tablets PC and even on phones.
To do this, we will use a feature of CSS 3: The media-queries. With this technology, we can apply style sheets according to some queries such as a specific display size:
Here we see that if the screen width is less than 480 pixels, the following style sheet will be added:
This sheet will reduce the size of the header to keep the site viewable even when the browser width is less than 480 pixels (for example, on a Windows Phone):
This kind of development is also simplified by the use of frameworks like jQuery.
In conclusion, I think that the best to be convinced is to try!
To go further
- Internet Explorer test drive: http://ie.microsoft.com/testdrive/
- Internet Explorer 9 guide for developer : http://msdn.microsoft.com/en-us/ie/ff468705
- W3C site for HTML 5 : http://dev.w3.org/html5/spec/Overview.html
- Internet Explorer site : http://msdn.microsoft.com/en-us/ie/aa740469
This article was reprinted with permission from Microsoft Corporation. The original is available here. This site does business with Microsoft Corporation.