使用snap.svg实现svg路径描边动画

一，snap.svg插件

在近几天，突然接到一个需求，内容是要在网页上写一个路径的动画，还需要可以随意控制动画的速度，开始于结束，本来是一个图片可以解决的问题，结果就这样变难了呀，在网上查一会之后，突然就发现了svg，他有两个神奇属性stroke-dasharray(控制虚线和空白大小)和stroke-dashoffset(控制虚线偏移)，通过改变stroke-dashoffset便可以轻松实现路径动画。
路径是这样滴

一开始没有注意后边路径上的阴影，我写到阴影时候才发现，svg的阴影竟然是用矩阵写的，唉，谁教咱不会写呢。只能放弃原生了呀。于是乎，我找到了adobe公司的Snap.svg。这个插件真是不错，简化了不少svg动画和生成的代码操作。不说了，上代码。

二，代码块

html
<!--属性preserveAspectRatio和viewBox是控制缩放的，以为屏幕不同所以我选择不按照比例缩放适应不同屏幕-->
<svg id="svgs" width="100%" height="100%" preserveAspectRatio="none" viewBox="0,0,800,300"></svg>
<button id="btn">开始运行</button>
<!--引用-->
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/snap.svg.js" type="text/javascript" charset="utf-8"></script>

js1生成svgvar svg = Snap("#svgs");var $svg=$('#svgs');//运行代码的时候发现filter也有width和height属性，源码中获取的是父级的offsetheight和offsetwidth，但是父级offsetheight和offsetwidth是空，没办法，只好手动添加了svg.paper.node.offsetHeight=$svg.height();svg.paper.node.offsetWidth=$svg.width();//不用矩阵定义过滤器颜色真是nicevar f = svg.paper.filter(Snap.filter.shadow(0, 0, 3,'#5294d6'));var p1 = svg.paper.path("M179 209L128 217L375 221L208 291L437 295L447 272").attr({stroke: "#ffffff",strokeWidth: 2,fill:'none',strokeLinejoin:'round',strokeLinecap:'round',filter: f});

js2控制运动var $path=$('path');var $btn=$('#btn');//经过我的测试，发现除了谷歌和欧鹏之外的浏览器好像都不支持除path元素使用getTotalLength，为了兼容，只好用path了var len = p1.getTotalLength();$path.css('strokeDasharray',len);$path.css('strokeDashoffset',len);$btn.on('click',function(){$path.stop();$path.css('strokeDashoffset',len);$path.animate({strokeDashoffset:0},6000);})

三，题外话

1.特别感谢鑫神写的中文api，有兴趣的可以去学一下 [ 中文api ]。
2.这个效果本来是朋友做的网页上需要的，但是，写完之后朋友却说需要兼容到ie8，那就算了，本效果只兼容到ie9。
3.某个说我写的不能用的某人，请不要看，看你是小狗哟。
4.本人初涉江湖，欢迎切磋指正。

使用snap.svg实现svg路径描边动画相关推荐

SVG——入门，路径描边动画
之前写过一篇通过路径的锚点改变实现图形变化的动画SVG--入门,路径变形动画,今天这一篇的demo是简易的类似进度条之类的图形,核心原理通过改变路径的stroke-dasharray属性,路径的虚线描 ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
python animation path_帅气的SVG路径描边动画 (path animation) 实战应用
这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看. 要是觉得文章还不错的话,可以多多推荐哦. 今天这篇文章来聊聊SVG路 ...
SVG路径描边动画效果的实现
SVG路径描边动画效果理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio部分参考自: http://www.w3cplus.com/html5/svg-coord ...
SVG——入门，路径变形动画
刚学了两天svg基础,随手记个笔记,通过改变svg锚点路径创作动画效果,今天的demo是一个播放和暂停的按钮动画的原理,无论是帧动画,还是位移动画,无非就是将一个图形从a状态转变为b状态的一个过程 ...
css图像描边,纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意 ...
SVG—初识4之描边动画和路径动画
SVG-初识4 SVG描边动画 stroke-dashoffset DrawSVGPlugin插件路径动画 CSS写路径动画 SVG写路径动画使用 GreenSock 来实现自行车沿着路径运动的路 ...
SVG路径描边动画效果
一.效果简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 三.必知的基础知识 SVG中有个比较重要的属性分支,stroke :"描边". 1,stroke 描边颜色 no ...
纯CSS实现SVG路径描边动画效果
SVG中有一个比较重要度属性,stroke.stroke有很多兄弟属性: 1)stroke:线的颜色: 2)stroke-width:线的宽度: 3)stroke-linecap:线的端点,可用值有b ...

使用snap.svg实现svg路径描边动画

使用snap.svg实现svg路径描边动画

一，snap.svg插件

二，代码块

三，题外话

使用snap.svg实现svg路径描边动画相关推荐

最新文章

热门文章