本文将介绍如何使用 SVG 遮罩实现一个滚动展开动画效果。通过监听滚动事件，动态调整 SVG 遮罩的缩放比例，从而实现遮罩区域随滚动条位置变化而展开的效果。教程将提供完整的 HTML、CSS 和 JavaScript 代码示例，并详细解释实现原理和关键步骤。
实现原理
核心思路是利用 SVG 的 <mask> 元素创建一个遮罩，然后将该遮罩应用于一个背景图片。通过 JavaScript 监听 scroll 事件，计算滚动条的位置，并根据滚动距离动态调整 SVG 遮罩的 transform 属性，具体来说是 scale 属性。这样，当页面滚动时，遮罩区域会逐渐展开，露出更多的背景图片，从而产生滚动展开的动画效果。
步骤详解
1. HTML 结构
首先，我们需要一个容器来包含 SVG 和背景图片。SVG 包含一个 <defs> 元素，用于定义遮罩，以及一个 <image> 元素，用于显示背景图片并应用遮罩。
<div class="container"> <svg viewBox="0 0 3000 1500" style="border: solid black thin;"> <defs> <mask id="m1" fill="white"> <g transform="translate(1500 750)"> <g transform="translate(-80 -87)"> <path d="M 82.2 109.5 L 46.3 166.1 H 0 L 57.2 82.9 L 1.6 0 H 49.2 L 82.7 54 L 117 0 H 164.1 L 108 81.4 L 165.7 166.2 H 117.6 L 82.2 109.5 Z"/> <path d="M 325.1 158.7 c -19 10.3 -40.9 15.4 -65.9 15.4 C 232.3 174.1 210.6 166.4 194.3 151.1 C 178 135.8 169.8 114.6 169.8 87.7 c 0 -27.1 8.1 -48.5 24.2 -64.2 c 16.1 -15.7 37.9 -23.5 65.4 -23.5 C 285.1 -0 305.9 4.8 321.9 14.4 l -13.3 35.4 c -15.9 -9.2 -31.9 -13.8 -47.8 -13.8 c -14.9 0 -26.8 4.6 -35.6 13.8 c -8.9 9.2 -13.3 21.5 -13.3 37 c 0 16.8 4.2 29.9 12.5 39.1 c 8.3 9.2 20.3 13.8 35.9 13.8 c 9.7 0 18.6 -1.7 26.6 -5.1 v -24.5 H 245.9 v -33.5 h 79.2 V 158.7 z"/> </g> </g> </mask> </defs> <image width="100%" mask="url(#m1)" href="https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg"/> </svg> </div>
在这个例子中，我们定义了一个 ID 为 m1 的遮罩。遮罩内部包含两个 <g> 元素，用于定位和缩放遮罩的形状。 <path> 元素定义了遮罩的形状，这里使用了两个字母 “XG” 的路径。 <image> 元素引用了背景图片，并将 mask 属性设置为 url(#m1)，表示使用 m1 遮罩。
2. CSS 样式
为了使页面可以滚动，我们需要设置 body 的高度。同时，为了使效果更明显，可以设置容器的 margin-top。
body { margin: 0; height: 400vh; } .container { margin-top: 100vh; }
3. JavaScript 代码
JavaScript 代码负责监听 scroll 事件，并根据滚动距离动态调整 SVG 遮罩的 transform 属性。
window.addEventListener('scroll', function() { var container = document.querySelector('.container'); let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight; s = (s > 1) ? 0 : 1-s; var maskgroup = document.querySelector('#m1 g'); maskgroup.setAttribute('transform', `translate(1500 750) scale(${1 + s * 90})`); });
这段代码首先获取容器元素。然后，它计算一个缩放比例 s，该比例基于滚动条的位置和容器的高度。s 的值在 0 到 1 之间变化。最后，它获取遮罩的 <g> 元素，并使用 setAttribute 方法设置 transform 属性，将遮罩缩放 1 + s * 90 倍。 translate(1500 750) 用于调整遮罩的中心点。
代码解释
- container.offsetTop: 容器距离文档顶部的距离。
- container.clientHeight: 容器的高度。
- window.scrollY: 滚动条距离文档顶部的距离。
- s = (container.offsetTop + container.clientHeight*.5 – window.scrollY)/container.clientHeight;: 计算滚动位置相对于容器中心点的比例。
- s = (s > 1) ? 0 : 1-s;: 将比例限制在 0 到 1 之间，并进行反转，使得滚动时遮罩逐渐展开。
- maskgroup.setAttribute(‘transform’, translate(1500 750) scale(${1 + s * 90})): 设置遮罩的 transform 属性，实现缩放效果。 translate 确保缩放中心位于遮罩的中心。
注意事项
- 调整 viewBox 属性的值可以改变 SVG 的宽高比。
- 调整 transform 属性中的 translate 值可以改变遮罩的位置。
- 调整 JavaScript 代码中的缩放比例系数（例如 90）可以改变展开动画的速度。
- 实际应用中，需要根据具体的设计需求调整代码。
总结
通过以上步骤，我们成功地使用 SVG 遮罩实现了一个滚动展开动画效果。这个技术可以应用于各种场景，例如页面标题、图片展示等，为用户带来更丰富的交互体验。 关键在于理解 SVG 遮罩的工作原理，并根据需求调整代码。
css javascript java html svg ai win JavaScript css html 事件 margin transform