主页 / 问题 / 945275
Accepted
De.Minov
Asked:2020-02-16 00:33:37 +0800 CST2020-02-16 00:33:37 +0800 CST

通过样式中风破折号

  • 772

有以下代码：

$('input[type="button"]').on('click', function(){
  StartFill();
});

function StartFill() {
	let timer = 1000*5;
  $('.status').css('background', 'green');
	$('#fill path')
  	.css('stroke-dasharray', '0, 251.2')
    .animate({
  	'stroke-dasharray': '251.2, 251.2'
  }, timer, 'linear', function(){
    $('#fill path').css('stroke-dasharray', '0, 251.2');
    $('.status').css('background', 'red');
  });
}
#fill {
  width: 150px;
  height: 150px;
}

.status {
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- -->
<svg id="fill" viewbox="0 0 100 100">
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#07f" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>
<div class="status"></div>
<br>
<input type="button" value="start">

按照计划，当您单击按钮时，"start"圆圈的边框应该被填充（就像一个圆形进度条）。
但他不想..

我认为问题在于它.animate()没有以同样的方式“复制”“机制” stroke-dasharray。

你怎么能“重播”这个动作？

附言

<animate>仅在您可以“知道”动画何时结束时才建议。
<div class="status">只是为了直观地表明该操作.animate()正在起作用。

jquery

2 个回答

  1. Best Answer

    您可以逐步更新属性 

    $('input[type="button"]').on('click', function(){
  StartFill();
});

function StartFill() {
  $('.status').css('background', 'green');

  const animationOptions = {
    duration: 1000*5,
    step: function(now) {
      $(this).attr("stroke-dasharray", `${now}, 251.2`);
    },
    easing: 'linear',
    complete: function() {
      $('#fill path').attr('stroke-dasharray', '0, 251.2');
      $('.status').css('background', 'red');
    },
  };

  $('#fill path')
    .css('percent-load', 0)
    .animate({ 'percent-load': 251.2 }, animationOptions);
}
    #fill {
  width: 150px;
  height: 150px;
}

.status {
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="fill" viewbox="0 0 100 100">
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#07f" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
  </path>
</svg>
<div class="status"></div>
<br>
<input type="button" value="start">

    • 3

  2. animate独家所有动画选项stroke-dasharray

    为了更好地了解它的工作原理，您可以阅读我们网站上的主题。

    1. 一段

    左键“L”填充圆圈

    右“R” - 填充减少

    <meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100">

<path fill="none"  stroke-linecap="round" stroke-width="5" stroke="#e1e1e1" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"/> 

<path fill="none" stroke-dasharray="0 251" stroke-linecap="round" stroke-width="5" stroke="#07f"
     d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">  
    <animate
	  attributeName="stroke-dasharray"
	  values="0 251; 251 0"
	  begin="btn_L.click"
	  dur="4s"
	  restart="whenNotActive"
	  fill="freeze" />  
 <animate
   attributeName="stroke-dasharray"
   values="251 0; 0 251"
   begin="btn_R.click"
   dur="4s"
   restart="whenNotActive"
   fill="freeze" />  
  
</path> 

<g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="green" >L</text>
</g> 	
	
    <g id="btn_R" transform="translate(60 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="crimson" >R</text>
    </g>

    2.从一个共同点同步 

    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100">

<path fill="none"  stroke-linecap="round" stroke-width="5" stroke="#e1e1e1" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"/> 

<path fill="none" stroke-dasharray="0 125.6 0 125.6" stroke-dashoffset="125.6" stroke-linecap="round" stroke-width="5" stroke="#07f" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">  
 <animate attributeName="stroke-dasharray" values="0 125.6 0 125.6; 0 0 251 0" begin="btn_L.click" dur="4s"  restart="whenNotActive" fill="freeze" />  
 <animate attributeName="stroke-dasharray" values="0 0 251 0;0 125.6 0 125.6" begin="btn_R.click" dur="4s"  restart="whenNotActive" fill="freeze" />  
 
 
	</path> 
  </path>

<g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="green" >L</text>
    </g> 	
	
<g id="btn_R" transform="translate(60 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="crimson" >R</text>
    </g>

    3. 两段 

    <meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100">

<path fill="none"  stroke-linecap="round" stroke-width="5" stroke="#e1e1e1" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"/> 

<path fill="none" stroke-dasharray="0 251" stroke-linecap="round" stroke-width="5" stroke="#07f"
     d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">  
    <animate
	  attributeName="stroke-dasharray"
	  values="0 125.6 0 125.6;125.6 0 125.6 0"
	  begin="btn_L.click"
	  dur="4s"
	  restart="whenNotActive"
	  fill="freeze" />  
 <animate
   attributeName="stroke-dasharray"
   values="125.6 0 125.6 0;0 125.6 0 125.6"
   begin="btn_R.click"
   dur="4s"
   restart="whenNotActive"
   fill="freeze" />  
  
</path> 

<g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="green" >L</text>
</g> 	
	
    <g id="btn_R" transform="translate(60 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="crimson" >R</text>
    </g>

    4.三段 

    <meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100">

<path fill="none"  stroke-linecap="round" stroke-width="5" stroke="#e1e1e1" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"/> 

<path fill="none" stroke-dasharray="0 83.66 0 83.66 0 83.66" stroke-dashoffset="125.6" stroke-linecap="round" stroke-width="5" stroke="#07f" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">  
 <animate
   attributeName="stroke-dasharray"
   values="0 83.66 0 83.66 0 83.66;
   83.66 0 83.66 0 83.66 0"
   begin="btn_L.click"
   dur="4s"
   restart="whenNotActive"
   fill="freeze" />  
 <animate
   attributeName="stroke-dasharray"
   values="83.66 0 83.66 0 83.66 0;
   0 83.66 0 83.66 0 83.66"
   begin="btn_R.click"
   dur="4s"
   restart="whenNotActive"
   fill="freeze" />  
  
</path> 
  

<g id="btn_L" transform="translate(-17 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="green" >L</text>
    </g> 	
	
<g id="btn_R" transform="translate(60 0)" >
      <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
	     <text x="25" y="95" font-size="10" fill="crimson" >R</text>
    </g>

    • 3

相关问题