javascript - anchor 上的 svg 动画

Question

我正在尝试制作一个带有步骤的循环时间表， 我正在使用一个 fullpage.js 插件，它使每个部分都在 100% 的窗口中，正文溢出，所以实际上只有 4 个滚动步骤 所以步骤必须是:

section1 -->stroke  0%
section2 -->stroke 25%
section3 -->stroke  50%
section4 -->stroke  75%

在当前代码中，我使用悬停来显示效果:

	$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				menu: '#menu',
				scrollingSpeed: 1000,
			});
			
		});

 body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family: 'source_sans_proextralight';
}

/********** timeline ************/
#timeline{
	position:fixed;
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	pointer-events: all;
	z-index:99;
}


#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
	stroke:rgba(204,204,204,0.4);
}
#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}


#bluecircle:hover{
	stroke-dashoffset:0;
}
#smallblueleft, #smallbluebottom, #smallblueright{
	opacity:0;
		-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
	opacity:1;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>



<!---------- timeline ----------->
   <div id="timeline">
   
 
			<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>

<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>

<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>

<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>

<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>

<a xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>

<a xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>

<a xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>

<a xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
      </svg>

	</div>
  
  <div id="fullpage">
	<div class="section " id="don">
		<h2></h2>
		<p></p>
	</div>
	<div class="section" id="emploi">
	  <h2>fullPage.js</h2>
		<p>Create Beautiful Fullscreen Scrolling Websites</p>
	</div>
	<div class="section" id="section2">
			<h2>Example</h2>
			<p>HTML markup example to define 4 sections.</p>
	</div>
	<div class="section" id="section4">
			<h2>Working On Tablets</h2>
			<p>Designed to fit to different screen</p>
			</div>
</div>

Answer 1

您可以使用 fullpage.js回调 onleave(index, nextIndex, direction)

onLeave: function(index, nextIndex, direction){
      $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)) );                  
    }

但是，我没有找到获取anchors.length值的方法，这比硬编码4要好。

$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				menu: '#menu',
				scrollingSpeed: 1000,
                onLeave: function(index, nextIndex, direction){
                  $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));                  
        		}
			});
		});

body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family: 'source_sans_proextralight';
}

/********** timeline ************/
#timeline{
	position:fixed;
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	pointer-events: all;
	z-index:99;
}


#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
	stroke:rgba(204,204,204,0.4);
}
#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}



#smallblueleft, #smallbluebottom, #smallblueright{
	opacity:0;
		-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
	opacity:1;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>



<!---------- timeline ----------->
   <div id="timeline">
   
 
			<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>

<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>

<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>

<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>

<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>

<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>

<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>

<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>

<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
      </svg>

	</div>
  
  <div id="fullpage">
	<div class="section " id="don">
		<h2></h2>
		<p></p>
	</div>
	<div class="section" id="emploi">
	  <h2>fullPage.js</h2>
		<p>Create Beautiful Fullscreen Scrolling Websites</p>
	</div>
	<div class="section" id="section2">
			<h2>Example</h2>
			<p>HTML markup example to define 4 sections.</p>
	</div>
	<div class="section" id="section4">
			<h2>Working On Tablets</h2>
			<p>Designed to fit to different screen</p>
			</div>
</div>