动画交互技术——Animate CC 2020+CreateJS

"从目前动画的发展趋势来看，浏览器的功能越来越强大，包括对三维的支持都在飞速发展，所以，未来网页动画、跨平台动画将是一个潮流。 而Animate cc是由Flash发展而来的，它非常成熟的矢量动画制作功能及它对新事物的支持能力，比如VR、摄像机等等，及它在交互这块对HTML5 Canvas的支持，采用Createjs作为交互开发工具，这种完美的结合使开发人员事半功倍。"

本书是一本HTML5 Canvas交互动画的制作教程，使用中文版Animate CC 2020和CreateJS。AnimateCC 2020是Adobe公司**推出的专业化动画制作软件；CreateJS是基于HTML5开发的一套模块化的库 和工具。基于这些，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 本书从教学实际需求出发，合理安排知识结构：将Animate CC 2020分解成工具使用和动画制作， 完成动画实现；从零开始、由浅入深、循序渐进地讲解CreateJS，实现动画的交互。本书将基本概念、 技巧集成在每章的实例中，便于深化理解，所用实例全面而实用。 全书共分为10章：第1、2章介绍Animate CC 2020，可快速掌握平台工具的使用和动画制作；第 3～8章从使用代码片断让平台为用户写代码开始学习CreateJS，逐渐到系统学习CreateJS，再到应用 CreateJS；第9、10章介绍两个综合应用，一个是游戏，另一个是网页短片。 本书可以作为高等院校计算机专业、非计算机专业本科生的教材，也可以作为对动画制作感兴趣 的读者的参考书。

黎红 单位：广东培正学院 职务、职称：专业负责人 副教授 性别：女 年龄：51 专业：数字媒体技术 学历：硕士 研究领域：计算机应用 图形图像 研究成果：著有《视频增强算法及其应用》《ACCESS数据库应用基础》《Photoshop平面图像处理教程》等。

