Движение по траектории в CSS помимо «большой тройки» свойств

Перевод статьи CSS Motion Path beyond the Big Three Properties с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

Хотя работает она только в Chromium-браузерах, а черновик ее спецификации всё еще активно разрабатывается, анимация движения по траектории (CSS Motion Path) немного повзрослела за эти три года с момента первой реализации в Chrome 46.

Я уже описывал основы главного применения CSS Motion Path в виде трёх свойств — offset-path, определяющее траекторию, вдоль которой может двигаться элемент, offset-distance — для позиционирования элемента на этой траектории, и offset-rotate, которое отвечает за то, какой стороной вперед движется элемент по траектории.

После того моего обзора спецификация подросла на несколько фич (и больше того, некоторые из них уже можно «пощупать» в Chrome). Чтобы увидеть последние возможности, откройте эту статью с её демо-примерами в Chrome 66+ с включенным параметром «Экспериментальные функции веб-платформы» в chrome://flags.

See the Pen Banners in the Wind by Dan Wilson (@danwilson) on CodePen.

Привязка элемента

По умолчанию, элемент с траекторией двигается так, как будто с ней сцеплен его центр. Можно изменить эту точку с помощью свойства offset-anchor. Оно принимает значения типа <position>, подобно background-position или transform-origin, с x— и y-составляющими либо в виде числового значения, либо в виде ключевого слова вроде center.

See the Pen Offset Path Anchor by Dan Wilson (@danwilson) on CodePen.

Анимация самой траектории

Пару лет назад Chromium ввёл поддержку для свойства d в CSS, которое принимает path() и напрямую соответствует значению в атрибуте d внутри SVG-элемента path. Это позволяет изменять определение контура в CSS и вдобавок поддерживает анимацию, если браузер может интерполировать нужные значения, как показано у Криса Койера.

See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.

Спецификация «Анимация движения по траектории» ввела схожую логику интерполяции для свойства offset-path. Так что можно не только двигать элемент по траектории, но и изменять траекторию, по которой он движется.

See the Pen Animating offset-distance & offset-path (& d) by Dan Wilson (@danwilson) on CodePen.

Белая траектория в этом примере сделана на SVG, а за анимацию отвечает CSS, изменяющий свойство d. Синий  многоугольник анимируется двумя способами, начиная с наиболее привычной анимации его offset-distance от 0 до 100%. Для него также анимируется само свойство offset-path, используя те же два ключевых кадра, что использовались в анимации d у SVG-элемента path.  

Лучи и полярные координаты

Наибольшее изменение в спецификации «Анимация движения по траектории» — её сочетание с частями спецификации «CSS для круглых экранов» (CSS Round). В частности, в свойство offset-path добавили понятие полярных координат. В спецификации это представлено как весьма мощный инструмент, но та версия, которая сейчас работает за флагом — лишь малая часть этих возможностей. Поэтому я сосредоточусь на сегодняшней реализации, поскольку полную версию будет легче объяснить с её появлением в браузерах.

Тут главное, что offset-path теперь принимает новую функцию ray(), указывающую угол. Этот угол создаёт линию для позиционирования через полярные координаты. При сочетании с offset-distance этот угол определит, в каком направлении и на какое расстояние от круга сместится элемент.

.polar { offset-path: ray(90deg); offset-distance: 100px;
}

Этот код позволит сдвинуть элемент на 100px вправо. А при 135 градусах элемент сдвинется вниз и вправо.  

Поскольку теперь можно анимировать offset-path вместе с offset-distance, можно анимировать вращение элемента по окружности и его движение к центру и от центра.

See the Pen CSS Motion Path with ray() by Dan Wilson (@danwilson) on CodePen.

Пока всё это на ранних стадиях. После реализации будет ещё много чего исследовать. Вот тогда и  поговорим о содержащих блоках, сторонах и пятом новом свойстве из CSS Motion Path под названием offset-position.

P.S. Это тоже может быть интересно: