内 容 提 要 本 书 由 业 界 最 先 进 的 动 画 库 Velocity.js 的 作 者 所 著, 书 中 内 容 共 分 为 8 章, 简 明 扼 要 地 总 结 了 在 网 页 上 使 用 动 画 的 技 术 技 巧, 让 读 者 掌 握 如 何 有 效 利 用 动 画 实 现 无 与

图 灵 程 序 设 计 丛 书 Web Animation using JavaScript: Develop and Design JavaScript 网 页 动 画 设 计 [ 美 ] Julian Shapiro 著 王 沛 译 人 民 邮 电 出 版 社 北 京

内 容 提 要 本 书 由 业 界 最 先 进 的 动 画 库 Velocity.js 的 作 者 所 著, 书 中 内 容 共 分 为 8 章, 简 明 扼 要 地 总 结 了 在 网 页 上 使 用 动 画 的 技 术 技 巧, 让 读 者 掌 握 如 何 有 效 利 用 动 画 实 现 无 与 伦 比 的 用 户 体 验 具 体 内 容 包 括 : JavaScript 动 画 优 势,Velocity.js 的 利 用, 动 画 工 作 流, 文 本 动 画,SVG, 动 画 性 能 本 书 适 合 所 有 Web 开 发 工 程 师 和 动 画 设 计 师 晋 阶 学 习 著 [ 美 ] Julian Shapiro 译 王 沛 责 任 编 辑 朱 巍 执 行 编 辑 赵 瑞 琳 责 任 印 制 杨 林 杰 人 民 邮 电 出 版 社 出 版 发 行 北 京 市 丰 台 区 成 寿 寺 路 11 号 邮 编 100164 电 子 邮 件 315@ptpress.com.cn 网 址 http://www.ptpress.com.cn 北 京 印 刷 开 本 :800 1000 1/16 印 张 :7.75 字 数 :166 千 字 2016 年 1 月 第 1 版 印 数 :1 3 500 册 2016 年 1 月 北 京 第 1 次 印 刷 著 作 权 合 同 登 记 号 图 字 :01-2015-5819 号 定 价 :39.00 元 读 者 服 务 热 线 :(010)51095186 转 600 印 装 质 量 热 线 :(010)81055316 反 盗 版 热 线 :(010)81055315 广 告 经 营 许 可 证 : 京 崇 工 商 广 字 第 0021 号

前 言 1 版 权 声 明 Authorized translation from the English language edition, entitled Web Animation using JavaScript: Develop and Design by Julian Shapiro, published by Pearson Education, Inc., publishing as Peachpit. Copyright 2015 by Julian Shapiro. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Simplified Chinese-language edition copyright 2016 by Posts & Telecom Press. All rights reserved. 本 书 中 文 简 体 字 版 由 Pearson Education Inc. 授 权 人 民 邮 电 出 版 社 独 家 出 版 未 经 出 版 者 书 面 许 可, 不 得 以 任 何 方 式 复 制 或 抄 袭 本 书 内 容 版 权 所 有, 侵 权 必 究

2 前 言 谨 以 此 书 献 给 反 恐 精 英 的 玩 家 以 及 喜 欢 动 漫 瑞 克 和 莫 蒂 的 观 众 致 谢 我 衷 心 感 谢 Yehonatan Daniv, 因 为 他 在 Github 上 为 Velocity 的 用 户 提 供 支 持 与 帮 助 ; 感 谢 Anand Sharma, 因 为 他 的 动 效 设 计 作 品 经 常 会 给 我 带 来 启 发 ; 还 要 感 谢 David DeSandro 为 本 书 撰 写 前 言 同 时,Mat Vogels Harrison Shoff Adam Singer David Caplan 和 Murat Ayfer 审 阅 了 本 书 的 文 稿, 在 此 我 也 表 示 由 衷 的 谢 意

