Safari on iPhone Graphics, Media, and Visual Effects Coding How-To's |
|
GraphicsHow do I use the canvas tag to draw vector graphics and animation?You can use the HTML5 Listing 1: Draw a circle using the canvas tag. <html>
<head>
<script>
function drawCircle() {
/* get the main canvas and its context */
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
/* draw a circle */
radius = 90; x = 150; y = 150;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.closePath();
context.setFillColor("3300FF");
context.fill();
}
</script>
</head>
<body onload="drawCircle()">
<canvas id="myCanvas" height="300" width="300" style="border: 2px solid; margin: 30px;" />
</body>
</html>
For more information about how to use the | ||
| ||
MediaHow do I specify a poster image for audio or video in a webpage?Safari on iPhone plays audio and video in webpages in fullscreen playback mode only. Since video is not decoded until a user enters playback mode, a gray rectangle with the Quicktime logo is shown until the Play button is pressed. It is possible to replace this gray rectangle with a still image. In the Listing 2: Using a poster image. <embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" /> For more information on using poster images, see the "Embedding Movies in Webpages" section of the Safari Web Content Guide for iPhone OS. How do I determine whether my server will support random access in media playback?iPhone uses byte-range requests to perform random access in media playback. To determine whether the server hosting your media files supports this type of request, you can attempt to download part of a file from the server using the curl command in Listing 3. Replace "example.com" with the name of your server, and replace "test.m4v" with the name of a known media file on your server. Listing 3: curl command to test for byte-range request support. curl --range 100-149 http://example.com/test.m4v -o /dev/null -s -w "%{size_download}\n"
If this command reports 50—meaning that curl downloaded 50 bytes—then the server correctly handled the byte-range request. If the entire file was downloaded, the server does not handle byte-range requests. For more information on configuring your server to support random access in media playback, see the "Configuring Your Server" section of the Safari Web Content Guide for iPhone OS. How do I load different video files dynamically based on the current network connection speed?If you are displaying video in a webpage and want to load different video files dynamically based on the current network connection speed, use a reference movie. Reference movies can be created using QuickTime Pro 7.2.1 or later, or by using the MakeRefMovie tool available at http://developer.apple.com/quicktime/quicktimeintro/tools. For more information on reference movies, see the "Creating a Reference Movie" section of the Safari Web Content Guide for iPhone OS. | ||
|
| ||
Visual EffectsHow do I use CSS to position or transform page elements in 2D or 3D space?CSS transform properties provide powerful formatting possibilities, without having to resort to plug-ins or static images to display the desired layout. HTML elements including text, images, media elements for audio and video, and more can be transformed via translation, scaling, rotation, skewing, or a transform matrix. Transforms are specified with the For example, to scale an image to half its size, flip it on the x-axis, and rotate it by 12 and a half degrees, you could use the CSS transform property in Listing 4. Listing 4: CSS transform example. <img src="safari.png" style="-webkit-transform: scale(0.5) scaleX(-1) rotate(12.5deg);"/> This is just a glimpse of what is possible when using CSS transforms. More information about how to transform page elements using CSS can be found in the “Transforms” section of the Safari Visual Effects Guide. How do I change the origin of a CSS transform?When an element is translated, rotated, scaled, skewed or transformed in some other way using CSS, the origin of the transform defaults to the center of the element. You may find the need to transform an object with the origin positioned elsewhere on the element. You can specify the origin for a CSS transform using the Listing 5: Changing the origin of a CSS transform. <div style="-webkit-transform:rotate(20deg); -webkit-transform-origin: top left;">
Hello Safari Developers!
</div>
For more information on changing the origin of a transform, see the "Changing the Origin" section of the Safari Visual Effects Guide, and the Safari CSS Reference. How do I obtain a realistic scene when transforming elements in 3D space?To obtain a realistic scene when transforming elements in 3D space, you should 1) define perspective so that elements in the distance appear smaller, and 2) make sure that nested elements are not flattened onto a single plane. To define perspective, use the Listing 6 illustrates how to set the Listing 6: Setting perspective and preserving 3D. <html>
<head>
<style>
.box {
height: 100px;
width: 100px;
background-color: purple;
position: absolute;
top: 100px;
left: 100px;
}
.translated {
-webkit-transform: translateZ(50px);
background-color: yellow;
}
#main {
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="main">
<div class="box"></div>
<div class="box translated"></div>
</div>
</body>
</html>
For more information on transforming elements in 3D space, see the "Setting the Transform Style" section of the Safari Visual Effects Guide and the CardFlip sample code. How do I use CSS transitions to add animation to my web content?A transition can be thought of a type of simple animation. You specify which CSS properties will be transitioned, and the duration of the transition. When you use JavaScript or CSS to change the value of a CSS property, WebKit—the layout engine that powers Safari—takes care of smoothly animating from the old value to the new value. For example, Listing 7 shows how to make a green box shrink to half its size and turn yellow when clicked, over a period of 1.5 seconds. Listing 7: Using CSS transitions to add animation. <html>
<head>
<style>
#box {
-webkit-transform: scale(1.0);
-webkit-transition-property: -webkit-transform, background-color;
-webkit-transition-duration: 1.5s;
background-color: green;
border: 2px solid;
height: 200px;
width: 200px;
}
</style>
<script>
function transitionBox(box) {
box.style.webkitTransform = 'scale(0.5)';
box.style.backgroundColor = 'yellow';
}
</script>
</head>
<body>
<div id="box" onclick="transitionBox(this);"></div>
</body>
</html>
Be sure to specify a duration for your transition using the How do I use CSS animations to add animation to my web content?CSS animations are a lot like CSS transitions, except that you have fine-grained control over the keyframes of the animation, and you can listen for DOM events to be notified of an animation's start, end, or iteration. CSS animations introduce the Listing 8 shows a simple example of CSS animation. For the first 50% of the animation, the box scales down to 30% of its original size. For the second half of the animation, the box scales back up to its full size. Note that this animation occurs over a duration of 4 seconds. Listing 8: Using CSS animations to add animation. <html>
<head>
<style>
@-webkit-keyframes changeScale {
0% {
-webkit-transform: scale(1.0);
}
50% {
-webkit-transform: scale(0.3);
}
100% {
-webkit-transform: scale(1.0);
}
}
#box {
height: 300px;
width: 300px;
background-color: purple;
-webkit-animation-name: changeScale;
-webkit-animation-duration: 4s;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="box"></div>
</body>
</html>
For more information about CSS animations, see the "How Animations Work" section of the Safari Visual Effects Guide. How do I control the acceleration curve for a CSS transition or animation?You can control the acceleration curve of a CSS transition or animation by specifying a timing function. By default, CSS transitions and animations use a timing function named To specify an acceleration curve for a CSS animation, use the Listing 9: Using timing functions with CSS transitions. <html>
<head>
<style>
#box {
-webkit-transform: scale(1.0);
-webkit-transition-property: -webkit-transform, background-color;
-webkit-transition-duration: 5s;
-webkit-transition-timing-function: ease-in;
background-color: green;
border: 2px solid;
height: 200px;
width: 200px;
}
</style>
<script>
function transitionBox(box) {
box.style.webkitTransform = 'scale(0.5)';
box.style.backgroundColor = 'yellow';
}
</script>
</head>
<body>
<div id="box" onclick="transitionBox(this);"></div>
</body>
</html>
For more information on using timing functions for CSS transitions or animations, see the the “Using Timing Functions” sections of the Safari Visual Effects Guide and the Safari CSS Reference. How do I detect when animations have started, iterated, or ended?When animating elements on a webpage using CSS animations, you can detect through JavaScript when an animation has started, iterated, or ended using DOM events. The event names are Listing 10: CSS animation event handlers. <html>
<head>
<script>
function addAnimationHandlers() {
var box = document.getElementById('box');
box.addEventListener('webkitAnimationStart', function (){ alert('Animation started.'); }, false);
box.addEventListener('webkitAnimationIteration', function (){ alert('Animation iterated.'); }, false);
box.addEventListener('webkitAnimationEnd', function (){ alert('Animation ended.'); }, false);
}
</script>
<style>
@-webkit-keyframes changeScale {
0% {
-webkit-transform: scale(1.0);
}
50% {
-webkit-transform: scale(0.3);
}
100% {
-webkit-transform: scale(1.0);
}
}
#box {
height: 300px;
width: 300px;
background-color: purple;
-webkit-animation-name: changeScale;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body onload="addAnimationHandlers();">
<div id="box"></div>
</body>
</html>
For more information on detecting when an animation has started, iterated, or ended, see the "Handling Animation Events" section of the Safari Visual Effects Guide. How do I delay the start of a CSS transition or CSS animation?Sometimes you may find it necessary to delay the start of a CSS transition or CSS animation—perhaps you have several elements with the same animation, but you
 want to stagger their start times. To add a delay to the beginning of your CSS animation, use the Listing 11: Delaying the start of a CSS transition. #box {
-webkit-transform: scale(1.0);
-webkit-transition-duration: 1.5s;
-webkit-transition-property: -webkit-transform, background-color;
-webkit-transition-delay: 2s;
background-color: green;
border: 2px solid;
height: 200px;
width: 200px;
}
For more information on delaying the start of a CSS transitions or animations, see the the “Setting Transition Properties” section of the Safari Visual Effects Guide and the Safari CSS Reference. How do I repeat a CSS animation?CSS transitions always execute only once, when the values of the properties being animated are changed via JavaScript or CSS. If you use CSS animations, you can specify that an animation iterate multiple times or even infinitely by using the Listing 12: Repeating CSS animation. <html>
<head>
<style>
@-webkit-keyframes changeScale {
0% {
-webkit-transform: scale(1.0);
}
50% {
-webkit-transform: scale(0.3);
}
100% {
-webkit-transform: scale(1.0);
}
}
#box {
height: 300px;
width: 300px;
background-color: purple;
-webkit-animation-name: changeScale;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="box"></div>
</body>
</html>
For more information on repeating CSS animations, see the "Repeating Animations" section of the Safari Visual Effects Guide and the Leaves sample code. | ||
|
| ||
Document Revision History
| ||||
Back to Top 
| ||||