如何实现SVG线动画

泡在网上的日子 / 文 发表于2015-12-18 17:28 次阅读 SVG

我相信你肯定已经看过很多SVG绘制路线的动画。非常酷对吧?这篇文章简单介绍如何实现动画,如果你有兴趣,可以看文章下方的扩展阅读。

效果如下,后面会附上CodePen。

https://dn-w3ctrain.qbox.me/svg-animation_svg.gif


不罗嗦,直接进入正题。

绘制路径

首先你需要绘制SVG路径,使用的工具有很多,AI,Sketch,PS,都没装? 那你还可以试试在线工具

(省略各种蹩脚抠图操作…)

我使用的是AI的钢笔工具,然后抠抠抠,绘制出你自己喜欢的路线。
大概这样(这里是很多条路径)。
https://dn-w3ctrain.qbox.me/svg-animation_wukong-path.jpg


当然最终的路径是不包含酷炫的图片的,我们这里只要路径。
然后另存为SVG,OK。大功告成。你可以安心地去上厕所了。


在html中嵌入

使用SVG的方式很简单,你大可以把它简单理解为img标签。使用编辑器打开SVG文件,直接把它复制到body里面。这样在浏览器上打开就能看到你的路径了。

https://dn-w3ctrain.qbox.me/svg-animation_svgcode.jpg



这里的path就是你画的每一条路径。stroke是描边,fill是填充,stroke-width是描边宽度。所以如果需要简单修改的话,直接在代码里面改就可以。

当然我只能说些简单的,想要了解更多,可以看看张鑫旭大哥的博客理解SVG的viewport,viewBox,preserveAspectRatio

虚线描边

比如,我使用css

.wukong-svg {
  stroke-dasharray: 10;
}


我的路径变成这样:


https://dn-w3ctrain.qbox.me/svg-animation_wukong.png



这是一张静态的图片…它把我的路径断开了,所以看到的,就是稀稀拉拉的线段。更好的理解,看下面两张图。

svg-animation_svg-shape.png



svg-animation_dashed-shape.png



stroke-dasharray的值是随意的,你可以给大一些。这得看你需求。

让它动起来

接着,这些描边是可以移动的。我们使用stroke-dashoffset属性和animation来是实现动画效果。

.wukong-svg {
  stroke-dasharray: 100;
  animation: dash 5.5s forwards linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}



我去掉Demo中的opacity以及把stroke-dasharray设为100,那么效果是这样的。
https://dn-w3ctrain.qbox.me/svg-animation_wukong.gif



注意

如果你像我一样在整个SVG上做动画,那么animation的值将作用于所有path上。你也可以把某条path单独提取出来实现动画。

看到这里,你应该明白,stroke-dasharray是用来设置每段虚线的长度。而stroke-dashoffset是用来设置移动的距离。所以实际上,stroke-dashoffset的大小,以及stroke-dasharray的大小,是要根据的自己的路径去填的。
你还可以使用JavaScript去获取路径长度。

var path = document.querySelector('.path');
var length = path.getTotalLength();


CodePen

喜欢的话,你可以Fork一下。



扩展阅读

出处:http://w3ctrain.com/2015/08/20/svg-animation/

收藏 赞 (0) 踩 (0)
上一篇:前后端分离了,然后呢?
前言 前后端分离已经是业界所共识的一种开发/部署模式了。所谓的前后端分离,并 不是 传统行业中的按部门划分,一部分人纯做前端(HTML/CSS/JavaScript/Flex),另一部分人纯做后端,因为这种方式是 不工作 的:比如很多团队采取了后端的模板技术(JSP, Free
下一篇:前端性能优化之更平滑的动画
想要达到平滑的动画效果,浏览器需要避免复杂繁琐的工作,比如解析代码,构建渲染树,绘制,布局等等工作。庆幸的是,我们有GPU。 从一个简单例子说起。 假设现在有这样的需求,鼠标移上图标时,图片向右移动300个像素单位,效果大概是下面这样。 很自然,人