当前位置:首页 > 图书资源 > 真钱棋牌娱乐平台appSVG动画 用复杂交互动画改善用户体验

真钱棋牌娱乐平台appSVG动画 用复杂交互动画改善用户体验


更新时间:2018-10-11 21:28:53

这款【真钱棋牌娱乐平台appSVG动画 用复杂交互动画改善用户体验】资源经过9盘网盘审核之后发布,推荐您使用百度云或者迅雷下载。如果迅雷无法自动调用下载,请使用(右键该地址-复制链接-新建下载)的方式下载。发布时间:2018-10-11 21:28:53

资源简介

在制作Web动画效果时,使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了 SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除些之外,本书也探讨了SVG还能做的一些十分有趣的事情,比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍,可帮助读者更系统地掌握SVG和 SVG制作动画相关的技术知识。如果你想掌握这项技术,那么本书是值得你花时间去阅读和研究的一本书。

 

内容简介

在制作Web动画效果时,使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了 SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除些之外,本书也探讨了SVG还能做的一些十分有趣的事情,比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍,可帮助读者更系统地掌握SVG和 SVG制作动画相关的技术知识。如果你想掌握这项技术,那么本书是值得你花时间去阅读和研究的一本书。

作者简介

Sarah Drasner是一获奖的布道者、顾问和技术人员。Sarah也是Web动画工作室的联合创始人,拥有Val Head。她被授予高级SVG动画前端之师之称,并曾担任Truli(Zillow)的UX设计师和经理。Sarah赢得一系列奖项。作为一名Web开发人员和设计师,她已经有了15年之久的工作经验,她还曾担任过插画师和大学教授,并在Santorini教过一个Byzantine的图标画师。

 

译者简介

大漠

W3CPlus创始人,目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3和动画的研究,是国内早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习JavaScript、React和Vue相关技术知识。CSS3、CSS处理器和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

姜天意

昵称99,阿里巴巴盒马鲜生前端开发专家,目前主要负责盒马数据可视化相关产品的研发。

田淮仁

腾讯前端开发,PWA 和 httplive 开源项目作者。热爱分享,有自己的博客:villainhr.com 和微信公众号:前端小吉米。对 H5 音视频技术,直播和 P2P 有一定的技术积累。

欧阳湘粤

大四准毕业码农,曾在百度和腾讯实习,对新技术有着强烈的热爱,喜欢折腾新事物,希望未来能够继续学到更多有意思的东西,Long May The Sunshine。

小春

摩拜前端负责人,前滴滴公共前端负责人。担任过 GIAC 全球互联网架构大会 - 前端出品人;写过 3 本前端书籍,近一本:国内第1本 Vue.js 书籍《Vue.js指南》;乐于分享和学习交流,参加过 vueconf、SDCC 2016 中国软件开发者大会等。

 

精彩书评

很少有人像 Sarah那样热衷于 Web动画,她的新书就是一个宝库。如果你想在 Web上使用 SVG动画,那么必须阅读这本书。

——Jack Doyle,GreenSock

 

Sarah Drasner写的动画总是令人愉悦,流畅而优雅。她不仅是一位优秀的动画设计师,她还解释了为什么以及如何使用这些工具来创造你想要的动画。她通过简单明了的方式指导读者理解重要的概念,并为读者推荐能用于跨浏览器制作动效的库。即使你对 SVG和动画原理有所了解,也不会后悔拥有这本书,因为书中的内容能让你变得更强大。

——Chris Lilley,SVG之父

 

SVG动画对于任何使用 SVG的人来说都是必须掌握的。Sarah Drasner把她所知道的动画知识点整合在一起,向读者展示了如何在动画中做出好的选择,以及如何用专业的技术来完成动画。

——Val Head,设计界知名动画设计师

 

Sarah Drasner既是一位令人难以置信的艺术家,也是一位务实、注重细节的 Web开发者。 SVG动画为 Web上的矢量动画提供了实用的解决方案,并且通过一系列的工具帮助你不让技术限制你的创造力。

——Amelia Bellamy-Royds,SVG Colors, Patterns & Gradient、 SVG Essentials (第二版 )、SVG Text Layout和 Using SVG with CSS3 and HTML5的作者

目录

目录
序 xiv
前言xvi

