Skip to content

README.md

Latest commit

 

History

History
19 lines (15 loc) · 616 Bytes

README.md

File metadata and controls

19 lines (15 loc) · 616 Bytes

SVG

学习SVG相关知识的总结笔记

描边动画

主要思路

使用path对象的getTotalLength方法获取path对象的长度，然后，设置stroke-dasharray和stroke-dashoffset属性值等于path对象的长度。然后，利用动画特性，逐渐改变stroke-offseet属性值直到0。

代码片段

var length = strokeRect.getTotalLength();
strokeRect.attr({'stroke-dasharray': length,'stroke-dashoffset':length});
Snap.animate(length, 0, function(val){
    strokeRect.attr({'stroke-dashoffset':val});
  }, 2000, mina.easeinout(), null
);

效果截图