Перевод статьи 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. Это тоже может быть интересно:
