**前言**本书介绍了如何借助计算机代码和数学知识在Web上创建交互式的动画。你无须为记不清高中代数课的内容而感到担心,你只需有对它们稍微有一些了解就可以开始本书的学习。本书并不是为了让你记住各种数学公式和理论,而是教给你一些可以用于实现和表达创意的工具。虽然在此过程我们也会介绍一些根本性的原理,但是更加重要的是,告诉你如何将技术实际运用到你的工作中。你将看到各种概念和公式如何在你面前即时地发挥作用。尝试将本书想象成各种运动元素,或包含各种创意组合、竞赛与引用的目录。
本书中会出现大量可供学习的示例,并且当你看到自己创建的各种物体在屏幕上运动时,你会很有成就感,因为它们看上去栩栩如生。而当你把这些动画以一个可以在Web浏览器中访问的链接的形式分享给你的朋友们时,你将获得更大的成就感,而这恰恰得益于经由互联网发布的巨大优势。
本书是基于Keith Peters的优秀图书《Foundation ActionScript Animation》重写的。然而,不同之处在于,那本书针对的是Flash技术,本书采用了诸如HTML5与JavaScript等最近流行的Web技术。本书秉承着上一本书的数学原理发展而来,它们在这一方面是相通的。当你理解了一些基础模块后,你就不会再依赖于一些具体的开发工具,而能够将这些概念运用于你所涉猎的各种编程环境。
由于书中的示例都是通过HTML5与JavaScript实现的,因此接下来我们会指导你学习那些用于理解示例所需的特定编程技术。JavaScript是一门有趣、强大而又相对精简的语言,不过因为它的灵活性,它的用法可以变得千奇百怪。不同于那些只能以某种特定方式编程的、更加结构化的语言,JavaScript允许你编写风格迥异的代码。这种自由度虽然可以带来非常强大的功能,但是它也会为初学者掌握这门语言的主要思路增加困惑。如果这是你首次接触JavaScript,最好能够在学习本书的示例前简要略读一段关于它的介绍。在学习JavaScript的过程中,最大的困惑往往来自于你从其他语言中带来的种种假设。请将相关的参考文档放在你的手边,如果有任何疑惑,直接到浏览器的开发控制台中测试代码。如果你是Flash开发人员,请抵制住将JavaScript想象成ActionScript的某个变种的诱惑。JavaScript有它自己独特的程序结构与风格,如果能够在一开始的时候摒弃那些先入为主的观点,则可以为以后的学习避免很多麻烦。
本书的编写过程充满了乐趣,我也希望你能够在阅读它的时候享受其中的快乐。编写你的程序,体验各种各样的动画效果,分享它们并向他人学习。创新是一个主动的过程,请不要守株待兔,让我们开始编码吧!
**[第一部分 JavaScript动画基础第1章 动画的基本概念1.1 动画](https://yq.aliyun.com/articles/97384)**1.2 帧与运动1.2.1 记录帧1.2.2 程序帧1.3 动态动画与静态动画1.4 小结**[第2章 动画的JavaScript基础2.1 动画基础](https://yq.aliyun.com/articles/97405)**2.2 HTML5简介2.2.1 对canvas的支持2.2.2 性能2.2.3 HTML5基本文档2.2.4 CSS样式表2.2.5 额外的脚本2.2.6 调试2.3 用代码实现动画2.3.1 动画循环2.3.2 使用requestAnimationFrame的动画循环2.4 JavaScript对象2.4.1 基础对象2.4.2 创建一类新对象2.4.3 原型2.4.4 函数风格2.5 用户交互2.5.1 事件与事件处理程序2.5.2 监听器与事件处理程序2.5.3 鼠标事件2.5.4 鼠标位置2.5.5 触摸事件2.5.6 触摸位置2.5.7 键盘事件2.5.8 键盘码2.6 小结
相关资源:HTML5 JavaScript动画基础(文本 源码)