网站开发用SVG设置动画

了解网站开发的都知道SVG 是一种非常简洁的格式，可以在网站上显示任何插图、图标或徽标。此外，它们可以在 CSS 或 JavaScript 中进行动画处理，以使它们更具吸引力。但是 SVG 也可以只用于他们的数据，没有视觉效果！让我解释… SVG 是一种矢量图像格式，这意味着它不是由彩色像素组成，而是数学函数，一旦被解释，就可以在屏幕上呈现。由于浏览器必须将文件从函数转换为实际像素，它还允许我们访问各种方法来操作或从数学中检索数据。如果我们查看有关该方法的 MDN 文档页面，它说：该SVGGeometryElement.getPointAtLength()方法返回沿路径给定距离处的点。该方法将为我们提供一个点的坐标，该点恰好位于我们作为参数发送的特定距离处的路径上。 由于我们需要给出我们点的距离，这意味着我们很可能需要知道我们的路径有多长。幸运的是，SVG API 有一个方法 getTotalLength() 可用于任何 SVGGeometryElement 返回元素总长度的方法！为此，我们需要一个包含动画值 (as gsap cannot animate number variables directly) 并将属性 distance 设置为零的 JavaScript 对象。 然后我们创建一个补间，将 distance 值从 0 更新为路径的总长度。最后在每一帧上，我们根据动画距离值沿路径检索一个点，并更新圆的 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 路径为一个元素设置动画，它可以让您轻松地从您提供的路径中为任何 DOM 元素设置动画。我喜欢粒子，这不是突发新闻。这就是为什么，当我学习一项新技术时，我总是尝试用它们来实现一些东西。让我们看看如何代替沿着路径移动的单个圆圈，我们可以让更多的圆圈像炸弹引信一样爆炸，这个动画的整体逻辑和之前完全一样，只是在每一帧我们都会创建一个新的圆形元素并对其进行动画处理。如您所见，设置非常相似。 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 函数将在每一帧上调用以使新粒子弹出和淡出。以下是动画的步骤：创建一个新的圆形元素并将其附加到 SVG，从我们计算的点设置坐标 getPointAtLength，为每个定义一个随机半径和颜色，将该粒子 cx 和 cy 属性设置为随机位置，动画完成后，从 DOM 中移除粒子。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=618