前 言 1 序 开 发 人 员 首 次 发 现 jquery 的.animate() 函 数 时 是 个 特 别 的 时 刻 我 记 得 自 己 一 发 现 这 个 函 数 就 尝 试 给 页 面 上 任 何 主 内 容 区 以 外 的 东 西 都 加 上 动 画 效 果 我 实 现 了 手 风 琴 效 果 (accordion) 飞 出 菜 单 (fly-out menu) 悬 停 效 果 (hover effect) 滚 动 过 渡 动 画 (scroll transition) 神 奇 显 示 (magical reveal) 和 视 差 滚 动 幻 灯 片 (parallax slider) 这 些 动 画 为 我 原 本 冷 冰 冰 静 止 不 动 的 页 面 带 来 了 动 态 的 视 觉 体 验, 使 我 感 觉 作 为 网 页 设 计 师, 自 己 又 更 上 一 层 楼 了 但 这 些 只 不 过 是 华 而 不 实 的 把 戏 罢 了 时 至 今 日, 我 意 识 到 那 时 添 加 的 那 么 多 动 画 并 没 有 真 正 提 高 网 站 的 用 户 体 验 尽 管 如 此, 我 当 时 仍 是 激 动 不 已 究 竟 是 什 么 让 动 画 如 此 激 动 人 心? 从 我 的 公 寓 向 外 望 去, 可 以 看 到 布 鲁 克 林 市 中 心 我 见 到 下 面 的 街 道 行 人 攒 动 ; 烟 缕 从 烟 囱 里 向 外 冒, 就 好 像 滚 滚 巨 浪 ; 鸽 子 振 动 双 翅, 飞 到 窗 台 上 歇 息 ; 一 台 起 重 机 高 高 吊 起 建 筑 物 的 一 部 分 ; 一 个 孤 零 零 的 心 形 气 球 升 向 布 鲁 克 林 的 天 空 ( 听 上 去 有 些 老 土, 这 我 知 道, 不 过 我 确 实 见 到 过 两 次 ); 汽 车 在 威 廉 斯 堡 大 桥 上 穿 梭 ; 头 上 云 朵 轻 轻 飘 过 世 界 在 不 停 地 运 动 这 也 是 我 们 脑 中 整 个 宇 宙 的 运 作 状 态 事 物 在 运 动 正 如 窗 外 这 些 移 动 的 事 物, 它 们 每 个 都 在 讲 述 短 短 一 句 话 的 故 事 然 而 它 们 合 在 一 起, 又 在 讲 述 着 一 个 更 大 的 正 在 发 生 的 故 事 但 是, 数 字 界 面 却 不 是 这 样 运 作 的, 它 缺 少 了 那 些 短 短 的 故 事 当 事 情 在 发 生 变 化 时, 得 自 己 添 补 缺 漏 的 情 节 比 如, 点 击 ATM 机 上 的 下 一 页 按 钮 以 后, 屏 幕 突 然 改 变 了 它 成 功 进 入 下 一 页 了 吗? 还 是 出 现 错 误 了? 你 必 须 重 新 读 屏 并 理 解 上 面 的 信 息, 才 能 了 解 自 己 的 行 为 带 来 怎 样 的 结 果 这 就 造 成 互 动 与 互 动 之 间 产 生 理 解 的 空 白 如 果 使 用 了 动 效, 就 可 以 消 除 这 种 理 解 的 空 白, 因 为 动 效 自 然 而 然 地 告 诉 了 人 们 什 么 东 西 发 生 了 变 化 这 就 好 像 在 一 种 状 态 到 另 一 种 状 态 之 间 填 补 上 许 多 小 故 事 一 样

2 序 当 滑 动 过 渡 效 果 带 你 来 到 下 一 屏 时, 动 画 帮 助 你 更 好 地 理 解 了 刚 刚 发 生 的 事 情 正 是 这 种 力 量 使 动 画 格 外 令 人 兴 奋 就 像 布 局 色 彩 和 字 体 一 样, 动 画 帮 助 你 塑 造 和 引 导 用 户 的 体 验 它 不 仅 仅 是 让 东 西 运 动 起 来, 更 需 要 有 效 的 设 计 和 精 心 的 实 现 不 幸 的 是, 在 网 页 动 画 的 历 史 当 中, 人 们 并 不 总 是 认 为 深 思 熟 虑 是 至 关 重 要 的 作 为 开 发 人 员, 我 们 用 过 各 式 各 样 的 方 法 实 现 动 画, 比 如 Flash 动 画 GIF Java 小 程 序 marquee 标 签, 直 至 最 近 的 CSS JavaScript 和 SVG 但 是, 那 些 动 画 充 其 量 只 不 过 是 页 面 上 的 锦 上 添 花 ; 在 最 坏 的 情 况 下, 它 们 甚 至 沦 为 哗 众 取 宠 的 把 戏 动 画 既 要 高 性 能 又 要 人 性 化, 这 还 是 一 种 相 对 较 新 的 理 念 因 此, 有 这 本 书 在 你 面 前 是 一 件 幸 事 Julian Shapiro 是 网 页 动 画 领 域 最 重 要 的 专 家 之 一 在 编 写 与 维 护 Velocity.js 期 间, 他 积 累 了 大 量 一 手 知 识, 包 括 在 网 站 上 使 用 动 效 的 所 有 窍 门 和 优 势 本 书 不 仅 会 带 给 你 在 网 页 上 实 现 动 画 的 技 术 诀 窍, 更 重 要 的 是, 它 蕴 含 了 对 动 画 的 深 刻 见 解, 只 有 理 解 了 这 些, 才 能 有 效 地 利 用 动 画 带 来 无 与 伦 比 的 用 户 体 验 各 种 动 画 库 和 技 术 已 经 使 动 效 设 计 变 得 空 前 容 易 但 并 不 是 每 一 位 开 发 人 员 都 遵 从 最 佳 实 践 在 过 去 的 几 年 间, 有 几 种 时 髦 的 反 模 式 风 行 一 阵 之 后 又 消 失 无 踪 滚 动 行 为 被 用 来 实 现 别 样 的 用 途 移 动 设 备 上 的 导 航 被 挤 到 菜 单 里 面, 只 有 通 过 手 势 才 能 访 问 尽 管 任 何 偶 然 知 晓.animate() 函 数 的 开 发 人 员 都 能 轻 而 易 举 地 添 加 动 画 效 果, 但 只 有 那 些 能 用 其 提 升 用 户 体 验 的 开 发 人 员 才 可 以 称 为 真 正 具 有 奉 献 精 神 的 专 业 开 发 人 员 本 书 将 助 你 成 为 其 中 一 员 David DeSandro 2015 年 2 月 于 纽 约 布 鲁 克 林 David DeSandro 是 Metafizzy 的 创 始 人, 也 是 Mansonry 和 Isotope 这 两 款 jquery 插 件 的 作 者 / 开 发 人 员

