Question

我有一个要设置动画的箭头，因此我阅读了有关动画的信息，并且我注意到可以使用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

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

Answer 1

您可能已经知道如何实现所需的功能，但这是我创建的有效的pen。如您所见，为了查看笔画动画，我不得不通过将箭头设置为“透明”来删除箭头的填充。

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

最后，如果您想了解如何为fill属性设置动画，可以在此thread上找到一些可行的示例。

希望对您有所帮助，并与SVG玩得开心！

Answer 2

画线动画可以通过几种方式实现：

将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 个答案: