SVG遮罩滚动缩放动画实现技巧

前往漫画官网入口并下载

想知道如何让网页滚动时，SVG遮罩也能跟着动起来，呈现出惊艳的缩放动画效果吗？本文将为你详细解读SVG遮罩的原理，并结合CSS样式和JavaScript代码，手把手教你实现这一炫酷的视觉特效。从SVG遮罩的结构、CSS样式的设置，到JavaScript监听滚动事件并动态调整SVG元素属性，你将全面掌握实现滚动时SVG遮罩缩放动画的关键技术。通过学习本文，你不仅能理解SVG遮罩的工作机制，还能将其灵活运用到你的项目中，为用户带来更具吸引力的交互体验。还在等什么？快来一起探索SVG遮罩的奥秘吧！

本文旨在指导开发者如何利用SVG遮罩（mask）和JavaScript实现一个在页面滚动时，SVG遮罩层能够动态缩放并适配视口的效果。通过本文，你将学习到SVG遮罩的基本原理、CSS样式设置以及JavaScript控制SVG元素属性的方法，最终实现一个具有吸引力的视觉效果。

SVG遮罩原理

SVG遮罩通过元素定义一个图形，该图形用于控制另一个元素的可见性。遮罩区域内的像素决定了被遮罩元素的透明度。白色区域完全可见，黑色区域完全透明，灰色区域则呈现不同程度的半透明效果。

准备工作

首先，我们需要准备HTML结构、CSS样式以及SVG元素。

HTML结构：

<div class="container">
  <svg viewBox="0 0 3000 1500">
    <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>

CSS样式：

body {
  margin: 0;
  height: 400vh; /* 为了产生滚动效果 */
}

.container {
    margin-top: 100vh;
}

在这个例子中，body的高度设置为400vh，目的是让页面可以滚动，从而触发我们的滚动事件。.container 元素被添加了 margin-top: 100vh;，这会将其向下推，使得初始状态下 SVG 元素不在视口中，当滚动到一定位置时，SVG 元素才会进入视口，从而触发缩放效果。

SVG元素说明：

• : 用于定义可重复使用的SVG元素，例如我们的遮罩。
• : 定义了一个ID为"m1"的遮罩，填充色为白色。
• : 将遮罩内容移动到SVG的中心位置。
• : 对遮罩内容进行微调，使其中心点更符合缩放需求。
• : 定义构成遮罩形状的路径。这里使用了两个元素来创建字母形状。
• : 使用遮罩"m1"来遮罩图片。

JavaScript实现滚动缩放

接下来，我们将使用JavaScript监听scroll事件，并根据滚动距离动态调整SVG遮罩的缩放比例。

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})`);
});

代码解释：

1. window.addEventListener('scroll', function() { ... });: 监听scroll事件。
2. var container = document.querySelector('.container');: 获取包含SVG的容器元素。
3. let s = (container.offsetTop + container.clientHeight*.5 - window.scrollY)/container.clientHeight;: 计算缩放比例。 container.offsetTop 是容器顶部距离文档顶部的距离，container.clientHeight*.5 是容器高度的一半，window.scrollY 是垂直滚动条滚动的距离。这个公式的核心思想是根据容器在视口中的位置来计算一个比例值。当容器顶部接近视口顶部时，s 接近 1，当容器完全离开视口时，s 接近 0。
4. s = (s > 1) ? 0 : 1-s;: 将比例值限制在0到1之间，并进行反转。 (s > 1) ? 0 : 1-s 是一个三元运算符，如果 s 大于 1，则将其设置为 0，否则将其设置为 1-s。这样做是为了确保缩放比例不会超出范围，并且在容器进入视口时开始缩放。
5. var maskgroup = document.querySelector('#m1 g');: 获取遮罩中包含路径的元素。
6. maskgroup.setAttribute('transform', \translate(1500 750) scale(${1 + s 90})`);: 设置元素的transform属性，实现缩放效果。translate(1500 750)保持中心位置，scale(${1 + s 90})根据滚动距离动态调整缩放比例。1 + s * 90确保缩放比例从 1 开始，并根据s的值进行放大。这里的90` 是一个缩放因子，可以根据需要调整以改变缩放的程度。

注意事项

• 性能优化： 滚动事件触发频率很高，频繁操作DOM可能导致性能问题。可以考虑使用requestAnimationFrame来优化性能。
• 兼容性： 确保代码在不同浏览器上的兼容性。
• 调整参数： 根据实际需求调整SVG的viewBox、遮罩的形状和位置，以及JavaScript中的缩放比例计算公式。
• 初始状态： 确保在页面加载时，SVG 元素处于正确的初始状态。如果需要，可以在页面加载完成后立即触发一次滚动事件，以设置初始的缩放状态。

总结

通过本文，你学习了如何使用SVG遮罩和JavaScript实现滚动时动态缩放的效果。这个技术可以应用于各种场景，例如创建引人注目的页面滚动动画、突出显示特定内容等。希望这个教程能帮助你掌握SVG遮罩的用法，并在你的项目中创造出更具吸引力的用户体验。

好了，本文到此结束，带大家了解了《SVG遮罩滚动缩放动画实现技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！