第 1章 剖析 SVG 1 
SVG DOM语法 2 
viewBox 和 preserveAspectRatio 2
绘制图形 5
响应式 SVG、组和绘制路径 6 
SVG 的导出、建议及优化 9
减少路径点 11
优化工具 12

第 2章 使用 CSS制作 SVG动画14
用 SVG做动画 16
使用 SVG绘图的优势 18
顺畅的动画体验 20

第 3章 CSS动画和手绘 SVGSprite 21
使用 steps()和 SVG Sprite制作关键帧动画 21
在 Illustrator中使用模板绘制 24
在 SVG编辑器或图纸中逐帧绘制并且使用 Gruntiocon生成 Sprite 26
用简易代码模拟复杂运动 26
简单重复行走 27

第 4章 创建响应式SVGSprite 32
用于响应式的 SVG Sprite图和 CSS 33
分组和导出 35 
viewBox的技巧 36
响应式动画 37

第 5章 不使用任何额外库来创建 UI/UX动画 39
用户体验模式中的上下文切换 39
变形 41
展现 41
隔离 42
样式 43
预期提示 45
交互 46
节约空间 47
总结 48
变换的图标 48

第 6章 动态数据可视化 55
为什么要在数据可视化中使用动画 56
使用 CSS动画的 D3示例 56
使用 CSS动画的 Chartist示例 59
用 D3 来做动画 61
链式和重复 64

第 7章 Web动画技术大比拼 65
原生动画 65 
CSS/Sass/SCSS 65 
requestAnimationFrame() 67 
canvas 67 
Web 动画 API 68
第三方框架 68 
GreenSock(GSAP) 68 
mojs 69 
Bodymovin’ 70
不推荐使用 70
SMIL 70 
Velocityjs 70 
Snapsvg 71
基于 React的动画工作流 71 
React-Motion 72
在 React中使用 GSAP 73
在 React中使用 canvas 73
在 React中使用 CSS 73
总结 74

第 8章 用 GreenSock做动画 75 
GreenSock的基本语法 76 
TweenMax/TweenLite 76 
to/from/fromTo 76 
Staggering 77 
element 79 
Duration 79 
delay 79
动画的属性 79 
easing 81

第 9章 GreenSock中的时间轴 83
一个简单的时间轴 83
相对标签 85
主时间轴和所嵌套的场景 89
代码的逻辑组织 90
循环 92
暂停和暂停事件 94
其他关于时间轴的方法 95

第 10章 MorphSVG和路径动画 98 
MorphSVG 98 
findShapeIndex() 99
路径动画 101
 

第 11章 交错效果、TweeningHSL和 SplitText的文本动画106
交错的动画 106 
HSL颜色渐变动画 110
文字切分 114

第 12章 DrawSVG和 Draggable 117 
Draggable 117 
drag类型 119 
hitTest() 119
用 Draggable来控制时间轴 120 
DrawSVG 122

第 13章 mojs 125 
mojs基础介绍 125
图形 125
图形的运动 128
链式调用 130
旋涡动画 131
爆炸式的效果 133
时间轴控制工具 134
补间动画 135
路径函数 136 
mojs提供的辅助工具 137

第 14章 React-Motion140 
<Motion /> 141 
<StaggeredMotion /> 146

第 15章 动“不可动者”:通过改变属性使用原生 JavaScript实现动画150 
requestAnimationFrame() 150 
GreenSock的 AttrPlugin 155
实际应用: viewBox动画 158
另一个演示 :一个有引导作用的信息图 164

第 16章 响应式动画165
快速响应的技巧 165
GreenSock和响应式 SVG 165
不使用 GreenSock实现响应式 SVG 169
通过更新 viewBox实现响应式 170
具有多个 SVG和媒体查询的响应式 173
花更少的精力在移动端 176
有一个计划 176

第 17章 组件库的设计、原型化和动画原理177
动画设计方面 177
学会勾勒实际运动中的细节 178
合理控制动画的使用 179
拥有特色的设计主见 180
提升开发水平 181
设计原型 182
逐步分割动画细节 182
工具 184
杀死汝爱 186
设计和编码的工作流程 187
制作动画组件库 187
权衡动画开发的优先级 190
时间就是金钱 191
其他方面的限制 193

索引194

 

下载地址列表

下载地址1

发表评论 共有0条评论