Album highlight:Since their inception in late 2006, Tuesday Spoils have been catching eyes and ears with their unique, vibrant sound and enigmatic live shows. They have recently released their new EP as a free download along with an iTunes LP. |
AnimationsiTunes LPs basically run inside a webbrowser embedded into iTunes. This webbrowser is essentially Safari 4.0, a browser based on webkit. The various transitions and animations in iTunes LPs are created using the new CSS3 transition and transform features in webkit, the engine with which Safari and iTunes works. TuneKit, the development libraries used by commercial iTunes LPs, creates these css transitions dynamically. But for our own purposes we will just define them in our .css files. A css transition tells the browser that whenever a certain property is modified the browser should animate that change using a specific animation. This transition can be either linear or use an easing, or a bezier curve. This allows for many possible variations and a lot of control. For example let's say we want an intro where we start playing music and after a second start fading in an image over a period of 2 seconds. Our html would look something like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="hdtv-fullscreen" content="TRUE"/> <meta name="hdtv-cursor-off" content="TRUE"/> <title>Walt Disney's Fantasia</title> <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"> <script src="src/intro.js" language="javascript" type="text/javascript"></script> </head> <body onload="init();"> <img src="intro.png" id="introanimation"> </body> </html> Then we add some css magic to this plain html, which we will explain later:
#introanimation {
opacity: 0;
-webkit-transition: opacity 2s linear;
}
And finally our Javascript init() function which will run as soon as the page has finished loading:
function startAudio() {
var theAudioLoop = new Audio();
theAudioLoop.src = "audio/audioloop.m4a";
theAudioLoop.style.display = "none";
document.body.appendChild(theAudioLoop);
theAudioLoop.loop = false;
theAudioLoop.volume = Math.min(1, window.iTunes.volume);
theAudioLoop.play();
}
function startIntro() {
document.getElementById("introanimation").style.opacity = 1;
}
function init() {
setTimeout(startAudio, 500);
setTimeout(startIntro, 1500);
}
-webkit-transitionIn the above css example you see the -webkit-transition property has three values behind it. -webkit-transition accepts four values but the fourth is optional.
#someselector {
-webkit-transition: <property> <time>s <transition> <delay>s;
}
The property value is the css-property which you are defining a transition for. The time is a value in seconds of how long the transition should last. The delay value is a time in seconds that the transition will be delayed after the change has been made. The transition value is one of the following: linear ease-in ease-out ease-in-out cubic-bezier(x1,y1,x2,y2) For more information on these transition types see the Surfin' Safari - CSS Animations blogpost which has a lot of information about this. You can define multiple -webkit-transition definitions by comma seperating several of these lists. For example if we not only wanted to animate the opacity but also the position:
#introanimation {
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: opacity 2s linear, left 1s ease-in-out, top 1s ease-in-out;
}
Now whenever we change it's position in Javascript it will animate to the new position over a period of one second starting slowly, accelerating and slowing down again. -webkit-transformCSS transforms allow you to easily scale, rotate and move elements. This combined with css transitions you can do very fancy things. Let's take our previous example and say we don't just want to animate the opacity but also it's scale: First we need to modify the css. For this example I'm assuming our image is 500x300 and we want it to scale around the image's center point:
#introanimation {
-webkit-transform-origin: 250px 150px;
-webkit-transform: scale(0.5);
opacity: 0;
-webkit-transition: opacity 2s linear, -webkit-transform 4s ease-out;
}
Next we need to update the startIntro function:
function startIntro() {
var theIntroAnimationElement = document.getElementById("introanimation");
theIntroAnimationElement.style.opacity = 1;
theIntroAnimationElement.style.webkitTransform = "scale(1)";
}
This will over a period of four seconds scale the image from half its size to full size with a nice falloff (ease-out), while for the first two seconds fading in the image. For more information on these transforms see the Surfin' Safari - CSS Transforms blogpost through which you can find a lot of information about this. IssuesThere is are some problems with CSS animations in combination with transforms. In some cases when animations are layered over elements which have had transform animations it will cause degraded performance. Even when you remove the element with the transform animation from your document entirely, the render engine will somehow still do something causing this degraded performance. One of the developers of Webkit contacted me about this and offered a workaround. Always make sure that any parent of an element which has both a -webkit-transition and a -webkit-transform has a z-index value. The real issue is slightly more complex but a patch has already been made and the next versions of Safari and iTunes should have this fixed. Another issue is a color correction issue when combining transitions with transforms. Any transformed element that is currently in a transition will be rendered with another color management method. This only happens on Snow Leopard, and only in Safari. So this should only be a problem when previewing in Safari. As soon as you import your iTunes LP into iTunes the problem should be fixed. This should be fixed in the next version of Safari as well. Example filesTo try some of this out immediately download the example project for this tutorial. | |||