第1章 Animate CC 2020基础1 1.1 Animate CC 2020的大力度优惠系统要求1 1.1.1 Windows操作系统大力度优惠要求 1 1.1.2 Mac OS操作系统大力度优惠要求 2 1.2 Animate CC 2020的基本工作环境2 1.2.1 启动Animate CC 2020 2 1.2.2 新建文档 3 1.2.3 工作区 4 1.3 Animate CC 2020的常用工具6 1.3.1 绘图工具 6 1.3.2 其他工具 7 1.4 Animate CC 2020基本术语7 1.4.1 元件 7 1.4.2 绘制对象 9 1.5 实例：茶广告首页的制作9 1.6 本章小结13 第2章 Animate CC 2020动画14 2.1 逐帧动画14 2.1.1 开始 15 2.1.2 操作步骤 15 2.2 补间动画17 2.2.1 开始 18 2.2.2 操作步骤 18 2.3 形变动画20 2.3.1 开始 21 2.3.2 操作步骤 21 2.4 遮罩动画23 2.4.1 开始 24 2.4.2 操作步骤 24 2.5 摄像头动画27 2.6 其他类型动画29 2.6.1 骨骼动画 29 2.6.2 嘴形同步 29 2.6.3 VR 30 2.6.4 资源变形工具 31 2.7 本章小结32 第3章 Animate CC 2020动画 代码片断33 3.1 时间轴导航33 3.1.1  时间轴导航代码片断详解 34 3.1.2  实例 35 3.2 动作39 3.2.1 动作代码片断详解 39 3.2.2 实例 41 3.3 事件处理函数45 3.4 动画46 3.4.1 动画代码片断详解 46 3.4.2 实例 48 3.5 CreateJS API50 3.5.1 CreateJS API代码片断详解 50 3.5.2 实例一 54 3.5.3 实例二 57 3.6 组件63 IV 3.6.1 组件代码片断详解 63 3.6.2 实例 66 3.7 摄像头72 3.7.1 摄像头代码片断详解 72 3.7.2 实例 74 3.8 本章小结76 第4章 JavaScript基础78 4.1 JavaScript基本语法79 4.1.1 JavaScript基本规则 79 4.1.2 JavaScript变量 81 4.1.3 JavaScript数据类型 83 4.2 复合类型91 4.2.1  对象 91 4.2.2 数组 93 4.2.3 函数 97 4.3 运算符99 4.3.1 算术运算符 99 4.3.2 比较运算符 99 4.3.3 赋值运算符 100 4.3.4 逻辑运算符 100 4.3.5 条件运算符 101 4.3.6 typeof运算符和instanceof 运算符 101 4.4 异常处理102 4.4.1 异常抛出语句 102 4.4.2 异常捕捉语句 102 4.4.3 实例 103 4.5 流程控制103 4.5.1 顺序 104 4.5.2 分支 104 4.5.3 循环 107 4.6 实例110 4.7 本章小结113 第5章 CreateJS基础——EaselJS114 5.1 EaselJS简介114 5.2 CreateJS概述116 5.3 EaselJS文本117 5.3.1 开始 118 5.3.2 Text 119 5.3.3 Shadow属性 121 5.3.4 实例 122 5.4 EaselJS绘图123 5.4.1  开始 123 5.4.2  Graphics 123 5.4.3  Shape 125 5.4.4 Filter属性 126 5.4.5  Shadow属性 129 5.4.6  实例一 130 5.4.7  实例二 131 5.5 EaselJS容器133 5.6 本章小结135 第6章 CreateJS基础——EaselJS 图片136 6.1 EaselJS图片136 6.1.1 图片 136 6.1.2 sourceRect属性 138 6.1.3 Shadow属性 139 6.1.4 Filter属性 140 6.1.5 Mask属性 144 6.1.6 实例 145 6.2 Sprite147 6.2.1 Sprite 147 6.2.2 SpriteSheet 148 6.2.3 一帧动画 151 6.2.4 动画 153 6.3 本章小结154 V 第7章 CreateJS基础——EaselJS 事件155 7.1 帧循环事件155 7.1.1 Ticker 156 7.1.2 侦听器 157 7.1.3 Ticker使用 158 7.2 动画基础160 7.2.1 三角学 160 7.2.2 圆与椭圆 168 7.2.3 波 171 7.3 遮罩动画176 7.3.1 程序帧实现遮罩动画原理 177 7.3.2 X光机 178 7.3.3 你看见了什么 179 7.4 神奇的tick事件179 7.4.1 下雪 179 7.4.2 冒泡 182 7.4.3 红包雨 184 7.4.4 数字雨 185 7.4.5 动态曲线 186 7.4.6 图片轮播 188 7.4.7 星星鼠标 191 7.5 鼠标事件192 7.5.1 舞台的鼠标事件 193 7.5.2 显示对象的鼠标事件 195 7.5.3 实例 197 7.6 小应用199 7.6.1 制作相册 199 7.6.2  制作简易计算器 202 7.7 本章小结205 第8章 CreateJS基础——TweenJS、 ProloadJS、SoundJS206 8.1 TweenJS206 8.1.1 Tween 206 8.1.2 应用 211 8.2 ProloadJS212 8.2.1 LoadQueue 212 8.2.2 应用 213 8.3 SoundJS215 8.3.1 Sound 215 8.3.2 应用 219 8.4 碰撞检测220 8.4.1 基础语句 220 8.4.2 应用 221 8.5 本章小结225 第9章 小游戏制作226 9.1 制作小游戏226 9.1.1 什么是小游戏 226 9.1.2 小游戏制作方法 227 9.2 设计思路227 9.2.1 捕蝴蝶设计思路 227 9.2.2 制作捕蝴蝶流程 228 9.3 制作捕蝴蝶小游戏228 9.3.1 制作捕一只蝴蝶小游戏 228 9.3.2 制作捕一群蝴蝶小游戏 232 9.4 本章小结236 第10章 动画短片制作237 10.1 剧本237 10.1.1 故事 237 10.1.2 剧本内容 238 10.2 分镜剧本239 10.2.1 动画分镜 239 10.2.2 分镜稿 239 10.3 第一幕制作241 10.3.1 第一幕场景制作 242 10.3.2 第一幕交互 243 10.4 第二幕制作244 10.4.1 第二幕场景制作 244 10.4.2 第二幕交互 244 10.5 第三幕制作245 10.5.1 第三幕场景制作 245 10.5.2 第三幕交互 247 10.6 制作“六一”礼物248 10.6.1 “六一”礼物场景制作 249 10.6.2 “六一”礼物交互 249 10.6.3 编写完整代码 250 10.7 本章小结254 参考文献256 附录257