SVG 实现复杂线条动画

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

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

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

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

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

图片 1

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

图片 2

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

图片 3

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

关于html动画,一般来说我们有这么几种实现方式:
1,用css的transform结合transition来实现位移、旋转、缩放等;
2,用css的animation,通过@keyframe来实现更个性化的分帧动画;
3,用js操作dom来实现更加复杂的或特殊的动画;
4,用canvas标签然后通过js来绘制动画,功能强大但操作可能会很复杂;

使用 PS 导出路径

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

图片 4

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

图片 5

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

图片 6

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

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

图片 7

港真,长得挺帅的。图片 8

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

图片 9

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

今天,我想介绍另一种动画实现方式,svg。通过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
上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

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

图片 12

获取 SVG 的 path 路径

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

图片 13

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

图片 14

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

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可以戳这里。

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

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

打赏作者

图片 1

1,内联路径

如上所示,我们在svg标签中,添加了一个circle标签,在页面绘制了一个半径为41的圆,在circle标签中嵌套了一个<animateMotion>标签,animateMotion标签包含两个属性path
和 dur。下面我分别来解释一下这些标签和属性的作用:
.
 animateMotion标签:这就是svg动画的必要因素,它通过定义一组路径及动作时间等属性来实现元素的动画;


path属性:在animateMotion标签的path属性规定了动画的动作路径;*
上例通过path规定了一条直线路径;
.  dur属性:在animateMotion标签的dur属性规定了动画的动作时间;
 
上例规定了动画执行时间为5秒;*

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

任选一种支付方式

图片 16
图片 17

2 赞 6 收藏
评论

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

2,指向特定外部对象路径

如此,我们便让circle在页面动了起来,我们会看到页面刷新后哦一个圆圈在页面向左移动一定距离后,回到了原来的位置
但有时候我们有这样的需求,我们希望元素的动画路径是可见的,比如元素沿着一个可见的不规则线条运动;

图片 18

例:小红球沿着不规则图形线路运动

图片 19

例:上图示例的实现代码

我们可以看到,我们新增了一个path标签,此时的path标签绘制了一个不规则图形;而animateMotion标签中的path属性移除了,多了一个<mpath>子标签。这里mpath标签将circle的animate路径通过xlink:href属性指向了id=“path”的path标签,也就规定了circle的运动路径是path标签绘制的路径;由此,我们便实现了小球沿着不规则路线运动了!是不是很简单?

如果你够细心,会发现animateMotion标签中新增了一个属性–>repeatCount;我们前面说过,动画结束后,运动的元素会停止运动并回到最初的位置。聪明的你肯定会想到我们新增的这个属性repeatCount便是让元素的动画一直循环的吧!(animateMotion还有其他一些属性也很有用处,我就不一一列举了)

想想如果用js去现实这样一个动画,还是很复杂的,需要通过坐标计算得出运动轨迹点然后循环去改变红色球的位置;但是svg几行html代码就搞定了,有没有很方便?
附上我自己的一个案例网址:圆圈在页面不规则漂浮动画。页面底部的圆圈不规则漂浮动画便是利用svg的路径动画实现的,相对于js去实现这类型动画,在表现上会平滑柔和许多,真正实现了不规则的漂浮,而且代码也简单的多!

关于作者:chokcoco

图片 20

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 21

图片 22

3,如何得到复杂的path路径

聪明如你我,在最初看到path路径的参数时,肯定都是一脸懵逼的,心中默念着‘这他妈是什么鬼……’;今天我也不打算跟大家去讲解path路径到底怎么写,怎么理解,因为我至今还是不明白(笑cry)。大家感兴趣可以自行去找资料学习这些高等函数……

那么,我们如何才能得到我们想要的路径呢?很简单。
1,通过可以导出svg图的绘图工具制作路径图并导出,例如AI,sketch等等……然后将导出的svg通过浏览器打开,打开控制台便可以找到图形的path信息,复制便好;
2,推荐一个在线生成svg图形的利器:在线生成svg图形。使用非常简单,各种图形模版也有,也可以手动绘制;然后导出为svg就好,使用方法同上;

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

图片 23

 

使用 PS 导出路径

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

图片 4

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

图片 25

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

图片 26

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

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

图片 27

港真,长得挺帅的。图片 8

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

图片 29

 

在 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 路径的文件用浏览器打开,一片空白是正常的,右键查看网页源代码:

图片 13

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

图片 14

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

 

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图