javascript - 使用 Javascript 的 ScrollMagic 库延迟绘制多个 SVG 路径

Question

我正在尝试使用 ScrollMagic 在滚动上绘制 SVG 线括号。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>

标签： javascripthtmlcsssvgdraw