具体描述
本书由业界最先进的动画库Velocity.js 的作者所著,书中内容共分为8 章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验。具体内容包括:JavaScript 动画优势,Velocity.js 的利用,动画工作流,文本动画,SVG,动画性能。
作者简介
Julian Shapiro
最先进的动画库Velocity.js作者,资深JavaScript开发人员,曾获Stripe开源奖金。
目录信息
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
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
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
· · · · · · (收起)
读后感
感觉被骗了,全篇只有第七章讲web动画性能还有点用,其他章节都是在介绍velocity实现动画的。 勉强打个三星,其中一星还是看在作者是 velocity 的作者的面子上。 这里是我的读书笔记
感觉被骗了,全篇只有第七章讲web动画性能还有点用,其他章节都是在介绍velocity实现动画的。 勉强打个三星,其中一星还是看在作者是 velocity 的作者的面子上。 这里是我的读书笔记
感觉被骗了,全篇只有第七章讲web动画性能还有点用,其他章节都是在介绍velocity实现动画的。 勉强打个三星,其中一星还是看在作者是 velocity 的作者的面子上。 这里是我的读书笔记
感觉被骗了,全篇只有第七章讲web动画性能还有点用,其他章节都是在介绍velocity实现动画的。 勉强打个三星,其中一星还是看在作者是 velocity 的作者的面子上。 这里是我的读书笔记
感觉被骗了,全篇只有第七章讲web动画性能还有点用,其他章节都是在介绍velocity实现动画的。 勉强打个三星,其中一星还是看在作者是 velocity 的作者的面子上。 这里是我的读书笔记
用户评价
初次翻开这本《JavaScript网页动画设计》,我原本期待着能看到一些深入浅出的讲解,也许是关于如何利用原生JavaScript实现流畅的、高性能的动画效果。然而,这本书似乎将重点放在了对某些特定框架或库的介绍上,比如一些现代前端开发中流行的UI组件库的动画模块是如何构建和调用的。它花了大篇幅去剖析了某个特定工具链下的最佳实践,比如如何配置构建流程以优化动画资源的加载速度,以及如何使用声明式API来描述复杂的状态过渡。这种侧重于“工具使用”而非“底层原理”的叙事方式,对于像我这样试图理解动画背后的数学和浏览器渲染机制的读者来说,显得有些遗憾。书中对CSS3动画的提及非常简略,仿佛只是一个引子,真正深入的篇幅都给了那些基于JavaScript的解决方案。例如,在处理用户输入时,如何通过RAF(RequestAnimationFrame)来保证动画的帧率,这部分内容讲得有些抽象,缺乏实际的代码示例来展示如何在不同场景下进行性能调优。总体而言,这本书更像是一本面向快速项目落地的指南,而非一本深入剖析动画本质的教程。
我花了大量时间试图理解书中关于“时间线管理”的部分,期望能找到关于如何精确控制动画播放进度的详细说明,尤其是处理动画中断、恢复以及与其他动画同步的复杂场景。然而,书中的这部分内容主要集中在如何配置一个预设的播放器对象,而不是讲解如何构建一个健壮的状态机来管理这些时间维度上的复杂交互。例如,当用户快速拖拽一个元素时,动画应该如何平滑地过渡到新的位置,而不是生硬地跳跃,书中给出的解决方案依赖于一个高度定制化的状态管理库,这使得这个解决方案的通用性大打折扣。我更希望看到的是关于如何利用浏览器提供的原生API(如Performance API)来校准时间戳,并确保动画在高负载下依然能保持视觉上的连贯性。这本书似乎假设读者已经熟悉了特定的工程化环境,并愿意接受其提供的“一站式”解决方案,这对于那些希望深入底层、理解渲染管线的读者来说,无疑是一个障碍。
读完关于“过渡与变形”的章节后,我感到意犹未尽,但不是因为内容太精彩,而是因为其深度远远不够。书中用相对轻松的笔调介绍了`transform`属性的使用,以及如何通过`transition`快速实现简单的状态切换。但当我们谈论“网页动画设计”时,往往涉及到更精细的控制,比如非线性的缓动函数,或者如何在三维空间中进行复杂的透视投影和光照模拟。这本书对这些高级概念几乎避而不谈,仿佛这些超出了“网页设计”的范畴。它更像是一本面向市场营销人员的快速上手指南,教你如何用最快的速度做出一个“看起来不错”的着陆页动画。如果有人想用JavaScript去实现一个类似游戏引擎的动画系统,这本书提供的知识点完全无法支撑其需求。它在“设计”上的理解似乎停留在视觉呈现层面,而忽略了动画作为一种用户体验交互载体的复杂性。
这本书的结构安排让我感到有些困惑。我本以为它会像一本经典的计算机图形学入门读物那样,从时间函数、插值算法开始讲起,逐步过渡到复杂的物理模拟,但事实并非如此。它更像是一本“精选集”,收录了各种不甚连贯的动画技巧片段。其中有几章专门讨论了如何使用第三方库实现视差滚动效果,这些效果虽然炫酷,但其背后的实现逻辑被封装得过于严密,读者几乎看不到“我是怎么做到这一点的”。例如,在讲解粒子系统时,作者直接跳到了一个高度封装的类,然后展示了如何调用其方法来渲染几千个元素,却鲜有关于如何用Canvas或WebGL来手工绘制这些粒子的具体步骤。这使得初学者很难将这些片段知识点串联起来形成一个完整的知识体系。对于那些寻求打下坚实基础的人来说,这本书提供的知识点密度过低,而且重点偏移,更偏向于展示“能做什么”,而非“为什么能这么做”。
这本书的篇幅中,有一个显著的特点是它对“组件化”动画的强调达到了令人咋舌的程度。大量的示例代码都是围绕着如何将动画逻辑封装进特定的组件实例中,并通过属性(Props)来驱动其行为。这当然是现代前端开发的趋势,但作为一本旨在教授“动画设计”的书籍,它却忽略了动画背后的核心——运动规律本身。我更关注的是,如何设计一套优雅的、可复用的运动曲线,而不是如何将这条曲线注入到一个特定的框架组件中。书中展示的动画大多是简单的淡入淡出或平移,缺乏对复杂交互反馈的建模。例如,在处理拖拽排序时,元素的交错移动和位置重排需要一套精密的算法来处理,这本书中关于此类的描述非常模糊,最终的解决方案依赖于一个复杂的、黑盒式的动画控制器。这使得读者在试图脱离书中提供的特定项目结构时,会发现自己缺乏独立构建复杂动画逻辑的能力。
Velocity.js 动画库入门
(2016.8)
Velocity.js的使用说明书
Velocity手册简单入门。。。。理论东西说得多。总结起来就是:写得多才知道怎么回事。如果你做过不少HTML5推广页面多话,顺便也掉到一些坑里面的话,这本书你花不到半小时就能知道大概要说啥了。 或许,这本更适合新人。
不知所云