万本电子书0元读

万本电子书0元读

顶部广告

SVG动画电子书

在互联网上,没有什么能像运动中的物体那样引起人们的注意。使用SVG动画,你可以讲述故事、创建引人注目的可视化数据,并使用户交互感觉更加自然。本书通过讲解SVG 动画的基本实践,向网页设计师和发人员展示了如何使用多种技术、动画库,以及JavaScript插件来创建漂亮和独特的效果。作者Sarah Drasner解释了SVG DOM如何帮助大家使图形变得更具可访问性,并演示了优化SVG性能的方法如何使得图形更简洁,以及避免网站陷麻烦。你还将从本书中学习到如何使用SVG实现跨浏览器和向后兼容、优化及响应式相关的知识。■ 深剖析SVG动画■ 使用SVG和CSS创建独立的UI/UX动画■ 比较多种Web动画技术,包括一些JavaScript库■ 使用D3和图表库创建带有动画的数据可视化图表■ 使用GreenSock创建高性能的HTML5动画■ 探索一些库和插件,比如mo.js、MorphSVG和React-Motion。

售       价:¥

纸质售价:¥54.50购买纸书

240人正在读 | 1人评论 6.2

作       者:Chris Coyier,大漠(译)

出  版  社:电子工业出版社

出版时间:2018-05-01

字       数:10.5万

所属分类: 科技 > 计算机/网络 > 多媒体/数据通信

温馨提示:此类商品不支持退换货,不支持下载打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(0条)
  • 读书简介
  • 目录
  • 累计评论(0条)
在制作Web动画效果时,使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了 SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除些之外,本书也探讨了SVG还能做的一些十分有趣的事情,比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍,可帮助读者更系统地掌握SVG和 SVG制作动画相关的技术知识。如果你想掌握这项技术,那么本书是值得你花时间去阅读和研究的一本书。 在制作Web动画效果时,使用SVG制作动画是我们应该掌握的技能之一。本书详细介绍了 SVG的基础知识、如何使用SVG制作动画、制作SVG动画的工具及相关的JavaScript库。除些之外,本书也探讨了SVG还能做的一些十分有趣的事情,比如数据可视化、可伸缩的矢量图、响应式设计等。Sarah为广大读者提供了一本非常优秀的书籍,可帮助读者更系统地掌握SVG和 SVG制作动画相关的技术知识。如果你想掌握这项技术,那么本书是值得你花时间去阅读和研究的一本书。
【推荐语】
在互联网上,没有什么能像运动中的物体那样引起人们的注意。使用SVG动画,你可以讲述故事、创建引人注目的可视化数据,并使用户交互感觉更加自然。本书通过讲解SVG 动画的基本实践,向网页设计师和发人员展示了如何使用多种技术、动画库,以及JavaScript插件来创建漂亮和独特的效果。作者Sarah Drasner解释了SVG DOM如何帮助大家使图形变得更具可访问性,并演示了优化SVG性能的方法如何使得图形更简洁,以及避免网站陷麻烦。 你还将从本书中学习到如何使用SVG实现跨浏览器和向后兼容、优化及响应式相关的知识。 ■ 深剖析SVG动画 ■ 使用SVG和CSS创建独立的UI/UX动画 ■ 比较多种Web动画技术,包括一些JavaScript库 ■ 使用D3和图表库创建带有动画的数据可视化图表 ■ 使用GreenSock创建高性能的HTML5动画 ■ 探索一些库和插件,比如mo.js、MorphSVG和React-Motion。
【作者】
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 中国软件发者大会等。
目录展开

内容简介

O’Reilly Media, Inc.介绍

本书赢得的赞誉

译者序

前言

第1章 剖析SVG

SVG DOM语法

viewBox 和 preserveAspectRatio

绘制图形

响应式SVG、组和绘制路径

SVG 的导出、建议及优化

减少路径点

优化工具

第2章 使用CSS制作SVG动画

用SVG做动画

使用SVG绘图的优势

顺畅的动画体验

第3章 CSS 动画和手绘SVG Sprite

使用steps()和SVG Sprite制作关键帧动画

在Illustrator中使用模板绘制

在SVG编辑器或图纸中逐帧绘制并且使用Gruntiocon生成Sprite

用简易代码模拟复杂运动

简单重复行走

第4章 创建响应式 SVG Sprite

用于响应式的SVG Sprite图和CSS

分组和导出

viewBox的技巧

响应式动画

第5章 不使用任何额外库来创建UI/UX动画

用户体验模式中的上下文切换

变形

展现

隔离

样式

预期提示

交互

节约空间

总结

变换的图标

第6章 动态数据可视化

为什么要在数据可视化中使用动画

使用CSS动画的D3示例

使用CSS动画的Chartist示例

用 D3 来做动画

链式和重复

第7章 Web动画技术大比拼

原生动画

CSS/Sass/SCSS

requestAnimationFrame()

canvas

Web 动画 API

第三方框架

GreenSock(GSAP)

mo.js

Bodymovin’

不推荐使用

SMIL

Velocity.js

Snap.svg

基于React的动画工作流

React-Motion

在React中使用GSAP

在React中使用canvas

在React中使用CSS

总结

第8章 用GreenSock做动画

GreenSock的基本语法

TweenMax/TweenLite

.to/.from/.fromTo

Staggering

element

Duration

delay

动画的属性

easing

第9章 GreenSock中的时间轴

一个简单的时间轴

相对标签

主时间轴和所嵌套的场景

代码的逻辑组织

循环

暂停和暂停事件

其他关于时间轴的方法

第10章 MorphSVG 和路径动画

MorphSVG

findShapeIndex()

路径动画

第11章 交错效果、Tweening HSL和SplitText的文本动画

交错的动画

HSL颜色渐变动画

文字切分

第12章 DrawSVG和Draggable

Draggable

drag类型

hitTest()

用Draggable来控制时间轴

DrawSVG

第13章 mo.js

mo.js基础介绍

图形

图形的运动

链式调用

旋涡动画

爆炸式的效果

时间轴控制工具

补间动画

路径函数

mo.js提供的辅助工具

第14章 React-Motion

<Motion />

<StaggeredMotion />

第15章 动“不可动者”:通过改变属性使用原生JavaScript实现动画

requestAnimationFrame()

GreenSock的AttrPlugin

实际应用:viewBox动画

另一个演示:一个有引导作用的信息图

第16章 响应式动画

快速响应的技巧

GreenSock和响应式SVG

不使用GreenSock实现响应式SVG

通过更新viewBox实现响应式

具有多个SVG和媒体查询的响应式

花更少的精力在移动端

有一个计划

第17章 组件库的设计、原型化和动画原理

动画设计方面

学会勾勒实际运动中的细节

合理控制动画的使用

拥有特色的设计主见

提升开发水平

设计原型

逐步分割动画细节

工具

杀死汝爱

设计和编码的工作流程

制作动画组件库

权衡动画开发的优先级

时间就是金钱

其他方面的限制

索引

累计评论(0条) 0个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部