Руководство по Web Animations API — Часть 5: приятная траектория движения

Максим Усачев

Перевод статьи Web Animations API Tutorial Part 5: The Loveable Motion Path с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это пятая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson. Раньше на моем блоге на Codepen вышла более краткая версия этой статьи, почти сразу после того, как Хром объявил о поддержке Motion Path за флагом.

Наконец-то! Анимация движения по контуру… теперь возможна не только в SVG.

Траектория движения: нынешний курс (спецификации)

See the Pen Motion Path Infinity by Максим (@psywalker) on CodePen.

Когда спецификацию API проработали, в ней появились несколько вариантов траектории движения. Вначале всё шло к тому, что она должна была стать какой-то разновидностью Effect (вроде ранее рассмотренного GroupEffect), но после ей на подмогу пришёл Motion Path как модуль CSS (со своей собственной спецификацией).

Тем самым, движение по контуру будет просто еще одним набором CSS-свойств, и его можно будет анимировать точно так же, как opacity или transform. Так их смогут использовать и CSS-переходы, и CSS-анимации, и WAAPI… и это великолепно, поскольку мы хотим, чтобы между этими методами было как можно больше общего, что даст нам больше гибкости. Chrome и Opera уже выпустили первую реализацию (за флагом), так что уже сегодня мы можем попробовать ее в деле, пусть даже ей и не нашлось места ни в одном полифилле.

Давайте разберем по частям, что это за свойства, как ими пользоваться, и на чем тут можно споткнуться.

Свойства траектории движения

Есть три свойства motion, которые мы обсудим. Чтобы увидеть примеры, нужны Chrome 43+ или Opera 30+ со включенным параметром «Включить экспериментальные функции веб-платформы» в chrome://flags или opera://flags. Обычно я держу две версии Chrome сразу — Стабильная и Canary, а флаг включаю только в Canary.

motion-path

Начнём со свойства motion-path, которое определяет траекторию, вдоль которой может двигаться элемент, по тем же правилам, по которым работают контуры в SVG 1.1

#motioner {
  motion-path: path("M200 200 S 200.5 200.1 348.7 184.4z");
}

У этого свойства есть ещё один необязательный первый параметр fill-rule в вызове траектории. Чтобы узнать о нём подробнее, советую прочитать превосходное «Карманное руководство по написанию SVG» от Джони Трайтел.

Также можно использовать базовые фигуры, такие как circle, polygon,ellipse и inset. Если вы работали с CSS Shapes, то эти фигуры вам наверняка знакомы.

В первой реализации Blink мне удалось увидеть в работе только метод path(), поэтому либо я использую фигуры неправильно, либо всё ещё впереди.

motion-offset

Чтобы привести в движение и фактически разместить элемент где-нибудь на траектории, нам понадобится свойство motion-offset. Оно принимает либо двойное значение длины, либо проценты. Поэтому для движения анимации от начальной точки траектории до конечной, мы настраиваем анимацию, которая идёт от 0 до 100%. С Web Animations API это выглядит так:

var m = document.getElementById('motioner');
m.animate([
  { motionOffset: 0 },
  { motionOffset: '100%' }
], 1000);

А с CSS так:

#motioner {
  animation: path-animation 1s;
}
@keyframes path-animation {
  0% { 
    motion-offset: 0;
  }
  100% { 
    motion-offset: '100%';
  }
}

See the Pen CSS Motion Path Spiral by Максим (@psywalker) on CodePen.

В этом примере показано несколько точек, двигающихся по спиральной траектории от внешней стороны к внутренней. При приближении к центру точка уменьшается, ускоряется и становится прозрачнее. .animate() вызывается дважды для каждой точки с бесконечными итерациями и задержкой, где один вызов отвечает за смещение движения, а другой — за масштабирование и прозрачность. Я их разделил, чтобы задать разные функции плавности, но запросто можно и объединить.

Также в этом подходе используется определение возможностей, что можно заметить по сообщению которое появляется вместо анимации в Safari, Firefox, Edge или в Chrome/Opera без флага. Вот один из способов сделать это:

var m = document.getElementById('motioner');
if (m.style.motionOffset !== undefined) { ... }

Конечно, не хотелось бы полностью игнорировать пользователей в реальной веб-штуковине, поэтому у нас может быть альтернативная анимация (или не анимация), которая переключалась бы на анимацию Motion Path, если она поддерживается. Как и всегда, прогрессивное улучшение вам в помощь.

motion-rotation

И наконец, свойство motion-rotation, которое отвечает за то, какой стороной вперед движется элемент по траектории. Есть четыре основных способа указать это.

  • Значение «auto» означает, что элемент будет поворачиваться вслед за траекторией.
  • Со значением «reverse» элемент также будет поворачиваться вслед за траекторией, но дополнительно еще на 180 градусов, так что он будет двигаться задом наперед.
  • «auto Xdeg» (или «reverse Xdeg») сделает то же самое, но еще добавит X градусов.
  • При «Xdeg» элемент больше не будет поворачиваться за траекторией, а будет всё время направлен в одну и ту же сторону

See the Pen CSS MotionPath by Максим (@psywalker) on CodePen.

Чего не хватает?

Конечно, это только первая версия, и разработчики браузеров с авторами спецификации до сих пор обсуждают это всё. Самое серьезное, что я заметил, пока экспериментировал с этим — невозможность адаптировать траекторию к разным размерам экрана/контейнера.

Траектории просто создаются, как определены. При работе с SVG мы получаем гибкость благодаря разным системам координат и атрибутам для контейнера (напр. viewBox). C Motion Path, определеямыми в CSS, размер траектории нельзя дополнительно изменить или ограничить другими свойствами. Ширина и высота, определённые для элемента, применяются к самому элементу, а не к его траектории движения. Можно воспользоваться медиазапросами и определить разные траектории для разных условий, но задать их гибко с помощью свойств motion пока невозможно.

Заключение и следующая серия

Мы еще посмотрим, куда вырулит спецификация, но пока интересно опробовать это и посмотреть, чем она может нас порадовать (и чем не может). Я собираю коллекцию демо-примеров с Motion Path, найденных на CodePen, и у Эрика Виллигерса (отвечающего за задачу по ее реализации в команде разрабочиков Chrome) есть Google Doc с примерами.

В следующий раз мы закончим эту серию статей, резюмируя, что мы обсудили, и коснемся нескольких тем, существующих пока только в спецификации.

Поглядите остальные статьи из этой серии:

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

1 комментарий

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.