编辑推荐
通过HTML5+JavaScript动画基础,你将进入Web编程创意的新时代。HTML5+JavaScript动画基础详细介绍了如何使用HTML5的canvas元素来创建高级Web图形和动态脚本动画。它涵盖了要完成各种动画项目所必需掌握的所有技能——从游戏到导航系统,从广告到教育应用程序。
在HTML5+JavaScript动画基础中,作者Billy Lamberta首先清晰地介绍了所有相关的数学知识,然后引入了加速度、速度向量、缓动、弹动、碰撞检测、动量守恒、3D、正向运动学和反向运动学等物理概念。他还帮你建立了一个工具集,你可以把这些工具融入自己编写的任意动画脚本中来创建动态效果。
在任何时候,你都能购理解隐藏在脚本动画背后的概念,而且还可以创建各种各样令人激动的动画和游戏。对于所有使用HTML5或从Flash转到HTML5的Web开发人员来说,HTML5+JavaScript动画基础正是你们梦寐以求的,它可以引领你创建各种能够在当前所有的浏览器和大多数移动设备(包括iPhone、iPad和Android设备)上运行的完全符合标准的游戏、应用程序、动画。
内容简介
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户交互:移动物体、缓动与弹动、碰撞检测、坐标旋转与斜面反弹、撞球物理、粒子与万有引力、正向运动学:让事物行走、反向运动学:拖曳与伸出、三维基础、三维线条与填充、背面剔除与三维灯光、矩阵数学、秘诀与技巧等内容。
这些内容都是Web开发人员在深入如加速度、速度、缓冲、弹簧、碰撞检测、动量守恒、3D以及正向和反向运动物理概念之前,需要知道的所有关于三角函数的知识。在阅读本书的过程中,读者不但可以掌握脚本动画背后的概念,还可以创造出各种形式的精彩动画和游戏。
《HTML5+JavaScript动画基础》面向所有使用HTML5或从Flash转过来的Web开发人员。
作者简介
徐宁,软件架构师,从2001年开始接触.NET开发,于2007年7月获得C#方向的微软MVP。现任职于道富银行技术中心,从事金融软件架构设计的工作。在博客园(idior.cnblogs.com)曾发表多篇技术文章并参与过多本技术书籍的翻译,现关注于.NET企业应用与敏捷开发。你可以通过xuning.net@gmail.com与他联系。
李强,软件工程师,2008年毕业于西北大学软件学院,现就职于道富银行技术中心。开发了多个大型金融项目。爱好技术,喜欢折腾,在WCF,WPF,ASP.NET MVC等多个领域都有较深入研究。你可以通过Email/MSN: Sparkli@hotmail.com与他联系。
内页插图
精彩书评
HTML5+JavaScript是目前的移动应用开发技术。在HTML5的诸多新特性中,HTML5 Canvas是其中吸引人的特性之一。它由JavaScript脚本进行控制,可以动态地绘制出各种2D图形,甚至可以对图像像素进行任意处理。
本书是面向游戏和娱乐应用开发的HTML5图书,在书中我们将通过流行的Web前端开发语言JavaScript操纵Canvas来实现各种各样的动画效果,通过各种各样的示例可以触发你联想到如何将它们组合在一起以实现你的创意。
目录
第一部分 JavaScript动画基础
第1章 动画的基本概念
1.1 动画
1.2 帧与运动
1.2.1 记录帧
1.2.2 程序帧
1.3 动态动画与静态动画
1.4 小结
第2章 动画的JavaScript基础
2.1 动画基础
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 小结
第3章 动画中的三角学
3.1 三角学
3.2 角
3.2.1 弧度和角度
3.2.2 canvas坐标系
3.2.3 三角形的边
3.2.4 三角函数
3.3 旋转
3.4 波
3.4.1 平滑的上下运动
3.4.2 线性垂直运动
3.4.3 脉冲运动
3.4.4 使用两个角的产生波
3.4.5 使用绘图API产生的波
3.5 圆与椭圆
3.5.1 圆周运动
3.5.2 椭圆运动
3.6 勾股定律
3.6.1 两点间距离
3.7 本章中的重要公式
3.7.1 三角学基础函数
3.7.2 角度与弧度互转
3.7.3 朝鼠标(或任意一点)旋转
3.7.4 创建波
3.7.5 创建圆形
3.7.6 创建椭圆形
3.7.7 获取两点间的距离
3.8 小结
第4章 渲染技术
4.1 canvas上的颜色
4.1.1 使用十六进制表示颜色值
4.1.2 色彩合成
4.1.3 提取三原色
4.1.4 透明度
4.1.5 与颜色相关的工具函数
4.2 绘图API
4.3 canvas上下文
4.4 使用clearRect消除图案
4.4.1 设置线条的外观
4.5 使用lineTo与moveTo绘制路径
4.5.1 使用quadraticCurveTo绘制曲线
4.5.2 创建多条曲线
4.5.3 其他形式的曲线
4.6 使用填充色创建图形
4.6.1 创建渐变填充色
4.6.2 设置渐变色的颜色
4.7 加载并绘制图片
4.7.1 加载图片
4.7.2 使用图片元素
4.7.3 使用视频元素
4.8 操纵像素
4.8.1 获取像素数据
4.8.2 绘制像素数据
4.9 本章中的重要公式
4.9.1 从十六进制转换到十进制
4.9.2 从十进制转换到十六进制
4.9.3 组合三原色
4.9.4 提取三原色
4.9.5 绘制一条穿越某个点的曲线
4.10 小结
第二部分 基本动画
第5章 速度向量和加速度
5.1 速度向量
5.1.1 向量与速度向量
5.1.2 单轴上的速度向量
5.1.3 双轴上的速度向量
5.1.4 角速度
5.1.5 向量加法
5.1.6 鼠标追随者
5.1.7 速度向量扩展
5.2 加速度
5.2.1 单轴加速度
5.2.2 双轴加速度
5.2.3 重力加速度
5.2.4 角加速度
5.2.5 宇宙飞船
5.2.6 飞船控制
5.3 本章中的重要公式
5.3.1 将角速度分解为x、y轴上的速度向量
5.3.2 将角加速度(作用域物体上的力)分解为x、y轴上的加速度
5.3.3 将加速度加入速度向量
5.3.4 将速度向量加入位置坐标
5.4 小结
第6章 边界与摩擦力
6.1 环境边界
6.1.1 设置边界
6.1.2 移除物体
6.1.3 重置物体
6.1.4 屏幕环绕
6.1.5 反弹
6.2 摩擦力
6.2.1 摩擦力,正确方法
6.2.2 摩擦力,简便方法
6.2.3 摩擦力应用
6.3 本章中的重要公式
6.3.1 移除越界物体
6.3.2 重置越界物体
6.3.3 越界物体的屏幕环绕
6.3.4 应用摩擦力(正确方法)
6.3.5 应用摩擦力(简便方法)
6.4 小结
第7章 用户交互:移动物体
7.1 按下及释放物体
7.1.1 使用触摸事件
7.2 拖曳对象
7.2.1 结合运动代码的拖曳
7.3 投掷
7.4 小结
第三部分 高级动画
第8章 缓动与弹动
8.1 比例运动
8.2 缓动
8.2.1 简单缓动
8.2.2 高级缓动
8.3 弹动
8.3.1 一维坐标上的弹动
8.3.2 二维坐标上的弹动
8.3.3 向移动的目标点弹动
8.3.4 弹簧在哪儿
8.3.5 链式弹动
8.3.6 多个目标点的弹动
8.3.7 目标偏移量
8.3.8 用弹簧连接多个物体
8.4 本章中的重要公式
8.4.1 简单缓动,详细版
8.4.2 简单缓动,缩略版
8.4.3 简单缓动,简易版
8.4.4 简单弹动,详细版
8.4.5 简单弹动,缩略版
8.4.6 简单弹动,简易版
8.4.7 有偏移量的弹动
8.5 小结
第9章 碰撞检测
9.1 碰撞检测的方法
9.2 基于几何图形的碰撞检测
9.2.1 两个物体间的碰撞检测
9.2.2 物体和点的碰撞检测
9.2.3 几何图形碰撞检测法的总结
9.3 基于距离的碰撞检测
9.3.1 基于距离的简单碰撞检测
9.3.2 弹性碰撞
9.4 多物体的碰撞检测策略
9.4.1 基础的多物体碰撞检测
9.4.2 多物体弹动
9.5 本章中的重要公式
9.5.1 基于距离的碰撞检测
9.5.2 多物体碰撞检测
9.6 小结
第10章 坐标旋转与斜面反弹
10.1 简单坐标旋转
10.2 高级坐标旋转
10.2.1 旋转单个物体
10.2.2 旋转多个物体
10.3 斜面反弹
10.3.1 执行旋转
10.3.2 优化代码
10.3.3 实现动态效果
10.3.4 修复“不从边缘落下”的问题
10.3.5 修复“线下”问题
10.3.6 从多个斜面反弹
10.4 本章中的重要公式
10.4.1 坐标旋转
10.4.2 反向坐标旋转
10.5 小结
第11章 撞球物理
11.1 质量
11.2 动量
11.3 动量守恒
11.3.1 单轴上的动量守恒
11.3.2 双轴上的动量守恒
11.4 本章中的重要公式
11.4.1 动量守恒的数学表示
11.4.2 动量守恒的JavaScript代码
11.5 小结
第12章 粒子与万有引力
12.1 粒子
12.2 万有引力
12.2.1 万有引力
12.2.2 碰撞检测及反应
12.2.3 轨道运动
12.3 弹力
12.3.1 万有引力VS弹力
12.3.2 弹力节点花园
12.3.3 相连的节点
12.3.4 有质量的节点
12.4 本章中的重要公式
12.4.1 基本引力
12.4.2 引力公式的JavaScript实现
12.5 小结
第13章 正向运动学:让物体行走
13.1 介绍正向和反向运动学
13.2 正向运动学编程入门
13.2.1 移动一个节段
13.2.2 移动两个节段
13.3 过程自动化
13.3.1 建立一个自然行走周期
13.3.2 动态调整
13.4 让它真实地行走
13.4.1 给它一些空间
13.4.2 加入重力
13.4.3 处理碰撞
13.4.4 处理反作用力
13.4.5 屏幕环绕,重复
13.5 小结
第14章 反向运动学:拖曳与伸出
14.1 伸出和拖曳单个节段
14.1.1 伸出单个节段
14.1.2 拖曳单个节段
14.2 拖曳多个节段
14.2.1 拖曳两个节段
14.2.2 拖曳更多节段
14.3 伸出多个节段
14.3.1 伸向鼠标位置
14.3.2 伸向一个物体
14.3.3 加入一些交互
14.4 使用标准反向运动学方法
14.4.1 介绍余弦定理
14.4.2 编程实现余弦定理
14.5 本章中的重要公式
14.5.1 余弦定理
14.5.2 JavaScript中的余弦定理
14.6 小结
第四部分 3D动画
第15章 三维基础
15.1 第三维度与透视图
15.1.1 z轴
15.1.2 透视图
15.2 速度与加速度
15.3 反弹
15.3.1 单物体反弹
15.3.2 多物体反弹
15.3.3 Z排序
15.4 重力
15.5 屏幕环绕
15.6 缓动与弹动
15.6.1 缓动
15.6.2 弹动
15.7 坐标旋转
15.8 碰撞检测
15.9 本章中的重要公式
15.9.1 基本透视图
15.9.2 Z排序
15.9.3 坐标旋转
15.9.4 三维距离计算
15.10 小结
第16章 三维线条与填充
16.1 创建点和线
16.2 创建图形
16.3 创建三维填充
16.3.1 使用三角形
16.4 三维实体建模
16.4.1 建模旋转的立方体
16.4.2 建模其他形状
16.5 移动三维实体
16.6 小结
第17章 背面剔除与三维灯光
17.1 背面剔除
17.2 增强的深度排序
17.3 三维灯光
17.4 小结
第五部分 其他技巧
第18章 矩阵数学
18.1 矩阵基础
18.2 矩阵运算
18.2.1 矩阵加法
18.2.2 矩阵乘法
18.3 canvas变换
18.4 小结
第19章 秘诀与技巧
19.1 布朗(随机)运动
19.2 随机分布
19.2.1 正方形分布
19.2.2 圆形分布
19.2.3 偏向分布
19.2.4 基于碰撞的分布
19.3 基于定时器和基于时间的动画
19.3.1 基于定时器的动画
19.3.2 基于时间的动画
19.4 等质量物体之间的碰撞
19.5 集成声音
19.6 小结
附录A 常用公式
A.1 第3章
A.1.1 三角学基础函数
A.1.2 角度与弧度互转
A.1.3 朝鼠标指针(或任意一点)旋转
A.1.4 创建波
A.1.5 创建圆形
A.1.6 创建椭圆形
A.1.7 获取两点间的距离
A.2 第4章
A.2.1 从十六进制转换到十进制
A.2.2 从十进制转换到十六进制
A.2.3 组合三原色
A.2.4 提取三原色
A.2.5 绘制一条穿越某个点的曲线
A.3 第5章
A.3.1 将角速度分解为x、y轴上的速度向量
A.3.2 将角加速度(作用于物体上的力)分解为x、y轴上的加速度
A.3.3 将加速度加入速度向量
A.3.4 将速度向量加入位置坐标
A.4 第6章
A.4.1 移除越界物体
A.4.2 重置越界物体
A.4.3 屏幕环绕越界物体
A.4.4 应用摩擦力(正确方法)
A.4.5 应用摩擦力(简便方法)
A.5 第8章
A.5.1 简单缓动,详细版
A.5.2 简单缓动,缩略版
A.5.3 简单缓动,简易版
A.5.4 简单弹动,详细版
A.5.5 简单弹动,缩略版
A.5.6 简单弹动,简易版
A.5.7 有偏移量的弹动
A.6 第9章
A.6.1 基于距离的碰撞检测
A.6.2 多物体碰撞检测
A.7 第10章
A.7.1 坐标旋转
A.7.2 反向坐标旋转
A.8 第11章
A.8.1 动量守恒的数学表示
A.8.2 动量守恒的JavaScript代码
A.9 第12章
A.9.1 基本引力
A.9.2 引力公式的JavaScript实现
A.10 第14章
A.10.1 余弦定理
A.10.2 JavaScript中的余弦定理
A.11 第15章
A.11.1 基本透视图
A.11.2 Z排序
A.11.3 坐标旋转
A.11.4 三维距离计算
前言/序言
《网页互动魔法:CSS3与JavaScript精通实战》 洞悉网页生命力的奥秘,点燃视觉表现力的全新篇章 在数字浪潮席卷的今日,网页早已超越了单纯的信息载体,它化身为充满活力、触动人心的互动空间。当用户轻触屏幕,当鼠标在界面上舞动,网页便如同拥有了生命,以流畅的动画、灵动的交互回馈着他们的每一次指令。而这一切的魔法,正是由网页前端技术精心编织而成。《网页互动魔法:CSS3与JavaScript精通实战》正是这样一本,将带你深度探索网页动效与交互的奥秘,让你掌握从静态画布到动态艺术的蜕变之道。 本书并非简单罗列API或枯燥的语法讲解,而是以实战为导向,以解决真实开发场景中的痛点为目标,为你构建一套系统而深入的网页互动技能体系。我们将从CSS3强大的动画与过渡属性入手,带你领略如何用最简洁的代码创造出令人惊艳的视觉效果。随后,我们将深入JavaScript的世界,学习如何运用其强大的逻辑能力,赋予网页以生命,使其能够响应用户的每一次操作,呈现出丰富多样的交互逻辑。 CSS3动画与过渡:勾勒视觉之美的灵动画笔 在Web开发领域,CSS3的出现无疑是一场革命。它以前所未有的方式,让开发者能够以声明式的方式控制元素的视觉呈现,尤其是其在动画和过渡方面的能力,更是极大地解放了开发者的创造力。本书将带领你循序渐进地掌握CSS3动画的核心要素: 过渡 (Transitions): 学习如何让元素的属性变化在一段时间内平滑发生,例如鼠标悬停时按钮颜色的渐变,或者元素出现时的淡入效果。我们将深入理解`transition-property`、`transition-duration`、`transition-timing-function`以及`transition-delay`等关键属性,并学习如何利用它们组合出各种自然流畅的视觉反馈。 关键帧动画 (Keyframe Animations): 当需求更加复杂的动画序列时,关键帧动画便是你的不二之选。本书将详细讲解`@keyframes`规则的使用,让你能够定义动画的起始、中间和结束状态,并通过百分比或`from`/`to`关键字精确控制动画的每一个阶段。你将学会如何创建诸如弹跳、旋转、缩放、路径动画等,并理解`animation-name`、`animation-duration`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`以及`animation-play-state`等属性的强大功能。 3D变换与空间感: 现代网页设计越来越注重空间的营造,CSS3的`transform`属性提供了强大的3D变换能力。我们将探索`translate3d`、`rotate3d`、`scale3d`以及`perspective`等属性,让你能够创建出具有深度和空间感的动画效果,使网页体验更加沉浸。 动画的性能优化: 优异的动画效果离不开流畅的性能。本书会探讨如何通过利用硬件加速、避免重排重绘等技术,优化CSS3动画的性能,确保在各种设备上都能呈现出平滑如丝的动画体验。 JavaScript交互:赋予网页智慧与生命 如果说CSS3是网页的画笔,那么JavaScript便是网页的灵魂。它赋予了网页响应用户、处理逻辑、动态更新内容的能力,让静态的页面瞬间鲜活起来。本书将系统性地引导你掌握JavaScript在网页交互中的核心应用: DOM操作的精髓: Document Object Model (DOM) 是JavaScript与网页结构进行交互的桥梁。我们将深入学习如何使用JavaScript选取、创建、修改和删除DOM元素,以及如何动态地改变元素的样式和属性。理解事件委托、节点遍历等高级技巧,将帮助你写出更高效、更优雅的DOM操作代码。 事件驱动的编程模型: 网页交互的核心在于事件。本书将全面讲解各种常见的用户事件,如`click`、`mouseover`、`keydown`、`submit`、`scroll`等,以及如何使用`addEventListener`注册和移除事件监听器。你将学会如何根据用户的行为,触发相应的JavaScript函数,实现诸如弹出窗口、导航菜单展开、表单验证等功能。 异步编程与AJAX: 现代网页需要能够与服务器进行实时通信,而无需刷新整个页面。本书将深入讲解AJAX (Asynchronous JavaScript and XML) 技术,学习如何使用`XMLHttpRequest`对象或更现代的`fetch` API,实现数据的异步加载和更新。你将掌握如何处理服务器响应,更新页面内容,从而创建出动态、响应式的Web应用。 Web APIs的强大功能: JavaScript提供了丰富的Web APIs,它们赋予了网页处理更复杂任务的能力。我们将探索诸如定时器 (`setTimeout`、`setInterval`)、本地存储 (`localStorage`、`sessionStorage`)、浏览器信息获取以及更高级的Canvas API进行自定义图形绘制等。 面向对象与函数式编程思想在交互中的应用: 为了编写更易于维护和扩展的代码,我们将引入面向对象和函数式编程的思想。学习如何组织代码结构,利用对象和函数来封装逻辑,提高代码的可重用性和可读性。 实战项目驱动: 本书最大的特色在于其强大的实战性。我们不会停留在理论层面,而是会通过一系列精心设计的项目,将所学知识融会贯通。从简单的图片轮播、下拉菜单,到复杂的拖拽排序、无缝滚动的列表,再到响应式的数据可视化图表,每一个项目都将引导你亲手实现,让你在实践中巩固技能,解决实际开发中遇到的问题。 本书的独特价值: 循序渐进,由浅入深: 无论你是初学者,还是希望深入提升的开发者,本书都将为你提供一条清晰的学习路径。从基础概念到高级技巧,内容由易到难,层层递进,确保你能够扎实掌握每一项技能。 代码示例丰富,易于理解: 书中的每一个知识点都配有清晰、可运行的代码示例,让你能够直观地看到效果,并方便地进行复制、修改和实践。 注重实战,解决痛点: 本书始终围绕“实战”展开,力求为你解决在实际Web开发中遇到的各种动画与交互难题。通过完成书中的项目,你将积累宝贵的实战经验。 紧跟技术潮流: 本书内容涵盖了CSS3和JavaScript最新的特性和最佳实践,帮助你站在技术前沿。 培养解决问题的能力: 我们鼓励读者在学习过程中积极思考,动手实践,并提供解决问题的思路和方法,培养独立解决复杂问题的能力。 谁适合阅读本书: 前端开发新手: 希望系统学习网页动画和交互技术,为日后深入Web开发打下坚实基础的开发者。 有一定基础的前端开发者: 希望巩固和提升CSS3动画与JavaScript交互技能,学习更高级的技巧和优化方法的开发者。 UI/UX设计师: 希望理解前端实现原理,能够更有效地与开发团队沟通,将设计理念转化为精美网页的创意人士。 对网页特效和互动感兴趣的爱好者: 渴望掌握制作炫酷网页技术,提升个人项目或作品吸引力的技术爱好者。 翻开《网页互动魔法:CSS3与JavaScript精通实战》,你将不仅仅是学习代码,更是解锁网页的无限潜能,用你的双手创造出引人入胜、令人难忘的数字体验。让每一个点击、每一次滑动,都成为用户与网页之间充满惊喜的互动。