我的任务是添加一条虚线,该虚线将链接页面上的一堆插图。我已经搜索了一段时间,遇到了一些绘制没有破折号的正常线条的示例,例如我以前使用过的 http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/。
据我所知,这种技术不适用于虚线,因为它使用笔划虚线数组来实际制作线条的绘制动画。也许我错了?
有没有人知道用虚线达到相同效果的方法?另一件需要注意的事情是,这条线将在不同的颜色背景上移动。
任何建议将不胜感激。
更新:工作解决方案
var line;
var subPaths = [];
window.onload = function(){
line = Snap(document.getElementById("drawMe"));
getSubPaths();
}
window.addEventListener("scroll", drawLine);
function drawLine() {
var percentDrawn = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var percentDrawn = Math.round(percentDrawn * 100);
line.attr({
d: subPaths[percentDrawn]
});
}
function getSubPaths(){
var maxLength = line.getTotalLength();
for(var i = 0; i<101; i++){
var currentLength = maxLength*i/100;
subPaths[i] = line.getSubpath(0, currentLength);
}
}
通过您指向 Snap 的链接.svg我想出了这个解决方案:
<script src="./snap.svg.js"></script>
<script>
var line;
var subPaths = [];
var percentDrawn = 0;
window.onload = function(){
line = Snap(document.getElementById("drawMe"));
getSubPaths();
loop();
}
function loop(){
setTimeout(function(){
line.attr({
d: subPaths[percentDrawn]
});
percentDrawn++;
if( percentDrawn < 101) loop();
}, 50);
}
function getSubPaths(){
var maxLength = line.getTotalLength();
for(var i = 0; i<101; i++){
var currentLength = maxLength*i/100;
subPaths[i] = line.getSubpath(0, currentLength);
}
}
</script>
因此,我们要做的是构建一个数组,其中包含原始行的子路径,从开始到其总长度的 x%:getSubPaths()
。为此,我们实际上需要 Snap.svg因为它为我们提供了getSubpath(0, currentLength)
功能。
这其实就是所有的魔力!loop()
函数只是一个setTimeout
块,一旦我们完成绘图,就会中止条件。但是,实际绘图是将先前存储的数组中的相应子路径应用于行的d
属性。