模仿用笔突出显示文本

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

准备工作

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

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

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

CSS

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

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

h1 {
 display: inline;
 position: relative;
}   

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

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

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

我们使用标准方法将相对元素定位在父元素的中心。要将 svg 调整为文本，我们应该应用 min-width 和 min-height。

使用 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;

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

---

下一个属性，我们需要的长度是行程-dashoffset：

path.style.strokeDashoffset = length;

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

---

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

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

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

选项

animate 方法的第二个参数是选项：

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

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

以上是模仿用笔突出显示文本的详细内容。更多信息请关注PHP中文网其他相关文章！