Сделать при scroll пунктирный <path> растущим

101

12 октября 2019, 10:10

Ниже то, что я сделал до сих пор .

Это отлично работает, но я хочу сделать анимацию, которая немного сложнее для меня.

// Получить идентификатор элемента <path> и длину <path> 
var myline = document.getElementById("myline"); 
var length = myline.getTotalLength(); 
circle = document.getElementById("circle"); 
// Начальная позиция рисования 
myline.style.strokeDasharray = length; 
 
// Скройте треугольник, смещая черту. Удалите эту линию, чтобы показать треугольник перед прокруткой 
myline.style.strokeDashoffset = length; 
 
// Найти процент прокрутки при scroll (используя свойства кросс-браузера) и сместить тире настолько же, сколько и процент прокрутки 
window.addEventListener("scroll", myFunction); 
 
function myFunction() { 
  // What % down is it? 
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); 
  // Длина offset до dashes 
  var draw = length * scrollpercent; 
 
  // Переверните рисование (при прокрутке вверх) 
  myline.style.strokeDashoffset = length - draw; 
 
  //получить точку в длине 
  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>

Мой вопрос: можем ли мы сделать линию пунктирной?

Я знаю, что путь растет, используя strokeDasharray Но все же, есть ли способ достичь этого?

Если нет, то, пожалуйста, предложите другой способ. Я не ищу - "разместить пунктирную линию над линией, которую вы хотите нарисовать, и придать ей цвет вашего фона".

Answer 1

Есть способ сделать это. Вы можете использовать пунктирную линию в качестве маски для анимированной линии.

// 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; 
} 
 
.mask-style { 
  stroke: white; 
  stroke-width: 7; 
}

<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"> 
  <defs> 
    <mask id="dash-mask"> 
      <path class="st0 mask-style" 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" /> 
    </mask> 
  </defs> 
  <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" mask="url(#dash-mask)"/> 
  Sorry, your browser does not support inline SVG. 
</svg>

Источник