前 言 1 引 言 在 网 络 刚 起 步 时, 动 画 (animation) 主 要 是 在 开 发 新 手 实 在 没 有 其 他 办 法 时 才 会 使 用 的, 为 的 是 强 调 页 面 上 的 重 要 部 分 以 吸 引 人 们 的 注 意 即 使 他 们 想 让 动 画 突 破 限 制 而 发 挥 更 大 作 用, 也 做 不 到, 因 为 浏 览 器 ( 以 及 电 脑 ) 的 速 度 太 慢, 无 法 流 畅 地 呈 现 基 于 网 络 的 动 画 效 果 我 们 从 闪 烁 的 横 幅 广 告 滚 动 的 跑 马 灯 新 闻 和 Flash 介 绍 视 频 的 旧 时 光 一 路 走 来, 取 得 了 长 足 的 发 展 时 至 今 日,iOS 以 及 Android 中 叹 为 观 止 的 动 效 设 计 (motion design) 不 仅 没 有 降 低 用 户 体 验, 反 而 使 其 大 大 改 善 最 优 秀 的 网 站 和 应 用 的 开 发 人 员 利 用 动 画 来 提 升 用 户 界 面 的 感 觉 和 直 觉 性 动 画 在 设 计 开 发 中 的 重 要 性 明 显 提 升, 这 不 仅 仅 是 因 为 硬 件 的 处 理 能 力 提 高 了, 更 体 现 了 网 络 开 发 群 体 对 于 最 佳 实 践 有 了 更 深 的 理 解 现 如 今, 人 们 普 遍 认 为 最 终 用 户 体 验 的 质 量 比 开 发 网 站 用 什 么 工 具 更 加 重 要 当 然, 尽 管 这 是 个 看 似 明 显 的 结 论, 但 事 实 却 并 非 总 是 如 此 那 么, 究 竟 是 什 么 偏 偏 让 动 画 变 得 这 么 有 用? 不 论 是 内 容 块 之 间 的 过 渡 效 果 复 杂 加 载 次 序 的 设 计 还 是 对 用 户 下 一 步 操 作 的 提 示, 动 画 都 是 文 字 和 布 局 的 有 效 补 充, 强 化 了 网 站 的 预 期 行 为 彰 显 了 个 性 丰 富 了 视 觉 体 验 内 容 究 竟 是 要 以 友 好 的 方 式 弹 跳 出 现 呢, 还 是 要 猛 然 甩 到 屏 幕 上? 这 正 是 动 效 设 计 研 究 的 问 题 同 时, 你 的 选 择 将 会 决 定 应 用 的 总 体 感 觉 当 用 户 将 你 的 应 用 推 荐 给 他 人 的 时 候, 他 们 经 常 会 试 着 用 顺 滑 或 精 致 这 样 的 字 眼 来 形 容, 但 却 没 有 意 识 到, 他 们 描 述 的 大 多 是 界 面 上 的 动 效 设 计 作 为 外 行 人, 他 们 没 法 明 确 区 分 应 用 和 应 用 的 动 效 设 计, 而 这 正 是 优 秀 的 用 户 界 面 (UI) 设 计 师 孜 孜 以 求 的 效 果 : 用 动 画 来 加 强 页 面 所 要 达 到 的 目 标, 但 同 时 又 不 分 散 用 户 的 注 意 本 书 为 你 提 供 了 一 些 必 备 的 知 识 掌 握 了 它, 就 可 以 自 信 地 实 现 动 画 效 果, 不 仅 视 觉 上 效 果 震 撼 而 且 技 术 上 也 易 于 维 护 一 方 面 要 通 过 动 效 设 计 丰 富 页 面 体 验, 另 一 方 面 又 要 避 免 累 赘 的 花 哨 本 书 自 始 至 终 都 努 力 在 这 两 者 之 间 达 到 平 衡 为 什 么 所 有 这 一 切 都 如 此 重 要? 为 什 么 值 得 花 费 时 间 去 优 化 过 渡 和 淡 入 淡 出 效 果? 以 上 这

2 引 言 些 问 题 的 答 案 也 正 是 设 计 师 花 费 几 个 小 时 优 化 字 体 和 颜 色 的 原 因 : 只 是 因 为 使 产 品 越 来 越 完 美, 这 种 感 觉 棒 极 了 是 他 们 让 用 户 啧 啧 称 赞 口 口 相 传 : 哇, 这 简 直 太 酷 了 然 后 马 上 转 头 对 朋 友 叫 道 : 你 可 得 看 看 这 个! 注 意 如 果 不 熟 悉 基 本 的 CSS 属 性, 那 就 需 要 先 找 本 介 绍 HTML 和 CSS 的 书 看 看, 然 后 再 来 读 本 书

