主页 / coding / 问题 / 78434125
Accepted
marklovin
Asked: 2024-05-06 08:17:33 +0800 CST

是否可以创建一个 SVG 笔画动画，无论笔画长度如何，其动画持续时间都相同？

  • 772

在提供的示例中，较小的形状比较大的形状动画快得多，因为它的笔划长度要短得多。

我的理解是，将stroke-dasharray100% 设置为 100% 而不是像素量应该可以实现此目的，但这样做会产生意想不到的结果，即笔划不会完全扩展形状的 100%。

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: draw 5s infinite linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975"></polygon>
</svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12"></polygon>
</svg>
  </div>
</div>

svg

1 个回答

  1. Best Answer

    您可以通过设置pathLength属性来标准化动画路径长度来规避此问题

    来自 mdn 文档

    pathLength 属性允许作者以用户单位指定路径的总长度。然后，通过使用比率 pathLength /（路径长度的计算值）缩放所有距离计算，使用该值来校准浏览器的距离计算与作者的距离计算。

    通过这种方式，您可以确保两个动画花费相同的时间，并且还方便了破折号数组属性计算，因为您只需要在两者之间设置动画

    stroke-dasharray: 0 100（无可见笔划）
    和
    stroke-dasharray: 100 100（完整路径长度）

    .page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 0 100;
  animation: draw 2s infinite linear;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 100 100;
  }
}
    <div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <polygon class="shape" pathLength="100" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975" />
    </svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <polygon class="shape" pathLength="100" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12" />
    </svg>
  </div>
</div>

    • 2

相关问题