26.07.2024 в 12:33

Магия clip-path

clip-path часто используется для обрезки узла DOM в определенные формы, например треугольники. Но что, если я скажу вам, что он также отлично подходит для анимации?

В этой статье мы углубимся в clip-path и некоторые интересные вещи, которые вы можете с его помощью сделать. Прочитав ее, вы увидите, что это свойство CSS используется повсюду.

Основы

Свойство clip-path используется для придания элементу определенной формы. С его помощью мы создаём область отсечения, контент за пределами этой области будет скрыт, а контент внутри — видим. Это позволяет нам, например, легко превратить прямоугольник в круг.

.circle {
  clip-path: circle(50% at 50% 50%);
}

Это не влияет на макет, а это означает, что элемент с clip-path будет занимать то же пространство, что и элемент без него, как и transform.

Позиционирование

Мы расположили наш круг выше, используя систему координат. Он начинается в верхнем левом углу (0, 0). circle(50% at 50% 50%) означает, что круг будет иметь радиус границы 50% и будет расположен на 50% сверху и на 50% слева, что является центром элемента.

Существуют и другие значения, такие как ellipse, polygon или даже url() которые позволяют нам использовать собственный SVG в качестве контура обрезки, но мы собираемся сосредоточиться на inset, поскольку именно его мы будем использовать для всех анимаций в этом посте.

Значения вставки определяют верхнее, правое, нижнее и левое смещение прямоугольника. Это означает, что если мы используем inset(100%, 100%, 100%, 100%) или inset(100%) в качестве сокращения, мы «скрываем» (обрезаем) весь элемент. Вставка (0px 50% 0px 0px) сделает левую половину элемента невидимой и так далее.

Теперь мы знаем, что clip-path может по существу «скрывать» части элемента, это открывает множество возможностей для анимации. Давайте начнем их открывать.

Слайдеры сравнения

Уверен, что вы где-то видели эти слайдеры «до» и «после». Есть много способов создать его, например, мы можем создать два элемента div со скрытым переполнением и изменить их ширину, но мы также можем использовать более производительный подход с помощью clip-path.

Начнем с наложения двух изображений друг на друга. Затем мы создаем объект clip-path: (0 50% 0 0), который скрывает правую половину верхнего изображения, и корректируем его в зависимости от положения перетаскивания.

clip-path: inset(0 60% 0 0);

Таким образом, мы получаем аппаратно-ускоренное взаимодействие без дополнительных элементов DOM (нам нужен дополнительный элемент для расширения, спрятанный в отсеке).

Знание того, что мы можем создать такой образец слайдера, clip-path открывает двери для многих других вариантов использования. Мы могли бы использовать его, например, для эффекта текстовой маски.

Мы снова накладываем два элемента друг на друга, но на этот раз мы формируем нижнюю половину пунктирного текста с помощью clip-path: inset(0 0 50% 0), верхнюю половину сплошного текста с помощью clip-path: inset(50% 0 0 0). Затем мы корректируем эти значения в зависимости от положения мыши.

Пунктирный текст:

clip-path: inset(0 0 50% 0);

Заполненный текст:

clip-path: inset(50% 0 0 0);

Технически это тоже слайдер вертикального сравнения, но он на него не похож. Это просто вопрос творчества.

Пунктирный текст здесь — это обводка, примененная в Figma, которая затем преобразуется в SVG.

Анимация изображений

clip-path также может быть использовано для раскрытия изображения. Мы начинаем с объекта clip-path, который скрывает все изображение и становится невидимым, а затем анимируем его, чтобы показать изображение.

.image-reveal {
  clip-path: inset(0 0 100% 0);
  animation: reveal 1s forwards cubic-bezier(0.77, 0, 0.175, 1);
}
 
 
@keyframes reveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

Мы также могли бы сделать это с помощью анимации высоты, но здесь есть некоторые преимущества clip-path. Оно имеет аппаратное ускорение, поэтому оно более производительно, чем анимация высоты изображения. Использование clip-path также собственного размещения макета при открытии изображения, поскольку изображение уже есть, оно просто обрезано.

Прокрутка анимации

Эффект раскрытия изображения должен быть создан, когда изображение опускается в область просмотра, в противном случае пользователь никогда не увидит анимируемое изображение. Так как же нам это сделать?

Обычно я использую Framer Motion для анимации, поэтому показываю вам, как это сделать с его помощью. Но если вы все еще не используете библиотеку в своем проекте, я бы предложил вам использовать Intersection Observer API, так как Framer Motion довольно тяжелый.

Framer Motion предоставляет перехватчик useInView, который возвращает логическое значение, указывающее, находится ли элемент в области просмотра или нет. Затем мы можем использовать это значение для запуска анимации.

