使用純CSS/JS的180度（半圓）的SVG半弧順時針影片

我的代碼需要一些幫助。我的目標是制作一個 180 度的漸進影片，該影片在圓的上半部分順時針移動。我的最終目標是同時播放兩個影片：上半部順時針，下半部逆時針，兩者都以相同的方式播放。

到目前為止，我有這個：

// Circle functions
  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    const angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

    return {
      x: centerX   (radius * Math.cos(angleInRadians)),
      y: centerY   (radius * Math.sin(angleInRadians))
    };
  }

  function describeArc(x, y, radius, startAngle, endAngle){
    const start = polarToCartesian(x, y, radius, endAngle);
    const end = polarToCartesian(x, y, radius, startAngle);

    const arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    const d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y,
        "L", x,y,
        "L", start.x, start.y
    ].join(" ");

    return d;       
  }

.arc {
  animation: moveForward 5s linear forwards;
}

@keyframes moveForward {
  to {
    d: path("M 450 150 A 300 300 0 0 0 450 150 L 150 150 L 450 150");
  }
}

<svg viewBox="0 0 300 300" height="250" width="250" style="background-color: black;">
  <path fill="white" stroke-width="0" d="M 450 150 A 300 300 0 0 0 -150 149.99999999999997 L 150 150 L 450 150" />
  <path class="arc" fill="black" stroke-width="0" d="M 450 150 A 300 300 0 0 0 -145.44232590366238 97.90554669992092 L 150 150 L 450 150" />
</svg>

不要介意外推半徑，我想將此影片的 SVG 區域內的影片吐露。如您所見，它沿著路徑移動，但缺少一些東西，因為它在影片程序中開始縮小。我不是專家，但形狀插值中可能缺少某些東西。

我正在使用公式根據另一個相關問題的答案生成端點。它基本上將我的弧角轉換為笛卡爾坐標。

我感謝您的任何意見，非常感謝您。

uj5u.com熱心網友回復：

一種可能的解決方案是為非常粗的筆劃（圓半徑的兩倍）設定影片。

在這種情況下，圓的半徑為 20，因此 stroke-width="40"

在下一個示例中，我對路徑的 stroke-dasharray 進行影片處理，從：62.84,0 (stroke length = 62.84, gap = 0) 到 0, 62.4 (stroke length = 0, gap = 62.84) 其中 62.84 是路徑。

請閱讀SVG 線條影片的作業原理

path {
  stroke-dasharray: 62.84,0;
  animation: anim 5s linear infinite;
}

@keyframes anim {
  to {
    stroke-dasharray: 0, 62.84;
  }
}

<svg viewBox="-50 -50 100 100" width="90vh">
  <path stroke-width="40" fill="none" stroke="black" d="M20,0A20,20 0 0 0 -20,0"/> 
</svg>

如您所見，我只使用 css。您可能需要使用 JS 來計算路徑的長度。您可以使用 getTotalLength() 方法來完成。

更新

OP正在評論：

如果我要擴大半徑，使其完全覆寫 SVG 區域（方形容器），沒有任何填充，那么這個擴大的半徑和您的解決方案之間的因素是什么？我應該考慮什么？

在這種情況下，可見圓（半徑 筆畫寬度/2）至少應為 70.71，但它可以大于該值。70.71 表示 svg 元素的中心和角之一之間的距離。這是雙腿 = 50 的直角三角形的斜邊。由于 viewBox="-50 -50 100 100" 腿 = 100/2。

這意味著 stroke-width="70.71" 并且您需要像這樣重寫 d 屬性：

d="M35.355,0A35.355,35.355 0 0 0 -35.355,0"

其中 35.355 = 70.71/2

還需要重新計算路徑的長度（我正在使用該p.getTotalLength()方法），在本例中為 111.09。我將這個值用于 CSS 中的 stroke-dasharray。

console.log(p.getTotalLength())

svg{border:solid}

path {
  stroke-dasharray: 111.09,0;
  animation: anim 5s linear infinite;
}

@keyframes anim {
  to {
    stroke-dasharray: 0, 111.09;
  }
}

<svg viewBox="-50 -50 100 100" width="90vh">
  <path id="p" stroke-width="70.71" fill="none" stroke="black" 
  d="M35.355,0A35.355,35.355 0 0 0 -35.355,0"/> 
</svg>

標籤：html css 动画片 svg 小路

上一篇：如何將.word符號加載到Arm程式集中的暫存器中？

下一篇：單擊按鈕顫動后顯示串列圖塊