Much has been said about the use of GPU (graphics processing unit) hardware acceleration in smartphone and tablet web browsers. The general scheme is to offload tasks that would otherwise be calculated by the main CPU to the GPU in your computer's graphics adapter. (For a very detailed article to better understand hardware-accelerated transitions, go to http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers.)
GPU can accelerate:
- The general layout compositing
- All the CSS transitions
- The CSS 3D transformations
- All the canvas drawing operations
You can create smooth animations with the new CSS transitions pretty easily defining them in your stylesheets or you can rely on external libraries.
CSS transitions are supported in the latest versions of Firefox, Safari, and Chrome. They're supported in IE 10 and onwards. If CSS animations aren't supported in a given browser, then the properties will be applied instantly, gracefully degrading. There are several techniques to handle a CSS transition. I will use Alice.js, an interesting JavaScript library that allows you to execute hardware-accelerated transitions in your app.
Alice.js (A Lightweight Independent CSS Engine) is a JavaScript library that leverages hardware-accelerated capabilities of browsers in order to generate visual effects. One of the strengths of the library is that it doesn't rely on other libraries and that it's self-contained in a single JavaScript file. (For a complete reference and some interesting examples refer to the official website at http://blackberry.github.com/Alice/demos/index.html.)
Each time you want to create a transition with Alice.js, you have to set up a configuration object. This object varies depending on the effect or plugin you are using. However, some configuration properties are shared between all the effects and plugins, including:
elems, the target element(s) or noderotate, the rotation angle in degreesperspectiveOrigin, the anchor point, which can betop-left,top-center,top-right,center, and so on, or the explicit coordinates in percent of the DIV's entire size, for example,{x: 200, y: 200}duration, the duration of the effecttiming, the easing function as per standard CSS specsdelay, how long before the animation startsiteration, the number of iterationsdirection, specifies whether the animation should be played in reverse modeplaystate, eitherrunningorpaused
In this way, it's possible to easily configure a CSS-based animation without any additional required know-how.
In Chapter 3, Getting Started with Mobile Applications, you already defined Alice.js in the bootstrap file, so in the view it's enough to define a configuration object and start a transition. The transition you have to implement is a simple slide from the right to the left in order to reveal the next screen.
// For brevity the configuration object is not completealice.plugins.cheshire({elems: ['splashScreen', 'create'], …});As you can see the code is pretty simple; for a complete overview please refer to the chapter's branch on GitHub.