App.js

"use client";

import { useInView } from "framer-motion";
import { useRef, useState } from "react";

export default function ImageRevealInner() {
  const ref = useRef(null);
  // Change to true only once & when at least 100px of the image is in view
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  if (isInView && ref.current) {
    ref.current.animate(
      [{ clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0 0)" }],
      {
        duration: 1000,
        fill: "forwards",
        easing: "cubic-bezier(0.77, 0, 0.175, 1)",
      },
    );
  }

  return (
    <>
	  <h1>scroll down</h1>
      <img
        className="image-reveal"
        alt="A series of diagonal black and white stripes with a smooth gradient effect. The alternating light and dark bands create a sense of depth and movement, resembling light rays or shadows cast across a surface. The overall aesthetic is abstract and high-contrast, with a sleek, modern feel."
        src="https://emilkowalski-git-the-magic-of-clip-path-emilkowalski-s-team.vercel.app/clip-path/raycast.jpg"
        height={430}
        ref={ref}
        width={644}
      />
    </>
  );
}

style.css

.image-reveal {
  margin-top: 150vh;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

h1 {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 16px;
}

Здесь я использовал WAAPI вместо анимации CSS, чтобы хранить всю логику, связанную с анимацией, в одном месте. Я также добавил в хук два параметра useInView. Этот once параметр определяет, что анимация включается только один раз, а также параметр margin гарантирует, что анимация включается, когда в поле зрения находится не менее 100 пикселей изображения.

Прокрутка прогресса

Еще одно взаимодействие с прокруткой, которую мы можем создать, clip-path — это вертикальная линия, которая становится длиннее по мере прокрутки вниз. Это может выглядеть как нарисованный SVG, но это лишь обрезанный элемент div, который мы постепенно раскрываем при прокрутке.

В этом случае я использовал хук useScroll из Framer Motion, чтобы получить информацию о прокрутке нашего контейнера. Параметр offset гарантирует, что мы начнем измерение, когда верхняя часть элемента получит просмотр нижней части, и закончим измерение части, когда нижняя часть элемента получит просмотр нижней части области. Таким образом, мы не возвращаем анимацию, когда пользователь прокручивает ее.

Благодаря useTransform мы можем сопоставить прогресс прокрутки (от 0 до 1) со значением, которое мы можем использовать в свойстве clip-path. Я в основном сопоставляю значения от 0 до 100% и от 1 до 0%, все, что находится между ними, рассчитывается автоматически.

const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ["start end", "end end"],
});
 
const clipPathY = useTransform(scrollYProgress, [0, 1], ["100%", "0%"]);

scrollYProgress это motion value, которое является противоположным значением Framer Motion. Оно содержит актуальное значение без повторной визуализации компонента, и это полезно, но это также ограничивает условия доступа к нему.

Мне нужно использовать motion значение, чтобы создать новое motion значение, которое я могу использовать в clip-path свойстве. Это делается с помощью функции useMotionTemplate, которая позволяет нам создавать новое motion значение из строк шаблона, закладывая другое motion value.

const motionClipPath = useMotionTemplate`inset(0 0 ${clipPathY} 0)`;

Прелесть motion значения заключается в том, что если мы используем их в качестве встроенного стиля, они будут обновляться автоматически. Вот почему мне нужно было сохранять scrollYProgress. Если бы я сохранил его, например, в переменной const, оно не получило бы обновлений.

<motion.div
  ref={containerRef}
  // This style value updates automatically,
  // because `motionClipPath` is a motion value
  style={{ clipPath: motionClipPath }}
>
  ...
</motion.div>

Это самый продвинутый пример в этой статье, поскольку он содержит некоторые более сложные функции Framer Motion. Я решил включить ее, чтобы показать вам, на что способна эта библиотека.

Переходные вкладки

Уверен, что вы тоже видели это раньше. Проблема здесь в том, что активная вкладка имеет другой цвет текста, чем неактивные. Обычно люди понимают переход к цвету текста и это вроде как решает проблему.

Это нормально, но мы можем сделать лучше.

Мы можем продублировать список и изменить его стиль, чтобы он стал активным (синий фон, белый текст). Затем мы можем использовать clip-path обрезанный дублированный список, чтобы была видна только активная вкладка в этом списке. Затем, когда мы анимируем значение clip-path, чтобы открыть новую активную вкладку.

Таким образом, мы получаем плавный переход между вкладками, и нам не нужно беспокоиться о времени смены цвета, которое в любом случае никогда не будет плавным.

clip-path: inset(0 21% 0 52% round 17px);

Ниже вы увидите, как я реализовал это. Имейте в виду, что этот код упрощен, чтобы сосредоточиться на фактической производительности clip-path, требующей большего труда.