《HTML5+JavaScript动画基础》——导读

简介: 由于书中的示例都是通过HTML5与JavaScript实现的,因此接下来我们会指导你学习那些用于理解示例所需的特定编程技术。JavaScript是一门有趣、强大而又相对精简的语言,不过因为它的灵活性,它的用法可以变得千奇百怪。


screenshot

**
前言
**
本书介绍了如何借助计算机代码和数学知识在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 小结

相关文章
|
11天前
|
前端开发 JavaScript UED
使用JavaScript实现动画效果
【4月更文挑战第21天】使用JavaScript实现动画效果
25 10
|
24天前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
2天前
|
JavaScript 前端开发 UED
【JavaScript技术专栏】使用JavaScript实现拖放和动画效果
【4月更文挑战第30天】本文介绍了如何使用JavaScript实现拖放功能和基本动画效果。拖放功能通过监听mousedown、mousemove和mouseup事件,记录元素初始位置并更新其坐标实现。动画效果则利用requestAnimationFrame函数持续改变元素位置,创建平滑移动效果。示例代码包括HTML结构和对应的JavaScript实现。
|
2天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
3天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
6天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
18 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
6天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
18 0
|
9天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
11 0
|
9天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
13 0
|
10天前
|
前端开发 JavaScript
前端基础知识(一){HTML.CSS.JavaScript}
前端基础知识(一){HTML.CSS.JavaScript}