目 录 1 目 录 第 1 章 JavaScript 动 画 的 优 势... 1 1.1 JavaScript 动 画 与 CSS 动 画... 2 1.2 强 大 的 性 能... 3 1.3 功 能... 4 1.3.1 页 面 滚 动... 4 1.3.2 动 画 反 转... 4 1.3.3 基 于 物 理 的 动 效... 5 1.4 易 维 护 的 工 作 流... 5 1.5 小 结... 6 第 2 章 使 用 Velocity.js 实 现 动 画... 7 2.1 JavaScript 动 画 库 的 种 类... 8 2.2 安 装 jquery 和 Velocity... 8 2.3 使 用 Velocity: 基 础 知 识... 8 2.3.1 Velocity 和 jquery... 9 2.3.2 参 数... 9 2.3.3 属 性... 10 2.3.4 值... 11 2.3.5 链 式 操 作... 12 2.4 使 用 Velocity: 选 项... 13 2.4.1 duration( 持 续 时 间 )... 13 2.4.2 easing( 缓 动 )... 13 2.4.3 begin( 开 始 ) 和 complete ( 完 成 )... 15 2.4.4 loop( 循 环 )... 16 2.4.5 delay( 延 迟 )... 17 2.4.6 display( 显 示 ) 和 visibility ( 可 见 性 )... 18 2.5 使 用 Velocity: 其 他 功 能... 19 2.5.1 reverse( 反 转 ) 命 令... 20 2.5.2 scrolling( 滚 动 )... 20 2.5.3 color( 颜 色 )... 21 2.5.4 transform( 变 换 )... 22 2.6 使 用 Velocity: 不 用 jquery( 中 级 技 巧 )... 22 2.7 小 结... 24 第 3 章 动 效 设 计 理 论... 25 3.1 动 效 设 计 提 升 用 户 体 验... 26 3.2 实 用... 27 3.2.1 借 鉴 惯 例... 27 3.2.2 预 览 结 果... 27 3.2.3 无 聊 时 的 消 遣... 28 3.2.4 用 本 能 反 应... 29 3.2.5 使 人 对 互 动 充 满 欲 望... 29 3.2.6 体 现 重 要 性... 29 3.2.7 减 少 同 时 发 生 的 动 画... 29 3.2.8 减 少 动 画 种 类... 30 3.2.9 镜 像 动 画... 30 3.2.10 限 制 持 续 时 间... 30 3.2.11 限 制 动 画... 31 3.3 优 雅... 32 3.3.1 不 要 华 而 不 实... 32 3.3.2 唯 一 华 而 不 实 的 机 会... 32 3.3.3 考 虑 个 性 化... 32 3.3.4 不 要 拘 泥 于 不 透 明 度 动 画... 33

2 目 录 3.3.5 将 动 画 拆 分 为 多 步... 33 3.3.6 错 开 动 画... 33 3.3.7 从 触 发 元 素 处 产 生 动 画... 34 3.3.8 使 用 图 形... 34 3.4 小 结... 36 第 4 章 动 画 工 作 流... 37 4.1 CSS 动 画 工 作 流... 38 4.1.1 CSS 的 问 题... 38 4.1.2 什 么 时 候 用 CSS 比 较 明 智... 38 4.2 代 码 技 巧 : 将 样 式 与 逻 辑 分 离... 40 4.2.1 一 般 做 法... 40 4.2.2 优 化 做 法... 41 4.3 代 码 技 巧 : 组 织 排 序 动 画... 44 4.3.1 一 般 做 法... 45 4.3.2 优 化 做 法... 46 4.4 代 码 技 巧 : 打 包 你 的 效 果... 47 4.4.1 一 般 做 法... 47 4.4.2 优 化 做 法... 48 4.5 设 计 技 巧... 51 4.5.1 定 时 乘 数... 51 4.5.2 使 用 Velocity 动 效 设 计 器... 52 4.6 小 结... 53 第 5 章 文 本 动 画... 55 5.1 文 本 动 画 的 一 般 做 法... 56 5.2 为 使 用 Blast.js 实 现 动 画 准 备 文 本 元 素... 57 5.2.1 Blast.js 的 工 作 原 理... 58 5.2.2 安 装... 59 5.2.3 选 项 :delimiter( 分 隔 符 )... 60 5.2.4 选 项 :customclass( 自 定 义 类 )... 61 5.2.5 选 项 :generatevalueclass ( 生 成 值 类 )... 61 5.2.6 选 项 :tag( 标 签 )... 62 5.2.7 命 令 :reverse( 反 转 )... 63 5.3 让 文 本 过 渡 进 入 视 图 或 离 开 视 图... 64 5.3.1 替 换 已 有 文 本... 64 5.3.2 错 开 动 画... 65 5.3.3 过 渡 文 本 离 开 视 图... 65 5.4 过 渡 单 个 文 本 部 分... 67 5.5 华 丽 地 过 渡 文 本... 68 5.6 文 字 装 饰... 68 5.7 小 结... 70 第 6 章 SVG 入 门... 71 6.1 用 代 码 创 建 图 片... 72 6.2 SVG 标 记 的 写 法... 72 6.3 SVG 样 式 设 置... 73 6.4 对 SVG 的 支 持... 74 6.5 SVG 动 画... 74 6.5.1 传 入 属 性... 75 6.5.2 表 象 属 性... 75 6.5.3 定 位 属 性 (positional attribute) VS 变 换 (transform)... 75 6.6 应 用 实 例 :logo 动 画... 76 6.7 小 结... 78 第 7 章 动 画 性 能... 79 7.1 网 络 性 能 的 实 际 情 况... 80 7.2 技 术 : 去 除 布 局 颠 簸... 82 7.2.1 问 题... 82 7.2.2 解 决 办 法... 82 7.2.3 jquery 元 素 对 象... 83 7.2.4 强 制 给 值... 85 7.3 批 量 添 加 DOM... 86 7.3.1 问 题... 86 7.3.2 解 决 办 法... 87 7.4 技 巧 : 避 免 影 响 临 近 的 元 素... 88 7.4.1 问 题... 88 7.4.2 解 决 办 法... 89

