使用stroke-dashoffset答案

【问题标题】：Use of stroke-dashoffset使用stroke-dashoffset
【发布时间】：2019-11-21 18:51:52
【问题描述】：

我有一个想要动画的箭头，所以我阅读了有关动画的内容，我注意到我可以使用 css 关键帧和 svg 来实现这一点。

所以基本上我想从 0 到 100% 画一个箭头，所以我有这样的路径：

 <path class="showUp" fill="#4C9FDC" stroke="#000000" stroke-width= "0" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

我想用这样的笔划制作动画：

@keyframes Arrow {
 from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}


.showUp {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: Arrow 5s linear forwards;
}

CodePen

但它什么也没做。我在那里做错了什么？问候

【问题讨论】：

首先，您正在为路径的描边设置动画，它没有，因为您确实将stroke-width 属性设置为0，然后，它将是黑色的，因为您确实设置了@ 987654326@到#000000，最后只会发生一次
哦，我明白我改变了宽度和颜色会发生什么，所以我认为我使用了不正确的动画。我怎样才能画出我原来的路径？我的意思是画原始箭头。而是在它周围画一个边框？ @凯多
用.getTotalLength()计算的路径总长度为196.1。请使用stroke-dasharray: 196.1; stroke-dashoffset: 196.1; 而不是您拥有的。

标签： css svg css-animations

【解决方案1】：

画线动画有几种实现方式：

将stroke-dashoffset 参数从等于行长度的最大值更改为零：

body{
  background-color: #272727;
}

@keyframes Arrow {
 from {
    stroke-dashoffset: 196;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #d3d3d3 ;
  }
  to {
    fill: #FF0000;
  }
}

.showUp {
  stroke-dasharray: 196;
  stroke-dashoffset: 196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "4" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>

通过将 stroke-dasharray 参数从零破折号和最大间隙更改为最大笔划破折号和零间隙：

@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}

body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,196;
  }
  to {
    stroke-dasharray: 196,0;
  }
}
@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}

.showUp {
  stroke-dasharray: 0,196;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  <path class="showUp" fill="#4C9FDC" stroke="#AAD000" stroke-width= "2" stroke-linecap="round" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

从一个中点画两条线：

body{
  background-color: #151515;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 0,98 0,98 ;
  }
  to {
    stroke-dasharray: 0,0 196,0;
  }
} 

@keyframes Arrow_Fill {
 from {
    fill: #4C9FDC ;
  }
  to {
    fill: #AAD000;
  }
}


.showUp {
  stroke-dasharray: 0,98 0,98;
  stroke-dashoffset:75;
  animation: Arrow 2s linear forwards, Arrow_Fill 1.4s linear 2s forwards
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 366.94">
 
  
 
  <path class="showUp" fill="#4C9FDC" stroke="#FF0000" stroke-width= "2"  d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>

虚线绘制使用蒙版动画：

.container{

  background-color: #151515;
  width:100vw;
  height:100vh;
}

@keyframes Arrow {
 from {
    stroke-dasharray: 196,0;
  }
  to {
    stroke-dasharray: 0,196;
  }
} 


.showUp {
  stroke-dasharray: 196,0;
  stroke-dashoffset:75;
  animation: Arrow 4s linear forwards;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="100%"  viewBox="0 0 792 366.94">
 
  
    <defs>  
	<mask id="msk1"> 
	   <rect width="100%" height="100%" fill="white" />
	  <path class="showUp" fill="white" stroke="black" stroke-width= "1"  d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>
	</mask>
	</defs>
  <path  mask="url(#msk1)" fill="#4C9FDC" stroke="greenyellow" stroke-width= "3" stroke-dasharray="4 2" d="M165.15 204.15l-4.49-4.49c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01c-2.13 2.13-2.14 5.59-.01 7.72l.01.01 9.09 9.09a4.418 4.418 0 0 0 6.24 0l50.28-50.28c2.12-2.1 2.13-5.53.03-7.65l-.03-.03c-2.13-2.13-5.59-2.14-7.72-.01l-.01.01-45.66 45.63z"/>

</svg>
</div>

【讨论】：

【解决方案2】：

您可能已经弄清楚如何实现您正在寻找的东西，但这是我创建的一个有效的pen。如您所见，为了看到笔画动画，我必须通过将箭头的填充设置为“透明”来移除它。

对于stroke-dasharray 和stroke-dashoffset 值，我只是简单地使用数字，直到我对行为感到满意，但更可靠的方法是使用@enxaneta 提到的JavaScript。有关 SVG 线条动画一般如何工作的更详细说明，您可以参考 CSS-Tricks 上的 article。

最后，如果您有兴趣了解如何为填充属性设置动画，您可以在 thread 上找到一些工作示例。

希望对您有所帮助，享受 SVG 的乐趣！

【讨论】：