此代码笔的灵感来自 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。
我们将容器转变为弹性盒,以优雅地将所有内容放置在中心。
.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 中对元素进行动画处理,我们可以使用精彩的 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中文网其他相关文章!