开发者社区> 长征2号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【Web动画】SVG 实现复杂线条动画

简介:
+关注继续查看

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

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

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

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

graphicdesignsoftware

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

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

 

使用 PS 导出路径

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

image

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

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

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

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

港真,长得挺帅的。laugh-cry

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

 

在 illustrator 中生成 SVG 文件

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

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

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

yy-path5

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

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

image

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

 

获取 SVG 的 path 路径

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

image

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

intresting

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

 

使用 javascript 计算 path 路径长度

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

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

1
2
3
<svg>
    <path d="...">
</svg>
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可以戳这里

 

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



本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/6230165.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web入门开发【三】- 准备工作
欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程。首先我们来了解下这个课程能学到什么? 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML,CSS,JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编程感兴趣的朋友,一起学习交流。
23 0
Web入门开发【二】- 网站设计
欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程。首先我们来了解下这个课程能学到什么? 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML,CSS,JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编程感兴趣的朋友,一起学习交流。
19 0
【JavaWeb】WEB开发概述以及Tomcat(二)
本期主要介绍WEB开发概述以及Tomcat
31 0
Web页工具 - 使用Firefox的Web开发扩展
  Firefox的Web开发扩展为Firefox浏览器增加了大量有用的Web开发工具。一旦安装了这个扩展,你就可以通过一个工具条来访问为浏览器增加的这些工具(见图5-14)。在目前能够运行Firefox的所有平台上都能使用这个扩展包,这就意味着在Windows、OS X和Linux都能顺利地使用这个扩展包。
812 0
web项目经理手册-【2】开发时间估算
项目经理制定项目时间表的时候,需要估算每个任务所需的时间,其中开发任务中模块的分配和时间估算是其中最主要的部分。本篇专门就这部分作一个阐述。 一、在分配模块和估算开发时间时,我们需要把握的原则和目标: 1、保证项目整体的进度。
687 0
Web开发反思
[align=center]Web开发反思[/align]当前的Web开发,大都采用各种框架来解决问题。而这些Web框架,大多数比较复杂。
681 0
[b]PHP开发Web服务[/b]
[align=center][b]PHP开发Web服务[/b][/align]WSO2 WSF/PHP(WSO2 Web Services Framework/PHP,WSO2 Web服务框架) 是一个PHP扩展,允许用来创建和使用Web服务。
734 0
利用TOMCAT解决WEB开发中中文乱码的问题
很容易的一个方法, 不需要去更改自己的应用程序、找到   TOMCAT/conf/server.xml
584 0
Web 开发的演变:转向 Web.Next
CERN 的 Tim Berners-Lee 发明现代 Web 时的初衷是将其作为允许在基于网络的系统上存储和链接静态文档的系统。之后的数年间,随着创新的发展和成熟,"活动"文档自然而然地成为了现代 Web 发展的新阶段,这些文档在收到访问请求时即会生成,文档中包含特定于时间或用户的信息。
746 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WEB浏览器中即将发生的安全变化
立即下载
PWA:移动Web的现在与未来
立即下载
Serverless 开发实战--十分钟上线一个 Web 应用
立即下载