了解
網站開發的都知道SVG 是一種非常簡潔的格式，可(kě)以在網站上顯示任何插圖、圖标或徽标。此外，它們可(kě)以在 CSS 或 JavaScript 中(zhōng)進行動畫處理(lǐ)，以使它們更具(jù)吸引力。但是 SVG 也可(kě)以隻用(yòng)于他(tā)們的數據，沒有(yǒu)視覺效果！讓我解釋…
SVG 是一種矢量圖像格式，這意味着它不是由彩色像素組成，而是數學(xué)函數，一旦被解釋，就可(kě)以在屏幕上呈現。由于浏覽器必須将文(wén)件從函數轉換為(wèi)實際像素，它還允許我們訪問各種方法來操作(zuò)或從數學(xué)中(zhōng)檢索數據。如果我們查看有(yǒu)關該方法的 MDN 文(wén)檔頁(yè)面，它說：該SVGGeometryElement.getPointAtLength()方法返回沿路徑給定距離處的點。該方法将為(wèi)我們提供一個點的坐(zuò)标，該點恰好位于我們作(zuò)為(wèi)參數發送的特定距離處的路徑上。
由于我們需要給出我們點的距離，這意味着我們很(hěn)可(kě)能(néng)需要知道我們的路徑有(yǒu)多(duō)長(cháng)。幸運的是，SVG API 有(yǒu)一個方法 getTotalLength() 可(kě)用(yòng)于任何 SVGGeometryElement 返回元素總長(cháng)度的方法！為(wèi)此，我們需要一個包含動畫值 (as gsap cannot animate number variables directly) 并将屬性 distance 設置為(wèi)零的 JavaScript 對象。
然後我們創建一個補間，将 distance 值從 0 更新(xīn)為(wèi)路徑的總長(cháng)度。最後在每一幀上，我們根據動畫距離值沿路徑檢索一個點，并更新(xīn)圓的 cx 和 cy 屬性以使其移動：
// Create an object that gsap can animate
const val = { distance: 0 };
// Create a tween
gsap.to(val, {
// Animate from distance 0 to the total distance
distance: path.getTotalLength(),
// Function call on each frame of the animation
onUpdate: () => {
// Query a point at the new distance value
const point = path.getPointAtLength(val.distance);
// Update the circle coordinates
circle.setAttribute('cx', point.x);
circle.setAttribute('cy', point.y);
}
});
如果您想要實現的效果隻是沿 SVG 路徑為(wèi)一個元素設置動畫，它可(kě)以讓您輕松地從您提供的路徑中(zhōng)為(wèi)任何 DOM 元素設置動畫。我喜歡粒子，這不是突發新(xīn)聞。這就是為(wèi)什麽，當我學(xué)習一項新(xīn)技(jì )術時，我總是嘗試用(yòng)它們來實現一些東西。讓我們看看如何代替沿着路徑移動的單個圓圈，我們可(kě)以讓更多(duō)的圓圈像炸彈引信一樣爆炸，這個動畫的整體(tǐ)邏輯和之前完全一樣，隻是在每一幀我們都會創建一個新(xīn)的圓形元素并對其進行動畫處理(lǐ)。如您所見，設置非常相似。
const svg = document.querySelector('svg');
const fuse = svg.querySelector('.fuse');
const val = { distance: 0 };
gsap.to(val, {
distance: fuse.getTotalLength(),
repeat: -1,
duration: 5,
onUpdate: () => {
// Query a point at the new distance value
const point = fuse.getPointAtLength(val.distance);
// Create a new particle
createParticle(point);
}
});
該 createParticle 函數将在每一幀上調用(yòng)以使新(xīn)粒子彈出和淡出。以下是動畫的步驟：創建一個新(xīn)的圓形元素并将其附加到 SVG，從我們計算的點設置坐(zuò)标 getPointAtLength，為(wèi)每個定義一個随機半徑和顔色，将該粒子 cx 和 cy 屬性設置為(wèi)随機位置，動畫完成後，從 DOM 中(zhōng)移除粒子。
