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

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

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

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

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

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

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

 

使用 PS 导出路径

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

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

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

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

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

港真,长得挺帅的。

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

 

在 illustrator 中生成 SVG 文件

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

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

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

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

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

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

 

获取 SVG 的 path 路径

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

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

好,把我们要的 <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可以戳这里

 

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

时间: 2024-09-30 07:15:29

【Web动画】SVG 实现复杂线条动画的相关文章

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

通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画.   举个栗子 SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画.尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条: 把里面的进度条单独拿出来,也就是需要实现这样一个效果: 脑洞大开一下,

IOS绘制动画颜色渐变折线条_IOS

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

为动画插上翅膀——电脑动画发展史

电脑动画是计算机图形学和艺术相结合的产物,它给人们提供了一个充分展示个人想像力和艺术才能的新天地.目前, 电脑动画已经广泛应用于影视特技.商业广告.游戏.计算机辅助教育等领域. 美国是最早发展电脑动画的地方,在上个世纪七十年代末便利用电脑模拟人物活动.1982年,迪斯尼(Disney)推出第一套电脑动画的电影-Tron(中文片译<电脑争霸>). 传统的动画是由画师先在画纸上手绘真人的动作,然后再复制于卡通人物之上.直至20世纪70年代后期,电脑技术发展迅速的纽约技术学院的电脑绘图实验室导师丽蓓

Android动画复习:包括缩放动画、平移动画、旋转动画和透明度动画

现在是下午,我还在上班,工作都完成了,正在测试,突然感到很迷惘,工作一年了,仍然还是老样子,想到这些不由得倒吸一口冷汗.所以抓紧时间来看看我的博客,更新一下内容,有时候不逼自己一把,永远都不知道自己的极限是什么. 今天就来说说很基础很基础的知识:动画.动画主要分为四种. 1.缩放动画(ScaleAnimation): 2.平移动画(TranslateAnimation); 3.旋转动画(RotateAnimation): 4.透明度(AlphaAnimation); 其实还有一个,叫动画集合,现

PPT中“动画刷”工具实现复制动画效果的方法

  PPT中"动画刷"工具实现复制动画效果的方法         1.在幻灯片中选择添加了动画效果的对象后,在"动画"选项卡的"高级动画"组中单击"动画刷"按钮选择动画刷,然后使用"动画刷"单击幻灯片中的对象,则动画效果将复制给该对象,如图1所示. 图1 使用"动画刷"复制动画效果 注意 双击"动画刷"按钮,在向第一个对象复制动画效果后,可以继续向其他对象复制动画.完

PPT动画教程:设置“进入”动画

今天我们用动画的形式介绍在Powepoint演示文稿中设置"进入"动画的方法和技巧. 动画是演示文稿的精华,在画中尤其以"进入"动画最为常用.下面我们以设置"渐变式缩放"的进入动画为例,看看具体的设置过程. 1.选中需要设置动画的对象,执行"幻灯片放映→自定义动画"命令,展开"自定义动画"任务窗格. 2.单击任务窗格中的"添加动画"按钮,在随后弹出的下拉列表中,依次选择"进入→

iOS 开发之动画篇 - Transform和KeyFrame动画

序言 追求美好是人的天性,这是猿们无法避免的.我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现,正是这些基本的动画在经过合理的搭配组合后化腐朽为神奇,令人惊艳.因此,掌握最基本的动画是完成酷炫开发之旅的根本. 作为动画篇的第二篇文章,我在从UIView动画说起简单介绍了关于UIView的几种基本动画,这几种动画的搭配让我们的登录界面富有灵性生动,但是这几种动画总是无法满足我们对于动画的需求.同样的,本文将从一个小demo开始讲解强大

汤姆猫帧动画-求android汤姆猫实现点击各个身体部位实现各个帧动画新手求实现帧动画源码

问题描述 求android汤姆猫实现点击各个身体部位实现各个帧动画新手求实现帧动画源码 希望大神帮帮我一直都想弄明白可惜太笨了只要如何实现动画的源码,大神们快快出现吧 解决方案 这种动画,一般是靠 3D 建模搞出来的,不是用纯代码来实现的. 解决方案二: 画N张图片进行做成GIF之类的 解决方案三: 这个如果用帧动画去实现的画很耗费资源的,一般这个就是用3D模型来实现的 解决方案四: frame动画,一个动作是有n张图组成的,这个很简单,你可以找到他们的资源目录看一下就清楚了

iOS动画开发之二——UIView动画执行的另一种方式

iOS动画开发之二--UIView动画执行的另一种方式         上一篇博客中介绍了UIView的一些常用动画,通过block块,我们可以很方便简洁的创建出动画效果:http://my.oschina.net/u/2340880/blog/484457,这篇博客再介绍一种更加传统的执行UIView的动画的方法.         这种方式相比如block的方式,显得要麻烦一些,apple官方也推荐我们使用带block的创建动画的方式,我们可以将编程重心更多的放在动画逻辑的实现上.使用begi