此代码笔的灵感来自 Sten Hougaard 的作品

准备工作

让我们为不同的动画实现创建两个容器：

 
Animated text
  
 



 
Click on me!
  
 

我用Adobe illustrator制作了svg，它的主要特点就是高度小，宽度大。
值得一提的是，svg 是 header 元素的子元素，因为我们将相对于它定位 svg。

CSS

我们将容器转变为弹性盒，以优雅地将所有内容放置在中心。

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline 用于简单地将元素的宽度减小到其内容，因为 svg 将依赖它

接下来，我们应该相对于标题定位 svg：

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

我们使用标准方法将相对元素定位在父级的中心。要将 svg 调整为文本，我们应该应用最小宽度和最小高度。

使用 JavaScript 的动画逻辑

要在 javascript 中对元素进行动画处理，我们可以使用精彩的 animate(keyframes, options) 方法。

关键帧

让我们剖析一下 getDrawingParameters 函数，它提供了要迭代的属性：

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

首先，我们需要使用 svg 方法知道我们的路径实际有多长 getTotalLength:

const length = path.getTotalLength();

现在，我们应该使用计算出的长度来模拟绘图。让我们定义我们的起点。我们需要属性 linesDasharray:

path.style.strokeDasharray = length;

在这里，我们告诉这个属性以一个破折号（大小=长度）和一个间隙（大小=长度）交替来绘制路径。

下一个属性，我们需要的长度是 lines-dashoffset:

path.style.strokeDashoffset = length;

该值表明破折号数组计算是按长度值拉动的。由于我们将破折号数组设置为“dash-length space-length dash-length space-length ...”，起始路径将为空（间隙）。

因此，我们在数组中定义可迭代属性：

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

我们使用 offset 来定义必须达到该属性的相对时间。它是为了在每次迭代时模拟延迟。

选项

animate方法的第二个参数是options:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

我们将动画设置为无限迭代和 10 秒持续时间。还记得偏移量吗？我们的“活动”动画只需要 1.5 秒。