实现复杂线条动画

SVG 落成复杂线条动画

2016/12/29 · HTML5 ·
SVG,
动画

本文小编: 伯乐在线 –
chokcoco
。未经笔者许可,禁止转发!
欢迎出席伯乐在线 专栏撰稿人。

在上一篇文章中,大家开端达成了部分使用为主图形就能成功的线条动画:《Web动画:SVG
线条动画入门》

澳门新葡亰,当然,事物都以朝着熵增焓减的来头发展的,复杂线条也迟早比有序线条要多。

重重时候,我们不能够人工去画出一部分13分复杂动画的线条,这一个时候,就要借助前端好帮手PS 和 AI,而本文就是介绍怎么着导出复杂的 SVG 路径。:

澳门新葡亰 1

好了,假定大家未来要制作下图 GIF 那样的3个 loading 图:

澳门新葡亰 2

地点那些 SVG
线条动画的路径 path ,假设靠本人手工3个点多个点一定调节和测试画出来的话,嘿嘿嘿你去试试。

澳门新葡亰 3

实现复杂线条动画。在上一篇文章中,大家早先完毕了一些利用核心图形就能一气浑成的线条动画:

在上一篇作品中,大家初步实现了一些选拔大旨图形就能不负众望的线条动画:

【Web动画】SVG 完成复杂线条动画,web动画svg线条

在上一篇小说中,大家初步实现了某些行使中央图形就能做到的线条动画:

【Web动画】SVG 线条动画入门

自然,事物都以通向熵增焓减的动向前进的,复杂线条也必定比有序线条要多。

洋洋时候,大家鞭长莫及人工去画出一些11分复杂动画的线条,这么些时候,就要借助前端好入手PS 和 AI,而本文就是介绍怎么着导出复杂的 SVG 路径。:

澳门新葡亰 4

好了,假定我们今后要成立下图 GIF 这样的3个 loading 图:

澳门新葡亰 5

上边那一个 SVG
线条动画的路径 path ,即便靠自个儿手工业二个点1个点铁定调节和测试画出来的话,嘿嘿嘿你去摸索。

澳门新葡亰 6

 

利用 PS 导出路径

揣摸靠手工业能画出来,也没了大半条命。好,轮到工具上场,看看我们的原图在
PS 下长什么样子(协助透明通道的 PNG、GIF 为佳):

澳门新葡亰 7

好,选中选框工具,按下 CTENCOREL 选中图层, 再选取成立办事路径:

澳门新葡亰 8

那一个时候会弹出叁个设定容差大小的选拔,能够用不相同尺寸的容差多试两回,直到获得二个和雅观中的门路。

澳门新葡亰 9

容差是哪些?能够知晓为一种精确度,在增选颜色时所设置的挑选范围,容差越大,选择的限量也越大,其数值是在0-255中间。

好,那些时候,路径算是白手起家完结了,能够把图层的光滑度设置为 0
,就能清晰的看来路径长啥样:

澳门新葡亰 10

港真,长得挺帅的。澳门新葡亰 11

好,到了 PS 中的最终一步,点击文件选项,导出路径到 illustrator
,看图,照着操作就好:

澳门新葡亰 12

【Web动画】SVG
线条动画入门

【Web动画】SVG
线条动画入门

选用 PS 导出路径

估价靠手工业能画出来,也没了大半条命。好,轮到工具上场,看看大家的原图在
PS 下长什么样子(补助透明通道的 PNG、GIF 为佳):

澳门新葡亰 13

好,选中选框工具,按下 CT翼虎L 选中图层, 再选用创制办事路线:

澳门新葡亰 14

这几个时候会弹出二个设定容差大小的挑三拣四,能够用不一样尺寸的容差多试几回,直到获得贰个祥和看中的门路。

澳门新葡亰 15

容差是什么?可以理解为一种精确度,在选取颜色时所设置的选取范围,容差越大,选取的范围也越大,其数值是在0-255之间。

好,那一个时候,路径算是白手起家达成了,能够把图层的反射率设置为 0
,就能清晰的来看路径长啥样:

澳门新葡亰 16

港真,长得挺帅的。澳门新葡亰 17

好,到了 PS 中的最终一步,点击文件选项,导出路径到 illustrator
,看图,照着操作就好:

澳门新葡亰 18

在 illustrator 中生成 SVG 文件

开辟 AI ,打开刚刚用 PS 导出的 *.ai 文件。

