之前用D3制作图表是初次接触SVG，当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候，才意识到SVG用于制作可交互的页面动画是多么有意思。
于是自己也尝试在HTML页面中制作了一个鼠标滚轮控制的SVG线条动画，具体的效果是，随着滚轮的滑动，线条一点点出现，或者一点点隐藏。只需要几行JS代码旧可以实现。
首先得有<path>标签
先得有一张SVG图。SVG图片中的形状有很多种，对应不同的标签，比如rect，circle，ellipse等等。但是我们这里需要用到的是path标签。如果不是，可以在不改变图形的前提下，转换成path标签。
我直接使用矢量图形编辑器Inkscape创建了一个简单的图形。
一个简单的SVG图形
然后把关键的代码放到HTML中。因为Inkscape生成的图片有很多属性在接下来制作的动画中是不需要的，所以我都删掉了。只留下svg标签和path标签。
path标签一定要有id，还要定义stroke和stroke-width，也就是线条的颜色和粗细。
放到body中的代码如下：
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 210 297" id="svg">
<path id="infinite-path" style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 61.232142,101.96428 c 1.147672,-2.649056 3.035266,-4.964098 5.362034,-6.673134 2.326767,-1.709035 5.084221,-2.813965 7.938424,-3.247755 5.708406,-0.86758 11.681983,1.011039 16.181684,4.629227 3.58776,2.884901 6.244005,6.748222 8.702734,10.640432 2.458732,3.89221 4.798742,7.90565 7.928222,11.28219 2.38133,2.56933 5.21199,4.74341 8.38721,6.22335 3.17522,1.47994 6.69979,2.25291 10.19784,2.06348 3.49805,-0.18943 6.96151,-1.3614 9.75581,-3.47424 2.7943,-2.11284 4.88851,-5.17906 5.67699,-8.59235 0.53756,-2.32706 0.46925,-4.78857 -0.17474,-7.08845 -0.644,-2.29987 -1.86036,-4.4344 -3.49424,-6.17641 -3.26775,-3.484028 -8.20223,-5.279906 -12.96197,-4.878002 -3.60577,0.304465 -7.04186,1.790537 -10.02353,3.840882 -2.98167,2.05035 -5.5431,4.65238 -7.93027,7.37188 -4.77434,5.439 -9.085502,11.55013 -15.308102,15.24557 -3.498818,2.07786 -7.522284,3.29989 -11.590912,3.37399 -4.068628,0.0741 -8.171845,-1.01786 -11.589848,-3.22613 -3.418004,-2.20828 -6.122309,-5.54159 -7.445722,-9.38969 -1.323414,-3.84809 -1.229299,-8.1909 0.388386,-11.92484 z" />
</svg>
<script src="js/index.js"></script>
</body>
js/index.js就是控制动画的脚本文件了。
JS控制线条
控制path的显示和隐藏的原理是，改变stroke-dasharray和stroke-dashoffset的值（可以通过CSS设置）。
-
stroke-dasharray：一组由逗号或者空格间隔开的数值。定义虚线的长度以及虚线之间间隔的长度。如果提供了奇数个值，则重复该值列表以产生偶数个值。例如，"20,10,5"产生的虚线大概如下：
设置stroke-dasharray的示例
-
stroke-dashoffset：用于定义虚线的位移，也就是第一根虚线开始的地方。
所以，根据页面滚动的百分比改变stroke-dashoffset的值，就可以实现线条一点点出现的效果了。
对应的JS代码如下：
// 获取path元素的引用
var path = document.querySelector('#infinite-path');
// 获取path的长度
var pathLength = path.getTotalLength();
// 设置足够长的虚线和虚线之间的间隔，这里直接设置了path本身长度
path.style.strokeDasharray = pathLength + ' ' + pathLength;
// 设置虚线的位移为path本身的长度，使得path看起来完全隐藏了
path.style.strokeDashoffset = pathLength;
// 获取元素的大小及其相对于视口的位置
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();
// 监听页面的滚动事件
window.addEventListener("scroll", function(e) {
// 获取滚动的百分比
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// 按照页面滚动百分比重新设置虚线的位移
var drawLength = pathLength * scrollPercentage;
path.style.strokeDashoffset = pathLength - drawLength;
// 当页面快滑到底时，移除虚线，否则形状不是很锐利
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = "none";
} else {
path.style.strokeDasharray = pathLength + ' ' + pathLength;
}
});
设置样式
最后设置图形的位置，把它固定在当前窗口中。对应的CSS代码：
body {
/* 足够高 */
height: 2000px;
}
#svg {
position: fixed;
top: 10%;
left: 10%;
width: 500px;
height: 500px;
}
网友评论