目 录 3 7.5 技 巧 : 减 少 并 发 加 载... 90 7.5.1 问 题... 90 7.5.2 解 决 办 法... 90 7.6 技 巧 : 不 用 持 续 响 应 滚 动 (scroll) 和 调 整 大 小 (resize) 事 件... 92 7.6.1 问 题... 92 7.6.2 解 决 办 法... 92 7.7 技 巧 : 减 少 图 片 渲 染... 93 7.7.1 问 题... 93 7.7.2 解 决 办 法... 93 7.7.3 暗 中 潜 入 的 图 片... 94 7.8 在 旧 浏 览 器 上 降 级 动 画... 94 7.8.1 问 题... 94 7.8.2 解 决 办 法... 95 7.9 尽 早 找 到 你 的 性 能 门 限... 95 7.10 小 结... 98 第 8 章 动 画 演 示... 99 8.1 行 为... 100 8.2 代 码 结 构... 101 8.3 代 码 段 : 动 画 设 置... 103 8.4 代 码 段 : 圆 形 创 建... 104 8.5 代 码 段 : 容 器 动 画... 105 8.5.1 三 维 CSS 入 门... 105 8.5.2 属 性... 106 8.5.3 选 项... 107 8.6 代 码 段 : 圆 形 动 画... 107 8.6.1 值 函 数... 108 8.6.2 不 透 明 度 动 画... 109 8.6.3 平 移 动 画... 109 8.6.4 反 转 命 令... 110 8.7 小 结... 111

4 目 录

第 1 章 JavaScript 动 画 的 优 势 在 本 章 中, 我 们 将 会 对 比 CSS 动 画 和 JavaScript 动 画 的 优 劣, 同 时 介 绍 JavaScript 动 画 的 特 点 和 工 作 流 方 面 的 优 势 简 而 言 之, 我 们 提 供 所 需 的 背 景 知 识, 帮 助 你 理 解 即 将 在 本 书 中 学 到 的 JavaScript 的 任 何 知 识

2 第 1 章 JavaScript 动 画 的 优 势 1.1 JavaScript 动 画 与 CSS 动 画 在 网 页 开 发 圈 子 里 有 一 种 误 解, 那 就 是 认 为 CSS 动 画 是 网 络 中 唯 一 可 以 实 现 高 性 能 动 画 的 方 法 这 种 误 解 使 很 多 开 发 人 员 干 脆 放 弃 了 用 JavaScript 实 现 动 画, 而 这 会 迫 使 他 们 做 出 以 下 行 为 在 样 式 表 中 管 理 有 关 用 户 界 面 (UI) 互 动 的 所 有 内 容, 这 样 代 码 很 快 会 变 得 难 以 维 护 牺 牲 实 时 动 画 的 定 时 控 制, 因 为 它 只 能 通 过 JavaScript 实 现 ( 在 移 动 应 用 中 会 看 到 需 要 响 应 用 户 拖 拽 操 作 的 UI 在 为 这 些 UI 设 计 动 画 时, 必 须 使 用 定 时 控 制 ) 放 弃 基 于 物 理 的 动 效 设 计, 这 会 使 网 页 上 的 元 素 无 法 表 现 得 像 真 实 世 界 中 的 物 体 一 样 不 再 支 持 旧 浏 览 器 版 本, 而 实 际 上 旧 版 本 浏 览 器 在 世 界 范 围 内 仍 大 量 使 用 事 实 是, 基 于 JavaScript 的 动 画 与 基 于 CSS 的 动 画 一 样 快 之 所 以 人 们 错 误 地 认 为 CSS 动 画 在 性 能 上 有 显 著 优 势, 那 是 因 为 人 们 通 常 拿 它 与 jquery 的 动 画 性 能 对 比, 后 者 确 实 非 常 慢 然 而, 一 些 彻 底 绕 开 jquery 的 JavaScript 动 画 库 通 过 与 页 面 的 顺 畅 交 互 表 现 出 了 非 凡 的 性 能 注 意 Velocity.js 是 一 个 著 名 的 动 画 库, 本 书 自 始 至 终 都 在 使 用 它 这 是 个 轻 量 级 的 库, 但 是 功 能 却 异 常 丰 富 另 外, 它 与 jquery 的 动 画 语 法 类 似, 能 够 大 幅 降 低 学 习 难 度 当 然,CSS 非 常 适 合 实 现 悬 停 状 态 的 动 画 效 果 ( 例 如 : 当 鼠 标 位 于 链 接 上 方 时, 链 接 变 成 蓝 色 ), 这 也 是 通 常 情 况 下 基 本 的 网 页 所 包 含 的 动 画 CSS 过 渡 效 果 可 以 直 接 在 已 有 的 样 式 表 中 实 现, 这 样 开 发 人 员 就 可 以 避 免 使 用 冗 余 的 JavaScript 库, 使 页 面 不 再 臃 肿 另 外,CSS 动 画 不 费 吹 灰 之 力 就 可 以 呈 现 上 佳 表 现 但 是, 本 书 将 会 说 明 为 什 么 JavaScript 对 于 动 画 来 说 经 常 是 更 好 的 选 择, 简 单 的 悬 停 效 果 除 外

