基于clip-path元素拼接动效

不裁_caiii
985 阅读4分钟

Clip-path是CSS3的新属性之一，它能够设置一个可缩放的自定义裁剪区域，使得元素只显示在指定剪切区域内的内容。该属性提供了多种创建和裁剪路径的方法，如简单的形状、复杂的图案等等，可以制作出各种不同的视觉效果。

实现原理

该动效主要基于以下的实现原理：

  1. 使用 SVG Fragment 作为背景图片
  2. 利用 Clip-path 约束图层所呈现的位置和线条路径
  3. 以多角度随机分散方式安排碎片位置
  4. 在 Hover 操作时，启用裁切路径。在此过程中，取消对 Clip-path 的限制，允许碎片从原位置飞往随机的目标位置，与其他碎片重新拼接成完整的图像

创建SVG碎片

首先，我们将使用 Illustrator 或 Sketch 等工具创造出一个抽象形状的 SVG 图形。在创建时，可以尝试使用简单的图形组合（如四边形、圆形等）加以组合成复杂的、神秘的图案。

在设计完成之后，我们需要将它们导出为单独的 SVG 文件并存储于服务器上。如果这一步您有所不懂，请参考相关文档或是寻求其他帮助。

设置 CSS 布局和样式

接下来，让我们来设置背景图像以及它的容器元素，每个 Svg碎片都是一个小块。我们可以利用直接载入 SVG 文件到HTML中的元素，通过调整Location和Size来对SVG进行移动和缩放指定裁剪区域，并将其作为CSS属性呈现在页面上。

在这个例子中，我们将使用一个 DIV 来包含SVG，并定义为一个绝对定位元素。这可以使我们更容易地控制Svg碎片的位置和大小。

<div class="overlay">
  <object type="image/svg+xml" data="https://your_path_to_svg_file"></object>
</div>

.overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

利用 Clip-path 约束图层所呈现的位置和线条路径

接下来，让我们来设置裁剪路径，并将其应用于 SVG 的外层包含元素上。这样一来，所有在Svg碎片以外的元素都可以被裁剪掉。

.overlay {
  clip-path: url(#clippingPath);
}

.clippingPath {
  position: absolute; bottom: 0;
  width: 100%; height: 100%;
  fill: transparent;
}

path {
  opacity: 0.8;
}

其中 #clippingPath 表示了我们事先创建好的 SVG 路径 ID（即裁剪路径的ID）。

利用 css3 transform 属性实现随机偏移

为了使这些 Svg碎片看起来更加自然，并给人以更艺术创意的印象，我们需要利用 CSS3transform 属性 来饶有兴趣地安排图层落脚点。因为每个 Svg碎片都存在不同的形状、大小和旋转角度等属性，这些图层之间应该具有高度的可预测性和可变性。

.path-shape__wrapper:before {
  content: '';
  position: absolute;
  width: ${itemSize}px; height: ${itemSize}px;
  top: ${yPosTop}% ; left: ${xPosLeft}%;
  background-image: url('#shape');
  background-position: center;
  background-size: contain;
  background-color: rgba(255, 255, 255, .01);
  -webkit-mask-image: url('#shape');
  mask-image: url('#shape');
  transform-origin: 50% 50%;
  transform: rotate(${startingDeg}deg);
  mix-blend-mode: overlay;
  will-change: background-color transform opacity visibility;
  transition: all .5s ease-out;
}

其中 xPosLeft 和 yPosTop 是位置参数，用于控制图层左右移动至随机位置。startingDeg是transform:rotate()属性的初始角度值。

利用 css 移除Clip-path，实现代码交互

在所有的 Svg碎片都被放置在屏幕上之后，我们就可以对其进行交互动画的设置了。为了达到此效果，我们需要绑定一个 :hover 事件，并利用 CSS 过渡特性来将 Clip-path 取消并添加其他的渐变特效。

.path-shape__wrapper:hover:before {
  clip-path: none !important;
  transform: rotate(${randomDeg}deg) !important;
  transition-delay: ${delayTime}ms !important;
  background-color: rgba(255, 255, 255, 1) !important;
}

使用 !important关键字是为了覆盖原有的 transitions 设置，确保表现良好。当取消了 Clip-path约束区域限制时，继而覆盖了 transform 属性，这样，Layer 就可以按照给定的延迟时间以及随机旋转角度飞往其他位置拼合成原来的图像了。

添加 JavaScript 互动效果

以上就是用 CSS 制作碎片拼接动效所需的主要代码。你还可以使用一些针对此动效的简单 JavaScript 相关代码来添加更多交互和响应式特点。例如，当窗口大小调整时，重新计算每个碎片的起始位置和角度等等。

const fragmentSize = 60;
const numRows = Math.ceil(window.innerWidth / fragmentSize);
const numCols = Math.ceil(window.innerHeight / fragmentSize);

window.addEventListener('resize', () => {
    //recalculate based on the current window size
});

在这里，我们根据网页可视区域（即窗口大小）动态地创建一组 Svg碎片。计算出表格行数和列数以及 Svg碎片的当前位置，然后重新安排它们的位置信息。

总结

基于 clip-path 的任意元素的碎片拼接动效，可以通过CSS、SVG和JavaScript的配合实现。首先设置SVG的路径和CSS属性，再利用CSS3 transform 和 Clip-path 属性实现随机偏移，最后用CSS 移除Clippath，实现代码交互。

需要注意以下几个要点：

  • 尽量使用较小的 SVG 碎片，并将其部署得尽可能多。
  • 使用 CSS3 的变形功能来制造神秘和强烈的印象。
  • 为每个 SVG 碎片设置合理的 CSS 过渡，使用事件动画来添加互动性。
  • 当用户交互时，通过 JS 重新计算位置和尺寸等属性。

avatar
文章
阅读
粉丝