使用JavaScript创建HTML5交互式动画指南

需积分: 10 51 浏览量更新于2024-07-18 收藏 8.89MB PDF 举报

"《Foundation HTML5 Animation with Javascript (2012)》是一本关于如何使用计算机代码和数学创建互动网络动画的书籍。本书旨在提供工具，帮助读者表达创意，而不是专注于理论记忆或复杂的数学公式。书中通过实例展示概念和公式，让读者直观地看到动态效果的实现。书中的内容涵盖了JavaScript动画的基础、基本运动、高级运动以及3D动画等部分，详细讲解了基础动画概念、JavaScript动画原理、三角函数在动画中的应用、速度与加速度、边界与摩擦力、用户交互、缓动与弹簧效应、碰撞检测、坐标旋转、台球物理、粒子吸引与重力、前后向动力学等主题。此外，还介绍了3D基础知识和3D线条与形状。" 这本书适合对HTML5动画感兴趣的读者，无论你是否具备高中的代数知识，只要有一点基础，就可以开始学习。作者不仅解释了底层思想，更强调了实践应用，让你能够将这些技术融入到自己的工作中。第1章介绍了基础动画概念，包括动画的基本原理和设计思路。第2章深入到JavaScript的世界，讲解了JavaScript在动画制作中的核心概念和技术。第3和第4章通过三角函数来阐述如何控制对象的运动轨迹，这对于创建复杂动画至关重要。第5章探讨了速度和加速度如何影响动画的流畅度，而第6章则涉及到了边界和摩擦力，这些是创建真实感动态效果的关键因素。第7章讲述了用户如何与动画对象进行交互，使动画更具互动性。第8章和第9章分别讲解了缓动效果和碰撞检测，这些是提升用户体验和游戏设计的重要元素。第10章至第12章进一步扩展了物理概念，如角度弹射和引力，使动画更加逼真。第13章和第14章则涉及到了人物行走和物体拖拽的动画机制，即前向和逆向动力学。最后，第15和第16章进入了3D动画领域，介绍基本的3D概念和如何绘制3D线条与形状，帮助读者掌握创建立体效果的技术。《Foundation HTML5 Animation with Javascript (2012)》是一本全面且实用的教程，旨在让读者掌握使用HTML5、JavaScript和数学创建生动、交互式网络动画的技能。通过这本书，你可以逐步提升你的动画制作能力，从基础到高级，再到3D，全方位提升你的Web动画设计水平。

BASICS OF JAVASCRIPT FOR ANIMATION

use a default setting (wrongly), causing the page to display incorrectly. It's best to explicitly set the

character encoding here and avoid the potential confusion.

All valid HTML5 documents contain a

title element, which is also placed in the header. Because we use

a CSS stylesheet, create a

link element that points to an external file. This contains the style definitions

for our document; we’ll look at the

style.css file in a moment.

With the header set, let’s look at the rest of the document:

<body>

window.onload = function () {

//Our code here...

};

</script>

</body>

</html>

In the

body element, we place a canvas element. This is what we draw to and reference from our scripts.

Give the canvas an

id name and a height and width value so you can see it, and use its id to access

the element with the DOM interface.

After the canvas element, add a

script tag that includes the JavaScript code for each example. We’ve

placed the

script after the other elements, right before the closing body tag, so that the browser loads

the rest of the document before executing the script. Also, if the script is loaded from a file—possibly from

a different server—it won’t hold up the rest of the document while waiting to download. This makes loading

faster and the document more responsive.

The skeleton script is simple and effectively does nothing. The

window object is the top of the Document

Object Model and how we access the DOM. When the document has finished loading, the window object

executes the function assigned to its

onload property:

window.onload = function () {

//Our code here...

};

</script>

The example code in this book is placed within the

window.onload callback function. Because this

method is executed after all the document elements have been loaded, we can be assured that the canvas

element is ready to go by the time the code is called. Consequently, if your document contains a lot of data

embedded in it, such as large images, you can wait a long time for

window.onload to execute. In this

situation, it might be better to load the assets using JavaScript, which I show you how to do in Chapter 4.

Finally, we close out our

script, body, and html tags. We’re finished creating a basic but perfectly valid

HTML5 document.

CHAPTER 2

CSS stylesheet

In the document header, we created a link to a CSS stylesheet. Now, let’s look at that file. The style

definitions for this book are intentionally minimal; only the background color of the document

body and

canvas element has been declared. By default, the canvas background color is transparent, which might

be the color you want, but has been changed to white so you can see exactly where the element is

positioned in the document. Here’s the stylesheet for the

style.css file:

body {

background-color: #bbb;

}

#canvas {

background-color: #fff;

}