不曾 AI ?身为前端居然连 AI 也没装( ̄△ ̄;) 额,其实笔者也是因为 SVG
才上手的,赶紧下三个吧,作者的版本是 Adobe illustrator CC 二〇一五。

恐怕你看来的是一片空白,别慌,使用采取工具选2个矩形,就能当选路径啦。

澳门新葡亰 19

只要你是 PS 钢笔工具小棋手,还足以一而再对路线实行修改,直到自个儿满意截止。

OK,接下去就是调整画布大小,最棒是途径左上角和画布左上角对齐,然后选中存款和储蓄为
SVG 文件。

澳门新葡亰 20

好,其实 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS
生成 *.svg 文件呢?因为自个儿用的版本 PS 还没补助直接存款和储蓄为 SVG
格式。然后实际也能够直接在 AI
上制图路径,这几个就看设计师也许您对哪些工具更熟练了。

当然,事物都以通往熵增焓减的自由化发展的,复杂线条也必将比有序线条要多。

自然,事物都以通往熵增焓减的动向前进的,复杂线条也迟早比有序线条要多。

 

获取 SVG 的 path 路径

OK,最后把刚刚保存的 *.svg 路径的公文用浏览器打开,一片空白是不奇怪的,右键查看网页源代码:

澳门新葡亰 21

劳苦功高告成,这中间, 路径就是我们要求的途径了!

澳门新葡亰 22

好,把大家要的 “ 整个拿出来,运用上一篇小说的线条动画知识,给它赋予简单的动画效果就好:

See the Pen GNbwYV by Chokcoco
(@Chokcoco) on
CodePen.

无数时候,大家不可能人工去画出一些十三分复杂动画的线条,那个时候,就要借助前端好帮手PS 和 AI,而本文就是介绍怎么着导出复杂的 SVG 路径。:

过多时候,我们鞭长莫及人工去画出一些10分复杂动画的线条,那几个时候,就要借助前端好帮手PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径。:

在 illustrator 中生成 SVG 文件

打开 AI ,打开刚刚用 PS 导出的 *.ai 文件。

没有 AI ?身为前端居然连 AI 也没装( ̄△ ̄;) 额,其实我也是因为 SVG 才上手的,赶紧下一个吧,我的版本是 Adobe illustrator CC 2014。

或然您看看的是一片空白,别慌,使用选取工具选二个矩形,就能入选路径啦。

澳门新葡亰 23

假使你是 PS 钢笔工具小能人,仍是能够三番陆回对路线举办改动,直到本人正中下怀停止。

OK,接下去正是调整画布大小,最棒是路径左上角和画布左上角对齐,然后选中存款和储蓄为
SVG 文件。

澳门新葡亰 24

好,其实 AI 也没做哪些,路径是使用 PS 生成的,为啥不直接用 PS
生成 *.svg 文件呢?因为自己用的版本 PS 还没辅助直接存款和储蓄为 SVG
格式。然后实际也可以一向在 AI
上制图路径,那一个就看设计师恐怕你对哪些工具更熟识了。

使用 javascript 计算 path 路径长度

再有贰个题材,线条动画需求精通一切 path 路径的尺寸,简单的线条大家还足以采纳加减法算出成套图形的长短。那么复杂路径的长度怎么总括?

选拔一段简单的 js 能够实现:

<svg> <path d=”…”/> </svg>

1
2
3
<svg>
  <path d="…"/>
</svg>

var obj = document.querySelector(“path”); var length =
obj.getTotalLength(); console.log(length); // 377.0433

1
2
3
4
var obj = document.querySelector("path");
var length = obj.getTotalLength();
 
console.log(length); // 377.0433

好了,有了复杂图形的门道,大家就足以塑造出比比皆是酷炫 SVG
动画成效了。撒花。能够多上 codePen 上查找 SVG,学习下大神们的一些 SVG
动画。

好不不难标准踏入 SVG 的坑,接下去还会有一密密麻麻 SVG 的文章,将会更长远的斟酌SVG。

自家在本身的 Github 上,使用 SVG 实现了一些图纸
— SVG奇思妙想,德姆o能够戳那里。

到此本文甘休,假如还有啥样疑点还是建议,能够多多调换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏援助本人写出越来越多好小说,多谢!

打赏笔者

澳门新葡亰 25

澳门新葡亰 26

 

相关文章