1.2 强 大 的 性 能 3 1 2 3 4 5 6 1.2 强 大 的 性 能 JavaScript 与 jquery 常 被 错 误 地 混 为 一 谈 JavaScript 动 画 很 快, 是 jquery 让 它 慢 了 下 来 尽 管 jquery 非 常 强 大, 但 它 并 未 被 设 计 成 高 性 能 的 动 画 引 擎 它 没 有 避 免 布 局 颠 簸 的 机 制, 这 使 浏 览 器 在 动 画 处 理 过 程 中, 过 分 忙 于 布 局 处 理 的 工 作 另 外, 由 于 jquery 的 代 码 库 除 了 实 现 动 画 以 外 还 有 许 多 其 他 目 的, 因 此 它 的 内 存 消 耗 会 在 浏 览 器 内 触 发 垃 圾 回 收, 导 致 动 画 在 不 可 预 知 的 情 况 下 卡 壳 最 后, 由 于 jquery 团 队 奉 行 一 个 崇 高 7 8

4 第 1 章 JavaScript 动 画 的 优 势 的 追 求, 那 就 是 帮 助 新 手 避 免 用 坏 代 码 毁 了 他 们 的 UI, 因 此 jquery 放 弃 了 被 经 常 推 荐 的 做 法, 拒 不 使 用 requestanimationframe() 函 数, 但 另 一 方 面 浏 览 器 竞 相 支 持 该 函 数, 因 为 它 可 以 为 网 络 动 画 大 幅 提 升 帧 率 (frame rate) 一 些 彻 底 绕 开 jquery 的 JavaScript 动 画 库 通 过 与 页 面 的 顺 畅 交 互 而 表 现 出 非 凡 的 性 能 其 中 之 一 是 著 名 的 动 画 库, 也 是 本 书 自 始 至 终 使 用 的 Velocity.js 这 是 个 轻 量 级 的 库, 但 是 功 能 却 异 常 丰 富 另 外, 它 与 jquery 的 动 画 语 法 类 似, 能 够 大 幅 降 低 学 习 曲 线 有 关 性 能 的 问 题, 我 们 会 在 第 7 章 中 深 入 探 讨 通 过 学 习 浏 览 器 渲 染 性 能 的 微 妙 差 异, 你 能 够 打 下 坚 实 的 基 础, 为 所 有 的 浏 览 器 和 设 备 创 建 可 靠 的 动 画 效 果, 不 论 这 些 浏 览 器 和 设 备 的 处 理 能 力 如 何 1.3 功 能 追 求 速 度 当 然 不 是 使 用 JavaScript 的 唯 一 理 由, 它 还 具 有 一 大 堆 其 他 同 等 重 要 的 功 能 让 我 们 大 致 看 几 个 JavaScript 所 独 有 并 值 得 关 注 的 动 画 功 能 1.3.1 页 面 滚 动 页 面 滚 动 是 基 于 JavaScript 的 动 画 最 为 流 行 的 应 用 之 一 最 近, 网 页 设 计 的 趋 势 是 创 建 很 长 的 页 面 随 着 页 面 向 下 滚 动, 让 每 一 部 分 新 的 内 容 自 动 滚 到 可 视 区 域 中 来 例 如 Velocity 这 样 的 JavaScript 动 画 库 提 供 了 一 种 将 元 素 滚 动 至 可 视 区 域 的 简 单 函 数 : $element.velocity("scroll", 1000); 以 上 代 码 通 过 使 用 Velocity 的 "scroll" 命 令 让 浏 览 器 用 1000 毫 秒 的 时 间 滚 动 至 $element 的 上 方 边 缘 位 置 注 意,Velocity 的 语 法 与 jquery 的 $.animate() 函 数 几 乎 一 模 一 样, 这 会 在 本 章 后 面 的 部 分 进 行 详 述 1.3.2 动 画 反 转 动 画 反 转 是 用 于 撤 消 元 素 前 一 个 动 画 的 简 便 方 法 通 过 调 用 反 转 命 令, 你 会 使 元 素 以 动 画 形 式 变 动 回 上 一 个 动 画 开 始 之 前 的 值 反 转 的 常 见 用 途 是 动 态 显 示 一 个 模 态 对 话 框, 然 后 在 用 户 点 击 关 闭 后 再 将 其 隐 藏 起 来

