实现复杂线条动画

日期:2019-11-27编辑作者:澳门金莎娱乐网站

SVG 实现复杂线条动画

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

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画:《Web动画:SVG 线条动画入门》

当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多。

很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手 PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径。:

澳门金莎娱乐网站 1

好了,假定我们现在要制作下图 GIF 这样的一个 loading 图:

澳门金莎娱乐网站 2

上面这个 SVG 线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试。

澳门金莎娱乐网站 3

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画:

使用 PS 导出路径

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

澳门金莎娱乐网站 4

好,选中选框工具,按下 CTRL 选中图层, 再选择建立工作路径:

澳门金莎娱乐网站 5

这个时候会弹出一个设定容差大小的选择,可以用不同大小的容差多试几次,直到得到一个自己满意的路径。

澳门金莎娱乐网站 6

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

好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0 ,就能清晰的看到路径长啥样:

澳门金莎娱乐网站 7

港真,长得挺帅的。澳门金莎娱乐网站 8

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

澳门金莎娱乐网站 9

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

在 illustrator 中生成 SVG 文件

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

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

可能你看到的是一片空白,别慌,使用选择工具选一个矩形,就能选中路径啦。

澳门金莎娱乐网站 10

如果你是 PS 钢笔工具小能手,还可以继续对路径进行修改,直到自己满意为止。

OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为 SVG 文件。

澳门金莎娱乐网站 11

好,其实 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS 生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多。

获取 SVG 的 path 路径

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

澳门金莎娱乐网站 12

大功告成,这里面, 路径就是我们需要的路径了!

澳门金莎娱乐网站 13

好,把我们要的 `` 整个拿出来,运用上一篇文章的线条动画知识,给它赋予简单的动画效果就好:

See the Pen GNbwYV by Chokcoco (@Chokcoco) on 澳门金莎娱乐网站 ,CodePen.

很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手 PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径。:

使用 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奇思妙想,Demo可以戳这里。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

澳门金莎娱乐网站 14

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

澳门金莎娱乐网站 15 澳门金莎娱乐网站 16

2 赞 6 收藏 评论

好了,假定我们现在要制作下图 GIF 这样的一个 loading 图:

关于作者:chokcoco

澳门金莎娱乐网站 17

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

澳门金莎娱乐网站 18

澳门金莎娱乐网站 19

上面这个 SVG 线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试。

澳门金莎娱乐网站 20

 

使用 PS 导出路径

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

澳门金莎娱乐网站 21

好,选中选框工具,按下 CTRL 选中图层, 再选择建立工作路径:

澳门金莎娱乐网站 22

这个时候会弹出一个设定容差大小的选择,可以用不同大小的容差多试几次,直到得到一个自己满意的路径。

澳门金莎娱乐网站 23

style="font-family: verdana, geneva; font-size: 14px;">容差是什么?可以理解为一种精确度,在选取颜色时所设置的选取范围,容差越大,选取的范围也越大,其数值是在0-255之间。

好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0 ,就能清晰的看到路径长啥样:

澳门金莎娱乐网站 24

港真,长得挺帅的。澳门金莎娱乐网站 25

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

澳门金莎娱乐网站 26

 

在 illustrator 中生成 SVG 文件

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

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

可能你看到的是一片空白,别慌,使用选择工具选一个矩形,就能选中路径啦。

澳门金莎娱乐网站 27

如果你是 PS 钢笔工具小能手,还可以继续对路径进行修改,直到自己满意为止。

OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为 SVG 文件。

澳门金莎娱乐网站 28

好,其实 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS 生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

 

获取 SVG 的 path 路径

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

澳门金莎娱乐网站 29

大功告成,这里面, 路径就是我们需要的路径了!

澳门金莎娱乐网站 30

好,把我们要的 <path> 整个拿出来,运用上一篇文章的线条动画知识,给它赋予简单的动画效果就好:

 

使用 javascript 计算 path 路径长度

还有一个问题,线条动画需要知道整个 path 路径的长度,简单的线条我们还可以利用加减法算出整个图形的长度。那么复杂路径的长度怎么计算?

利用一段简单的 js 可以完成:

<svg>
    <path d="...">
</svg>

var obj = document.querySelector("path");
var length = obj.getTotalLength();

console.log(length); // 377.0433

好了,有了复杂图形的路径,我们就可以制作出很多酷炫 SVG 动画效果了。撒花。可以多上 codePen 上搜索 SVG,学习下大神们的一些 SVG 动画。

算是正式踏入 SVG 的坑,接下来还会有一系列 SVG 的文章,将会更深入的讨论 SVG。

我在我的 Github 上,使用 SVG 实现了一些图形 -- SVG奇思妙想,Demo可以戳这里。

 

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文由澳门金莎娱乐网站发布于澳门金莎娱乐网站,转载请注明出处:实现复杂线条动画

关键词:

强大工具,12个有助简化CSS3开发的工具

12个有助简化CSS3开发的工具 2011/05/18 · HTML5 ·CSS3,HTML5 Web 开发人员能通过CSS3为网站设计增添很多时尚元素,CSS3对CSS规...

详细>>

不要痴迷于HTML5,移动优先你掌握了吗

不要痴迷于HTML5 和 CSS3 2011/06/27 · HTML5 ·CSS3,HTML5 作为Web设计师,我们都不约而同的痴迷于HTML5和CSS3,我们需要学习H...

详细>>

HTML5和Unity开发网页游戏的现实,推荐10个HTML5游戏

推荐10个HTML5游戏网站 2011/07/24 · HTML5 ·HTML5 导读:原文作者JulioRivera是一名来自纽约市的创意总监和网页设计师,他是...

详细>>

12款强大的,10个HTML5素描及绘画设计工具

10个HTML5素描及绘画设计工具 2011/03/26 · HTML5 · 来源:smashinghub    · HTML5 Mr. Doob’s Harmony 非常适合随手绘制勾勒图像...

详细>>