javascript - 动画 SVG，圆形描边悬停

Question

想要模仿动画箭头:

http://uve.info/

悬停时笔划覆盖圆圈，我在 Illustrator 中创建了形状，很好，定位很容易。只是为笔触设置动画。

HTML(内联 SVG):

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/>
    <path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/>
</svg>

路径，已经是一个圆了。我想要位于当前路径之上的另一条路径来模拟 uve.info 站点。整个动画是通过悬停完成的。这就是箭头在动画中间应该看起来的样子，证明是一种痛苦。

调用笔划的最佳方式是什么？

谢谢大家。

Answer 1

如果您的目标是现代浏览器，我建议您使用 svg 动画。

您可以使用 stroke-dasharray 为笔划设置动画，该元素具有圆的长度 (2 * PI * r) 和等长的破折号偏移量。尝试使用破折号长度和偏移量的动画值来创建不同的效果。

这是一个如何做到这一点的例子。

.circle:hover {
  /* calculate using: (2 * PI * R) */
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 227;
  }
}

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

使用 css animation 属性和 @keyframes，您可以做各种花哨的事情。如果您希望保持简单，也可以尝试使用 transition 属性，如下例所示。请注意，我使用了 svg transform 属性来更改虚线笔画的起点。

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
  stroke-dashoffset: 0;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>