动画与<path>生长的圆上滚动

Question

问题更新

这是我迄今所做的。

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

// Get the id of the <path> element and the length of <path> 
 
var myline = document.getElementById("myline"); 
 
var length = myline.getTotalLength(); 
 

 
// 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; 
 
}

body { 
 
    height: 2000px; 
 
    background: #f1f1f1; 
 
} 
 

 
#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; 
 
}

<h2>Scroll down this window to draw my path.</h2> 
 
<p>Scroll back up to reverse the drawing.</p> 
 

 
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible"> 
 
    <path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG. 
 
</svg>

我要的是动画一<circle>与<path>像

增长我知道路径是使用strokeDasharray增长。但是，是否有办法达到目标？如果没有，那么请建议另一种方式。谢谢..！

Answer 1

使用getPointAtLength()

看起来像另一个答案已经建议这:)

// Get the id of the <path> element and the length of <path> 
 
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; 
 
}

<h2>Scroll down this window to draw my path.</h2> 
 
<p>Scroll back up to reverse the drawing.</p> 
 

 
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible"> 
 
    <circle id="circle" cx="10" cy="10" r="10"/> 
 
    <path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG. 
 
</svg>

Answer 2

我不确定您是否想在该行的末尾画一个圆或一个圆，但也许getPointAtLength()可以帮助您。

你可以在结束点与myline.getPointAtLength(draw)行了，你可以使用这个在这一点上

我已经添加了代码console.log(myline.getPointAtLength(draw))画圆。

我的午休时间刚刚结束，否则我会为你画圆圈。

// Get the id of the <path> element and the length of <path> 
 
var myline = document.getElementById("myline"); 
 
var length = myline.getTotalLength(); 
 

 
// 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; 
 

 
    console.log(myline.getPointAtLength(draw)); 
 

 
    // Reverse the drawing (when scrolling upwards) 
 
    myline.style.strokeDashoffset = length - draw; 
 
}

body { 
 
    height: 2000px; 
 
    background: #f1f1f1; 
 
} 
 

 
#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; 
 
}

<h2>Scroll down this window to draw my path.</h2> 
 
<p>Scroll back up to reverse the drawing.</p> 
 

 
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible"> 
 
    <path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG. 
 
</svg>