This assumes the document contains an element with an

id of 'canvas'. As a document gets more

complicated, so does its stylesheet. The HTML file defines the structure of the document, whereas the

CSS stylesheet defines the style or look of the elements. In general, it’s best to organize your content,

style, and scripts in separate files.

Additional scripts

As the examples get more complicated and you need to reuse portions of code, it becomes convenient, if

not necessary, to move these pieces into separate files for clarity. This is done when declaring new

classes that are used across multiple exercises and for functions whose verbosity would distract from the

point at hand.

Throughout this book, we'll maintain a file of these utility functions; it’s named

utils.js. This script

contains functions that set up boilerplate code for the examples, so that you can concentrate on the

underlying animation principles. Each function is explained as they are introduced, so you don’t have to

think of this file as a black box.

In this file, many of the utility functions will be added as properties to a global JavaScript object named

utils. This way, you can avoid cluttering up the global namespace with a bunch of functions. Be sure that

at the top of the

utils.js file you’ve declared an empty object like the following:

var utils = {};

To import this file and other scripts into your document, create a

script element and set its src attribute

to the location of the file. Include these immediately before the example code to be certain that everything

has loaded properly before attempting to use it:

window.onload = function () {

//Our code here...

};

</script>

CHAPTER 2

After you have opened a web developer console, you can type JavaScript expressions directly into the

browser and have them evaluated. Try it by entering these statements:

console.log("Hello, World!");

2 + 2

From the console, you can access DOM elements and script variables to inspect their values (provided

they are in the proper scope), which makes it easy to reason about how your program runs. This is a great

way to test and debug small sections of code before committing them to a larger program. Find those bugs

as early as possible!

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!

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 and store

a new image for each frame, even in a frame-by-frame animation. For each frame, we store the position,

size, color, and other attributes of every object drawn to the canvas. So, if you had a ball moving across

the screen, each frame would store the position of the ball on that frame. Maybe frame 1 would indicate

the ball is 10 pixels from the left side, frame 2 would indicate it’s 15 pixels, and so on. The code reads this

data, draws the object according to the description given, and displays that frame. From that process, you

can derive a flowchart, as shown in Figure 2-3.

Figure 2-3. Rendering and then displaying frames

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, you can start to see what we mean by a

loop.

First, you set up an initial state, such as by drawing a circle to the screen using the built-in canvas drawing

API. You then render and display the frame. Next, you apply your rules. The rules can be as simple as,

“The ball will move 5 pixels to the right,” or they can be made up of dozens of lines of complex

trigonometry. The examples in the book cover that entire spectrum. Applying the rules results in a new

state—a new description that is then rendered and displayed. Then you apply the same rules all over

again.

The same set of rules is applied over and over; you don’t have one set of rules for the first frame, and then

another set for the next. So, your challenge is to come up with a set of rules that can handle every possible

situation that can arise in your scene. What happens when the ball moves so far to the right that it’s off the

canvas? Your set of rules needs to account for this. Do you want the user to interact with the ball using a

mouse? Your rules need to take that into account as well.

It sounds daunting, but it’s not that complex. You start off with some simple behavior by creating a rule or

two, and when that works, you add another rule. The “rules” we’ve been referring to are actually

programming statements. Each rule can be a single statement or composed of several statements. In the

example of moving the ball 5 pixels to the right, the rule is expressed in JavaScript like this:

ball.x = ball.x + 5;

This says to take whatever the ball’s x position (horizontal axis) is, add 5 to it, and make that its new x

position. You can even simplify the expression like this:

ball.x += 5;

The += operator adds the value on the right to the variable on the left and assigns the result back to that

variable.

Here’s a more advanced set of rules that you’ll see later in the book:

var dx = mouse.x – ball.x,

dy = mouse.y – ball.y,

ax = dx * spring,

ay = dy * spring;

剩余487页未读，继续阅读

liujiachi6000

粉丝: 5
资源: 3

使用JavaScript创建HTML5交互式动画指南

Foundation.HTML5.Animation.with.JavaScript 和 源码

Foundation HTML5 Animation with JavaScript 无水印pdf

Foundation框架v6.5.1

Foundation HTML5 Animation with JavaScript

Foundation HTML5 Animation with JavaScript - HTML5动画设计基础

FriendsofED.Foundation.HTML5.Animation.with.JavaScript

Web Animation Using JavaScript - js网页动画-英文原版

Learn JavaScript with p5.js_Coding for Visual Learners-Apress(2018).pdf

JavaScript学习资料总汇-1

基于python的垃圾分类系统资料齐全+详细文档.zip

最新资源

Foundation.HTML5.Animation.with.JavaScript 和源码