新書推薦:
《
安全感是内心长出的盔甲
》
售價:NT$
305.0
《
快人一步:系统性能提高之道
》
售價:NT$
505.0
《
我们为什么会做梦:让梦不再神秘的新科学
》
售價:NT$
352.0
《
算法图解(第2版)
》
售價:NT$
356.0
《
科学的奇幻之旅
》
售價:NT$
352.0
《
画艺循谱:晚明的画谱与消闲
》
售價:NT$
653.0
《
新民说·现实政治史:从马基雅维利到基辛格
》
售價:NT$
454.0
《
宽容是件奢侈品(人生360度·一分钟经典故事)
》
售價:NT$
203.0
|
編輯推薦: |
网络时代,用户体验的重要性毋庸置疑,动画在这一过程中的重要性也明显提升。如何在不分散用户注意的情况下达到动画设计加强页面目的的效果,已经成为优秀的用户界面设计师和Web开发人员孜孜以求的目标。本书将为此提供必备的知识。
书中内容共分为8章,以作者开发的动画库Velocity.js为工具,简明扼要地探讨了JavaScript动画的特点和工作流方面的优势,涵盖开发者们*关心的文本动画、SVG、动画性能等问题。掌握书中内容,即可自信实现视觉上效果震撼、技术上易于维护的动画效果。
|
內容簡介: |
本书由业界先进的动画库Velocity.js 的作者所著,书中内容共分为8 章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验。具体内容包括:JavaScript 动画优势,Velocity.js 的利用,动画工作流,文本动画,SVG,动画性能。
本书适合所有Web 开发工程师和动画设计师晋阶学习。
|
關於作者: |
Julian Shapiro
最先进的动画库Velocity.js作者,资深JavaScript开发人员,曾获Stripe开源奖金。
|
目錄:
|
第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和Velocity8
2.3 使用Velocity:基础知识8
2.3.1 Velocity和jQuery9
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 批量添加DOM86
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
|
|