使用snapjs实现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生成svg
        var 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();
        //不用矩阵定义过滤器颜色真是nice
        var 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);
        })

原文地址:https://www.cnblogs.com/smedas/p/12603921.html

时间: 2024-10-10 04:49:44

使用snapjs实现svg路径描边动画的相关文章

segment-实现SVG路径描边绘制与动画的轻量库

今天来一起了解一个实现SVG路径描边绘制与动画的轻量级类库segment,我们从轻松上手.使用详解.资源和案例.源码解读等几个方面进行介绍. 1. 轻松上手 html方面添加segment,定义path. <script src="/dist/segment.min.js"></script> <svg> <path id="my-path" ...> </svg> JS方面利用path实例化一个segme

SVG实现描边动画

说起SVG,我是恨它又爱它,恨它是因为刚开始接触的时候自己傻B地想用代码去写它,其实在web上我们用它做交互也只是用了几个常用的特性而已,其他的标签知道这么一回事就成了,其实说白了它就是一种图片格式,你得去画它,网站上最长用的SVG交互效果就是描边动画了,今天就来实现它 先上效果图: 思路:要实现这种动画,我们要使用的是SVG的路径path标签,其中然后配合两个属性:stroke-dasharray和stroke-dashoffset,至于用什么方式实现动画效果就八仙过海了,我这里使用的是css

svg文字描边动画

svg动画在网页中是经常见到的,svg动画使得网页看起来清新美观 任何不规则图形都可以由svg绘制完成,当然也包括文字,文字本身就可以看作一个不规则图形?? 还是按以前的流程,开始放代码前,先看效果: 很酷炫有木有?!!! 在我发现这个效果的时候,我觉得碉堡了,直到我知道了它的代码 代码真的很简单,很简单... 咳咳.不扯了,现在进入正题 在使用网页做svg动画的时候首先我们要有svg文件,这里我使用的是Ai来做svg文件 其实我感觉Ai和PS真的好像, 新建文件-->文字工具-->选自己喜欢

SVG路径动画解密

原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已,刚一出来大家都感觉很炫酷,时间久了也就审美疲劳啦!如果还不知道什么是SVG路径动画的童鞋,快来看一个demo吧:http://tympanus.net/Development/SVGDrawingAnimation/ 课程库相关课程:?常用的三种生成SVG图形动画方式 怎么样?是不是很炫酷!另外这种

SVG描边动画原理

SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取的,下文介绍通过JS获取长度. 动画就是减少虚线偏移,那么实线就会慢慢漏出来了 JS获取长度 var path = document.querySelector('path'); var length = path.getTotalLength(); 然后改变path.style.strokeDas

深度掌握SVG路径path的贝塞尔曲线指令

一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完全不能承受富有创意的创作的,至少得有我当年追我老婆的脸皮厚才行. 然而,瞅瞅维基百科上的释义,或者其他一些相关的技术文章,总是离不开各种公式,一大堆变量……例如下面维基截图缩略图: 完全是数学爱好者的菜啊!我想,要是让UI设计师们去学习这些东西,估计还不如一刀来个痛快的! 这就是爱好领域与能力掌握的

超级强大的SVG SMIL animation动画详解

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

SVG路径

前面的话 本文将详细介绍SVG路径 path字符串 路径(path)是一个非常强大的绘图工具,可以用path元素绘制矩形(直角矩形或者圆角矩形).圆形.椭圆.折线形.多边形,以及一些其他的形状,例如贝塞尔曲线.2次曲线等曲线 SVG路径最常用的属性是d属性,即path字符串,用来定义path元素的路径形状 属性d的值是一个“命令+参数”的序列,每一个命令都用一个关键字母来表示.参数之间可以用空格或逗号隔开,有一种情况例外,就是下一个数值是负数 d 一个点集数列以及其它关于如何绘制路径的信息 <p