Задержка рисования нескольких путей SVG с помощью библиотеки Javascript ScrollMagi c - PullRequest
Новая
       8

Задержка рисования нескольких путей SVG с помощью библиотеки Javascript ScrollMagi c

0 голосов
/ 06 апреля 2020

Я пытаюсь нарисовать скобку линии SVG на свитке, используя ScrollMagi c. SVG - это в основном «спортивная» скобка, в которой она разветвляется на двое в определенных узлах. Я создал SVG с несколькими путями, с одним основным путем, идущим сверху вниз. И некоторые узлы вдоль этого пути, скобка разделяется, и это рисуется с помощью другого пути SVG.

Я могу заставить SVG рисовать пути при прокрутке, но они ВСЕ начинают рисовать в начале триггера и ВСЕ конец на конце триггера. Я хотел бы добиться, чтобы каждый путь начинался и заканчивался на основе их смещения от ограничительной рамки SVG. Я смог рассчитать все требуемые проценты ... но я просто не могу наброситься на математику, необходимую для перевода их в свиток.

Любая помощь будет принята с благодарностью.

См. Пример. 

/*globals ScrollMagic */
( function () {

	'use strict';

	console.clear();

	var bracket = document.querySelector( '#bracket' );
	var path = document.querySelectorAll( '#bracket path' );

	var height = bracket.clientHeight;

	function drawPaths( progress ) {

		for ( var i = 0; i < path.length; ++i ) {

			var len = path[ i ].getTotalLength();

			path[ i ].style.strokeDashoffset = len - (len * progress);

		}

	}

	// init the paths.
	// set dasharray and dash stroke to equal stroke length
	// find the top offset and set attribute
	for ( var i = 0; i < path.length; ++i ) {

		var len = path[ i ].getTotalLength(),
			top = path[ i ].getBoundingClientRect().top - bracket.getBoundingClientRect().top,
			perc = top / height,
			perc2 = (top + len)  / height;

		path[ i ].style.strokeDasharray = len;
		path[ i ].style.strokeDashoffset = len;

		// the percentage when this path should start
		path[ i ].setAttribute( 'data-percentage', perc );

		// the percentage when this path should end
		path[ i ].setAttribute( 'data-percentage2', perc2 );
	}

	// init controller
	var controller = new ScrollMagic.Controller();

	// build scene
	new ScrollMagic.Scene( {
		triggerElement: '#trigger',
		duration: 200
	} ).addTo( controller ).addIndicators().on( 'progress', function ( e ) {
		drawPaths( e.progress );
	} );


} )();
body {
  height: 5000px;
}

#bracket {
  position: fixed;
  top: 5vh;
  left: 5vh;
  width: 90vh;
  height: 90vh;
}

#bracket path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

<svg id="bracket" width="600" height="600" viewBox="0 0 383 758" version="1.1">
<path class="path1" d="M53,0.001l0,218.906l253,0l0,92.705l-74.281,0l0,168.924l32.918,0l0,102.4l-24.637,0l0,174.581" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path2" d="M53,218.907l0,180.029l55.771,0l0,166l-25.771,0l0,124.585" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path3" d="M306,311.612l76.037,0l0,113.502" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path4" d="M53,398.936l-52.327,0l0,103.585" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path5" d="M231.719,480.536l-33.578,0l0,79.44" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path6" d="M108.771,564.936l18.056,0l0,45.975" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
<path class="path7" d="M264.637,582.936l19.356,0l0,47.098" style="fill:none;stroke:#050e40;stroke-width:1px;"/>
</svg>
...