最近，關(guān)於工作中的動(dòng)畫頻道的討論引發(fā)了一個(gè)有趣的挑戰(zhàn)：創(chuàng)建響應(yīng)式CSS運(yùn)動(dòng)路徑。這篇文章探討了複雜性，並提出了基於JavaScript的解決方案。

CSS運(yùn)動(dòng)路徑使用offset-path屬性，沿著與SVG路徑相似的自定義路徑啟用動(dòng)畫元素。但是，關(guān)鍵的限制是路徑坐標(biāo)被視為像素值，從而阻礙了響應(yīng)性。特定尺寸定義的路徑不會(huì)隨著視口更改而優(yōu)雅地?cái)U(kuò)展。

offset-distance屬性控制沿路徑的元素位置，而offset-rotate管理其旋轉(zhuǎn)。動(dòng)畫offset-distance會(huì)產(chǎn)生運(yùn)動(dòng)效果。

核心問題在於CSS運(yùn)動(dòng)路徑的固定像素性質(zhì)。與SVG路徑（隨著視圖框的比例）不同，CSS路徑保持靜態(tài)，需要對(duì)不同的視口尺寸進(jìn)行手動(dòng)調(diào)整。這對(duì)於簡(jiǎn)單的路徑是可以管理的，但是複雜的路徑，尤其是從向量編輯器進(jìn)口的路徑，難以維護(hù)。調(diào)整大小需要為每個(gè)斷點(diǎn)（一個(gè)繁瑣的過程）重新遠(yuǎn)程從矢量編輯器重新出口路徑。

考慮一個(gè)簡(jiǎn)單的路徑：

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

縮放這一點(diǎn)需要重新計(jì)算不同斷點(diǎn)的路徑坐標(biāo)：

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

通過複雜的路徑，這變得更加挑戰(zhàn)。

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

圖表庫方法

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

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

<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>

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

增強(qiáng)的JavaScript解決方案

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

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

以上是創(chuàng)建響應(yīng)式CSS運(yùn)動(dòng)路徑？當(dāng)然我們可以！的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！