在
網(wǎng)站建設(shè)技術(shù)不斷更新的今天，我喜歡HTML，作為一名老派前端開發(fā)人員，我認(rèn)為這是一項(xiàng)被嚴(yán)重低估的技能。我從2007年就開始寫HTML了，今天光是瀏覽器幾乎就能做近二十年前Flash能做的所有事情！<animateMotion>提供了一種定義元素如何沿運(yùn)動路徑移動的方法。
如果你看一下MDN文檔，你會看到一個簡單的例子，一個紅色的圓圈沿著一條無限循環(huán)的路徑?，F(xiàn)場預(yù)覽中的賽車遵循相同的簡單規(guī)則，它就是這樣工作的！SVG使用animateMotion ，這里有一個簡化版我將用它來解釋一些細(xì)節(jié)。為了簡潔起見，我刪除了一些路徑值，但是您可以看到src對于以下代碼片段，請訪問simple-version.html.)
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
</head>
<body>
<main>
<svg viewBox="0 0 307 184" xmlns="http://www.w3.org/2000/svg">
<g id="track">
<g id="track-lines">
<path fill="none" stroke="#facc15" d="M167.88,111.3..." />
</g>
<g id="pink-car">
<animateMotion dur="4s" repeatCount="indefinite" rotate="auto" path="M167.88,111.3..." />
<path fill="#EC4899" d="M13.71,18.65c0.25-0.5..." />
</g>
</g>
</svg>
</main>
</body>
</html>
首先要看的是<g>元素與id關(guān)于track-lines。這是黃色虛線，代表汽車將遵循的路徑。你還會看到另一個<g>元素與id關(guān)于pink-car。在這個組中有<animateMotion>元素。它有一個屬性path。用于構(gòu)成此路徑的數(shù)字與構(gòu)成track-lines。一；一個<animateMotion>元素是不可見的，它的唯一目的是為元素提供一個路徑。說到這里下面的<animateMotion>元素是另一個<path>元素，這是粉紅色的車，它會沿著它最近的鄰居的路徑。
還有一些附加的屬性<animateMotion>元素接受；這些措施如:dur:動畫的持續(xù)時間；repeatCount:動畫應(yīng)該循環(huán)的次數(shù)；rotate:這可以被認(rèn)為是對路徑的定向，這將確保圍繞路徑的動畫元素始終面向行進(jìn)方向。path:如前所述，這是元素將遵循的實(shí)際路徑。這MDN文檔展示<animateMotion>元素作為Svg的子元素<circle>形狀，例如:
<circle r="5" fill="red">
<animateMotion
dur="10s"
repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
雖然這種方法適用于形狀，但只有當(dāng)元素可以接受子元素時才有效。SVG path元素不能，所以將所有內(nèi)容包裝在<g>元素允許HTML計算出坐標(biāo)系統(tǒng)應(yīng)該從哪里開始，哪些元素應(yīng)該跟隨路徑，僅此而已。我設(shè)計了賽道和其他元素預(yù)覽鏈接在Adobe Illustrator中，將整個東西導(dǎo)出為SVG。然后，我做了一點(diǎn)手動重構(gòu)，以確保汽車與<animateMotion>元素。