1.4 易 维 护 的 工 作 流 5 如 果 想 实 现 动 画 反 转, 但 却 没 有 优 化 工 作 流 程 的 话, 你 会 这 么 做 : 把 上 次 在 每 个 元 素 上 动 态 显 示 的 特 定 属 性 跟 踪 记 录 下 来, 以 备 后 续 反 转 动 画 之 用 但 是 在 UI 代 码 中 跟 踪 之 前 的 动 画 状 态 很 快 就 会 变 得 难 以 控 制 与 之 形 成 鲜 明 对 比 的 是 Velocity, 通 过 reverse 命 令 就 可 以 记 住 一 切 与 Velocity 中 scroll 命 令 的 语 法 相 似,reverse 命 令 也 是 通 过 将 "reverse" 作 为 Velocity 的 第 一 个 参 数 传 入 而 调 用 的 : // 第 一 个 动 画 : 设 置 元 素 的 opacity 属 性 变 动 至 0 的 动 画 $element.velocity({ opacity: 0 }); // 第 二 个 动 画 : 设 置 元 素 的 opacity 属 性 值 变 动 回 初 始 值 1 的 动 画 $element.velocity("reverse"); 当 谈 到 JavaScript 的 动 画 定 时 控 制 时, 就 不 仅 仅 是 反 转 那 么 简 单 了 :JavaScript 还 允 许 对 全 部 正 在 运 行 的 动 画 进 行 全 局 减 速 或 加 速 第 4 章 会 介 绍 这 一 强 大 功 能 的 相 关 知 识 1 2 3 1.3.3 基 于 物 理 的 动 效 动 效 设 计 中 的 物 理 原 则 反 映 了 成 就 优 秀 用 户 体 验 (UX) 的 核 心 原 则 : 那 就 是 伴 随 着 用 户 的 输 入, 界 面 出 现 自 然 的 反 应 换 言 之, 界 面 设 计 遵 从 物 体 在 真 实 世 界 中 的 运 动 规 律 在 Velocity 中 有 一 个 简 单 且 强 大 的 入 门 级 物 理 动 效, 即 基 于 弹 簧 运 动 原 理 的 缓 动 类 型 ( 我 们 会 在 下 一 章 详 细 探 讨 缓 动 的 概 念 ) 使 用 典 型 的 缓 动 选 项, 可 以 传 入 一 个 与 预 先 定 义 的 缓 动 曲 线 ( 例 如,"ease" 或 "easeinoutsine") 相 对 应 的 字 符 串 相 反, 弹 簧 物 理 缓 动 类 型 接 受 一 个 含 有 两 个 项 的 数 组 作 为 参 数 4 5 // 使 用 500 个 张 力 单 位 和 20 个 摩 擦 力 单 位 的 弹 簧 物 理 缓 动, 设 置 将 元 素 的 宽 度 变 动 至 "500px" 的 动 画 $element.velocity({ width: "500px" }, { easing: [ 500, 20 ] }); 6 缓 动 数 组 中 的 第 一 项 代 表 弹 簧 的 张 力, 而 第 二 项 代 表 摩 擦 力 张 力 值 越 大, 动 画 的 总 体 速 度 就 越 快, 总 体 反 弹 幅 度 就 越 大 摩 擦 力 值 越 低, 动 画 尾 部 振 动 的 速 度 就 越 快 通 过 调 整 这 些 数 值, 可 以 为 页 面 上 每 一 个 动 画 实 现 独 特 的 运 动 效 果, 这 有 助 于 强 化 不 同 行 为 之 间 的 差 异 7 1.4 易 维 护 的 工 作 流 设 计 动 画 是 一 个 不 断 试 验 的 过 程, 需 要 反 复 修 改 时 间 和 缓 动 值 才 能 在 页 面 上 达 到 和 谐 统 一 的 效 果 然 而 无 可 避 免 的 是, 就 当 你 已 经 将 设 计 优 化 到 最 佳 时, 客 户 跳 出 来 要 求 大 改 这 种 情 况 下, 8

