使滚动增长变为虚线

这是我迄今为止在stackoverfow本身的朋友的帮助下所做的。

它工作正常，但我想做一个对我来说有点复杂的动画。

// Get the id of the  element and the length of  var myline = document.getElementById("myline"); var length = myline.getTotalLength(); circle = document.getElementById("circle"); // The start position of the drawing myline.style.strokeDasharray = length; // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw myline.style.strokeDashoffset = length; // Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled window.addEventListener("scroll", myFunction); function myFunction() { // What % down is it? var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Length to offset the dashes var draw = length * scrollpercent; // Reverse the drawing (when scrolling upwards) myline.style.strokeDashoffset = length - draw; //get point at length endPoint = myline.getPointAtLength(draw); circle.setAttribute("cx", endPoint.x); circle.setAttribute("cy", endPoint.y); } 

 body { height: 2000px; background: #f1f1f1; } #circle { fill: red; } #mySVG { position: fixed; top: 15%; width: 100vw; height: 100vh; margin-left: -50px; } .st0 { fill: none; stroke-dashoffset: 3px; stroke: red; stroke-width: 5; stroke-miterlimit: 10; stroke-dasharray: 20; } 

 
Scroll down this window to draw my path.
 
Scroll back up to reverse the drawing.
    Sorry, your browser does not support inline SVG.  

我的问题是我们可以让这条线破灭吗？

我知道使用strokeDasharray的路径正在增长。 但是，有没有办法达到我想要的东西？ 如果没有，那么请建议另一种方式。 我不是在寻找“ 在你要画的线上放一条虚线并给它背景颜色 ”。

Answer 1

有办法做到这一点。 您可以使用虚线作为动画线的蒙版。

 // Get the id of the  element and the length of  var myline = document.getElementById("myline"); var length = myline.getTotalLength(); circle = document.getElementById("circle"); // The start position of the drawing myline.style.strokeDasharray = length; // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw myline.style.strokeDashoffset = length; // Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled window.addEventListener("scroll", myFunction); function myFunction() { // What % down is it? var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Length to offset the dashes var draw = length * scrollpercent; // Reverse the drawing (when scrolling upwards) myline.style.strokeDashoffset = length - draw; //get point at length endPoint = myline.getPointAtLength(draw); circle.setAttribute("cx", endPoint.x); circle.setAttribute("cy", endPoint.y); } 

 body { height: 2000px; background: #f1f1f1; } #circle { fill: red; } #mySVG { position: fixed; top: 15%; width: 100vw; height: 100vh; margin-left: -50px; } .st0 { fill: none; stroke-dashoffset: 3px; stroke: red; stroke-width: 5; stroke-miterlimit: 10; stroke-dasharray: 20; } .mask-style { stroke: white; stroke-width: 7; } 

 
Scroll down this window to draw my path.
 
Scroll back up to reverse the drawing.