HTML and CSS Reference
In-Depth Information
Chapter 1
Basic Animation Concepts
What we'll cover in this chapter:
What is animation?
Frames and motion
Dynamic versus static animation
Oh, how far the web browser has come! What started as a program for accessing text files over the
network, soon revolutionized how we communicate and share, and has now evolved into a fully graphical,
interactive programming environment. The most recent markup standard for these documents, HTML5,
adds graphics capabilities that were previously available only with native applications. After a period of
stagnation, modern web browsers benefit from a new wave of competition and innovation with HTML5 and
JavaScript. The new canvas element provides a way to create standards-compliant games, applications,
and animations that work across modern web browsers and mobile devices, including popular phones and
tablets such as iPhones, iPads, and Android devices.
This topic covers programming, math, and physics techniques used to make animations with the HTML5
canvas element and JavaScript. As you'll see, this provides developers with levels of power, control, and
interactivity that, for the first time, are available in a standards-compliant web browser.
Before we dive into specific techniques and formulas for moving things around with JavaScript, let's take a
quick look at exactly what animation is, some of the basic techniques behind it, and some concepts that
you can use for your animations to make them more dynamic and interesting.
Whether this is your first time drawing with computers or you have previous experience using tools such as
Adobe Flash, this topic is a great guide to programmed animation. This topic has undergone many
changes since being ported from Flash to JavaScript, but it also demonstrates that the underlying