6 第 1 章 JavaScript 动 画 的 优 势 代 码 是 否 易 于 维 护 就 变 得 至 关 重 要 了 基 于 JavaScript 来 解 决 这 一 工 作 流 难 题 是 非 常 优 雅 的, 这 将 会 在 第 4 章 中 详 细 阐 述 在 这 里 先 简 要 解 释 一 下 : 有 技 术 可 以 将 一 个 个 JavaScript 动 画 链 接 起 来, 而 且 每 个 动 画 都 有 各 自 不 同 的 持 续 时 间 和 缓 动 效 果 等, 这 样 其 中 一 个 动 画 的 定 时 不 会 影 响 其 他 动 画 这 就 意 味 着 不 用 重 新 计 算, 就 可 以 把 某 个 动 画 的 持 续 时 间 改 来 改 去, 还 能 轻 易 将 动 画 设 置 为 同 时 进 行 或 是 顺 次 进 行 1.5 小 结 当 使 用 CSS 设 计 动 画 时, 肯 定 要 受 限 于 CSS 规 范 所 提 供 的 那 些 功 能 但 JavaScript 是 一 门 编 程 语 言, 具 有 编 程 语 言 的 天 然 属 性, 其 第 三 方 程 序 库 可 以 对 动 效 设 计 进 行 无 限 的 逻 辑 控 制 动 画 引 擎 利 用 这 一 点 来 提 供 强 大 的 功 能, 不 仅 可 以 大 幅 优 化 工 作 流, 还 能 拓 展 交 互 动 效 设 计 的 可 能 性 而 这 正 是 本 书 的 目 的 所 在 : 用 尽 可 能 高 效 的 方 法 设 计 优 美 的 动 画 效 果 下 一 章 介 绍 怎 样 使 用 本 书 选 择 的 JavaScript 动 画 引 擎 Velocity.js 通 过 掌 握 Velocity.js, 将 会 了 解 如 何 使 用 我 们 前 面 已 经 介 绍 的 一 些 功 能 以 及 其 他 更 多 内 容

第 2 章 使 用 Velocity.js 实 现 动 画 本 章 将 介 绍 Velocity.js 所 提 供 的 功 能 命 令 和 选 项 如 果 已 经 对 基 于 jquery 的 动 画 比 较 熟 悉, 那 就 已 经 明 白 该 如 何 使 用 Velocity 了, 它 的 作 用 与 jquery 的 $.animate() 函 数 基 本 一 模 一 样 但 不 论 是 否 已 具 备 相 关 知 识, 由 于 本 章 对 Velocity 进 行 了 功 能 分 解, 你 还 将 会 了 解 到 动 画 引 擎 行 为 的 细 微 差 异 掌 握 这 些 细 节 会 帮 助 你 从 新 手 荣 升 为 专 家 即 使 对 JavaScript 动 画 和 Velocity 都 已 经 非 常 熟 悉, 那 也 浏 览 一 下 本 章 内 容, 就 当 帮 自 己 一 个 小 忙 你 肯 定 会 有 一 些 意 想 不 到 的 收 获

8 第 2 章 使 用 Velocity.js 实 现 动 画 2.1 JavaScript 动 画 库 的 种 类 JavaScript 动 画 库 有 很 多 种 类 有 一 些 是 在 浏 览 器 中 再 现 物 理 交 互, 有 一 些 使 WebGL 和 Canvas 动 画 更 易 于 维 护, 有 一 些 专 注 于 SVG 动 画, 还 有 一 些 旨 在 提 升 UI 动 画, 本 书 的 重 点 正 是 这 最 后 一 种 有 两 个 流 行 的 UI 动 画 库, 它 们 是 GSAP( 请 到 GreenSock.com 下 载 ) 和 Velocity( 请 到 VelocityJS. org 下 载 ) 在 使 用 本 书 期 间, 可 以 免 费 使 用 Velocity, 因 为 它 采 用 的 是 MIT 许 可 证 (GSAP 要 根 据 网 站 的 商 业 形 式 收 取 许 可 费 用 ) 此 外, 令 Velocity 引 以 为 傲 的 是 : 利 用 它 惊 人 强 大 的 功 能 可 以 写 出 干 净 并 出 色 的 代 码 很 多 流 行 网 站 都 采 用 了 这 个 引 擎, 例 如 Tumblr Gap 和 Scribd 噢 对 了,Velocity 就 是 本 书 作 者 编 写 的! 2.2 安 装 jquery 和 Velocity 可 以 在 jquery.com 下 载 jquery, 在 VelocityJS.org 下 载 Velocity 若 要 像 使 用 其 他 任 何 JavaScript 库 那 样 在 页 面 上 使 用 它 们, 只 需 要 在 </body> 标 签 前 面 添 加 指 向 对 应 库 的 <script></script> 标 签 如 果 想 链 接 至 在 线 版 本 ( 而 不 是 位 于 自 己 电 脑 上 的 本 地 副 本 ), 那 么 代 码 可 能 会 像 下 面 这 样 <html> <head>my Page</head> <body> My content. <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"> </script> </body> </html> 当 同 时 使 用 jquery 和 Velocity 时, 将 添 加 jquery 的 标 签 放 到 Velocity 的 前 面 就 是 这 样! 现 在 可 以 开 始 学 习 使 用 Velocity.js 实 现 动 画 了 2.3 使 用 Velocity: 基 础 知 识 为 了 能 让 你 入 门, 我 们 先 从 基 本 组 成 开 始 讲 起 : 参 数 属 性 值 和 链 式 操 作 既 然 jquery 是 这 样 无 处 不 在, 来 看 一 下 Velocity 与 它 的 关 系 也 挺 重 要