JavaScript网页动画设计

JavaScript网页动画设计
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者: [美] (Julian Shapiro) ,
2016-01
版次: 1
ISBN: 9787115410122
定价: 39.00
装帧: 平装
开本: 16开
纸张: 胶版纸
页数: 111页
正文语种: 简体中文
  •   本书由业界先进的动画库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 和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
  • 内容简介:
      本书由业界先进的动画库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 和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
查看详情
您可能感兴趣 / 更多
系列丛书 / 更多
相关图书 / 更多