使用snap.svg实现svg路径描边动画
来源:互联网 发布:ce卡车软件 编辑:程序博客网 时间:2024/04/28 22:04
使用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生成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); })
三,题外话
1.特别感谢鑫神写的中文api,有兴趣的可以去学一下 [ 中文api ]。
2.这个效果本来是朋友做的网页上需要的,但是,写完之后朋友却说需要兼容到ie8,那就算了,本效果只兼容到ie9。
3.某个说我写的不能用的某人,请不要看,看你是小狗哟。
4.本人初涉江湖,欢迎切磋指正。
阅读全文
0 0
- 使用snap.svg实现svg路径描边动画
- SVG路径描边动画效果的实现
- 纯CSS实现SVG路径描边动画效果
- SVG路径描边动画效果
- 图标动画 Animated SVG Icons with Snap.svg
- Snap svg:路径变换和相交计算
- SVG路径动画解密
- SVG路径动画-SMIL
- segment-实现SVG路径描边绘制与动画的轻量库
- svg实现we动画
- Android 使用SVG动画
- Snap.svg教程
- Snap svg 主要对象
- Snap.svg实战学习
- SVG的路径动画效果
- 用css实现svg描边的动画效果
- svg 与svg动画
- 使用Snap.svg类库实现的抖动式的幻灯播放效果
- Git使用教程
- Caused by: java.net.BindException: Cannot assign requested address: JVM_Bindx
- Android数据库高手秘籍(三)——使用LitePal升级表
- java 常用集合list与Set、Map区别及适用场景总结
- HDU 6097 Mindis
- 使用snap.svg实现svg路径描边动画
- ctypes cdll打开动态库,数据交换,调试
- SpringMVC工作原理
- 一个优秀的Java程序员必须了解GC的工作原理、如何优化GC的性能、如何与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统、实时系统等,只有全面提升内存的管理效率,才能提高整个应用程序
- 【转知乎】人工智能会是泡沫吗?
- TensorRT(1)--8-bit Inference
- 类的继承
- 【noip 2015】斗地主
- conlose 未定义