創建響應式CSS運動路徑？當然我們可以！

最近，關於工作中的動畫頻道的討論引發了一個有趣的挑戰：創建響應式CSS運動路徑。這篇文章探討了複雜性，並提出了基於JavaScript的解決方案。

CSS運動路徑使用offset-path屬性，沿著與SVG路徑相似的自定義路徑啟用動畫元素。但是，關鍵的限制是路徑坐標被視為像素值，從而阻礙了響應性。特定尺寸定義的路徑不會隨著視口更改而優雅地擴展。

offset-distance屬性控制沿路徑的元素位置，而offset-rotate管理其旋轉。動畫offset-distance會產生運動效果。

核心問題在於CSS運動路徑的固定像素性質。與SVG路徑（隨著視圖框的比例）不同，CSS路徑保持靜態，需要對不同的視口尺寸進行手動調整。這對於簡單的路徑是可以管理的，但是複雜的路徑，尤其是從向量編輯器進口的路徑，難以維護。調整大小需要為每個斷點（一個繁瑣的過程）重新遠程從矢量編輯器重新出口路徑。

考慮一個簡單的路徑：

 。元素 {
  -Path：'M20,20 C20,100 200,0 200,100';
  偏移路徑：路徑（var（ - 路徑））;
}

縮放這一點需要重新計算不同斷點的路徑坐標：

 @Media（最小寬度：768px）{
  。元素 {
    -Path：'M40,40 C40,200 400,0 400,200'; //手動重新計算
  }
}

通過複雜的路徑，這變得更加挑戰。

JavaScript解決方案提供了更優雅的方法。儘管Greensock的MotionPath插件（如SVG路徑）提供了縮放，但對於SVG上下文之外的路徑仍需要更一般的解決方案。自定義功能可以動態擴展路徑，但這並不是微不足道。

圖表庫方法

諸如D3.js之類的圖表庫提供了潛在的解決方案。它允許從坐標集生成路徑字符串，從而實現自定義的縮放和曲線調整。但是，這仍然需要將現有路徑轉換為坐標集，這不是理想的。

一種更好的方法涉及直接從向量編輯器處理路徑字符串。使用SVGOMG這樣的工具優化SVG後，我們提取路徑數據和查看框信息：

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

我們對d屬性（路徑字符串）和viewBox屬性感興趣。

增強的JavaScript解決方案

JavaScript函數將路徑字符串和ViewBox界限作為輸入。它使用SVGGeometryElement API將路徑字符串轉換為數據集，並在路徑的長度上迭代以提取點。然後使用D3.JS量表根據容器大小和ViewBox比率生成縮放路徑字符串。這確保路徑在容器內按比例擴展時保持其長寬比。每當容器調整大小時， ResizeObserver都會動態更新路徑。完整的功能可在隨附的演示中獲得。

這種方法允許直接使用矢量編輯器的路徑，而無需手動重新計算不同的斷點，為響應式CSS運動路徑提供了可靠且可維護的解決方案。 GitHub軟件包“曲折”提供了此功能。演示顯示解決方案，允許使用各種優化的SVG路徑進行測試。

以上是創建響應式CSS運動路徑？當然我們可以！的詳細內容。更多資訊請關注PHP中文網其他相關文章！