apress foundation html5 animation with javascript (2011)

[...]... introduction to HTML5  Animating with code  JavaScript objects  User interaction If the first chapter is a somewhat philosophical overview of animation, this one is a technical overview of what it takes to create an HTML5 document and how to animate using a canvas element and JavaScript This chapter covers the essentials of document structure, animation loops, JavaScript objects, and user interaction... new solutions to handle the demands placed on them An animation loop using requestAnimationFrame Because of the increased interest in HTML5- based animation, web browsers have implemented an API that lets developers indicate they're using JavaScript specifically for animation, which allows for browserbased optimizations The function window.requestAnimationFrame accepts a callback function as an argument... browsers With the HTML5 canvas element, you have a standards-compliant, cross-platform component for creating advanced web graphics This book is an exploration into the principles of programmatically generated movement for creating these next-generation graphic interactions 8 Chapter 2 Basics of JavaScript for Animation What we’ll cover in this chapter:  Basic animation  An introduction to HTML5 ... Animating with code With the document structure in place, you should now understand enough of the basics to start coding You need a text editor to input the examples and an HTML5- capable web browser to run them For debugging, you should be familiar with your browser’s built-in developer console After you have these tools—which may already be on your computer—you’re ready to go Let’s dive in to some animation! ... dive in to some animation! Animation loops Almost all programmed animation is expressed as some kind of loop If you think about a frame-by-frame animation, you might create a flowchart resembling a series of images, where each frame just needs to be drawn, as shown in Figure 2-2 Figure 2-2 Frame-by-frame animation When you start drawing shapes, though, things are a bit different JavaScript code won’t create... in Figure 2-3 Figure 2-3 Rendering and then displaying frames 16 BASICS OF JAVASCRIPT FOR ANIMATION But when you consider how we described a dynamic, coded animation, the flowchart looks more like Figure 2-4 Figure 2-4 Scripted animation As you see in Figure 2-4, there is no concept of frame 1, frame 2, and so on Programmed animation generally can, and usually does, all occur in just one frame Here,... way developers had to set up an animation loop using JavaScript If you really wanted to, you could still use this method in the example code throughout this book The problem is that JavaScript timers were never intended to be used for animation They are not accurate to the millisecond—timer resolutions vary across browsers—so you cannot count on them for high quality animations Furthermore, the delay... need to be run, then the animation code has to wait Because animation was never a feature of the previous HTML specification, browser vendors had not placed much priority on these kinds of optimizations However, with HTML5 s canvas element and a new emphasis on multimedia content, browsers are once again competing against each other on performance and speed Recognition that animation has become an increasingly... techniques you learn here are used throughout the rest of the book Basic animation To start off, let’s review what Chapter 1 covers:  Animation is made with frames, and each frame is slightly different in presenting the illusion of motion  Frame-by-frame animation contains an image or a description of an image for each frame  Dynamic animation contains an initial description of an image and rules that... specifies an HTML element that provides the visual bounds of the animation Changes to the program that are made in this function argument happen before the next browser repaint To create an animation loop, chain together multiple calls to requestAnimationFrame: (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); / /animation code }()); This might be a small snippet of code, but . Part I :JavaScript Animation Basics Chapter 1 :Basic Animation Concepts 3 Chapter 2: Basics of JavaScript for Animation 9 Chapter 3: Trigonometry for Animation. Basics of JavaScript for Animation What we’ll cover in this chapter:  Basic animation  An introduction to HTML5  Animating with code  JavaScript