MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

function runCustomShowTransition() {
var showTransition = WinJS.UI.executeTransition(
target,
{
property: "opacity",
delay: 0,
duration: 500,
timing: "linear",
to: 1
}
);
}
If you want to combine multiple animations (as many of the WinJS animations do), note that both of
these functions return promises so that you can combine multiple results with WinJS.Promise.join and
have a single completed handler in which to do post-processing. This is exactly what WinJS does
internally.
And if you know anything about CSS animations and transitions already, you can probably tell that
the objects you pass to executeAnimation and executeTransition are simply shorthand expressions of
the CSS styles you would use otherwise. In short, these methods give you an easy way to set up your
own custom animations and transitions through the capabilities of CSS. Let’s now look at those
capabilities directly.
Sidebar: Parallax/Panorama Animations
Developers have often asked how to create a parallax or panorama background animation as
seen on the Windows Start screen. If you’re not familiar with this concept, go to the start screen
and pan around a little, noticing how the background pans as well but slower than the tiles. This
creates a sense of the tiles floating above the background.
While it is possible to implement this effect in JavaScript (see the KidsBook example on the
Internet Explorer TestDrive site), we don’t recommend it or at least recommend providing a
setting to turn the effect off. At issue is the fact that the threading and rendering model of
JavaScript results in choppy movement except on high-power devices; the effect will be very
pronounced on low-power and especially ARM devices. In addition, such animations can be costly
in terms of CPU and battery utilization.
This is one case in which using C++ and DirectX (or event C#/VB and XAML) has a clear
advantage over JavaScript, and would be a consideration if you absolutely must have this effect in
your app.
478