Смещение-путь - CSS-хитрости

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

offset-pathСвойство в CSS определяет путь движения для элемента , чтобы следовать во время анимации. Вот пример использования синтаксиса пути SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Это свойство нельзя анимировать, оно определяет путь для анимации. Мы используем motion-offsetсвойство для создания анимации. Вот простой пример анимации смещения движения с помощью анимации @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

См. Простой пример анимации вдоль контура с помощью CSS-приемов (@ css-tricks) на CodePen.

В этой демонстрации оранжевый кружок анимируется в соответствии с offset-pathнастройками CSS. На самом деле мы нарисовали этот путь в SVG с теми же path()данными, но это не обязательно для получения движения.

Допустим, мы нарисовали такой забавный путь в каком-то программном обеспечении для редактирования SVG:

Мы бы нашли такой путь:

Значение dатрибута - это то, что нам нужно, и мы можем переместить его прямо в CSS и использовать как offset-path:

См. Pen zEpLRo от CSS-Tricks (@ css-tricks) на CodePen.

Обратите внимание на безразмерные значения в синтаксисе пути. Если вы применяете CSS к элементу в SVG, эти значения координат будут использовать систему координат, установленную в этом SVG viewBox. Если вы применяете движение к какому-либо другому элементу HTML, эти значения будут пикселями.

Также обратите внимание, что мы использовали рисунок с указанием пальца, чтобы показать, как элемент автоматически поворачивается так, что он смотрит вперед. Вы можете контролировать это с помощью offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Значения

Как лучше всего, как мы можем сказать, path()и noneявляются только рабочие значения offset-path.

Предполагается, что offset-pathсвойство принимает все следующие значения.

path(): Указывает путь в синтаксисе координат SVG
url: Ссылка на идентификатор SVG-элемента, который будет использоваться в качестве пути перемещения.
basic-shape: Определяет форму в соответствии со спецификацией CSS Shapes, которая включает:
- circle()
- ellipse()
- inset()
- polygon()
Кстати, Clippy - отличный инструмент для создания значений Basic Shape.
none: Указывает, что траектория движения отсутствует

Вот несколько тестов:

См. Тест значений пути движения пера от CSS-Tricks (@ css-tricks) на CodePen.

Даже указание элементу SVG ссылаться на путь, определенный тем же SVG url(), не работает.

С помощью API веб-анимации

Дэн Уилсон исследовал некоторые из них в книге «Использование в будущем: пути движения CSS». У вас есть доступ ко всему этому же материалу в JavaScript через API веб-анимации. Например, если вы определили a offset-pathв CSS, вы все равно можете управлять анимацией с помощью JavaScript:

См. Pen CSS MotionPath от CSS-Tricks (@ css-tricks) на CodePen.

Больше примеров

Берегись! Многие из них были созданы до перехода от наименования motion- * к offset- *. Их будет довольно легко исправить, если вы так склонны.

Смотрите Pen Whoosh! пользователя Merih Akar (@merih) на CodePen.

См. Pen pJarJO Эрика Виллигерс (@ericwilligers) на CodePen.

Посмотрите на модель Pen scalextric car on motion-path Ксесо (@Kseso) на CodePen.

См. Pen CSS Motion Path Airplane от Али Кляйна (@AliKlein) на CodePen.

См. Pen CSS Animate on SVG Path от 一丝 (@yisi) на CodePen.

Смотрите Pen Motion Path Infinity Дэна Уилсона (@danwilson) на CodePen.

См. Статью Дэна Уилсона (@danwilson), написанную Дэном Уилсоном (@danwilson), на CodePen.

Смотрите Pen zGzJYd от 一丝 (@yisi) на CodePen.

Поддержка браузера

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

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

Рабочий стол

Хром	Fire Fox	IE	Край	Сафари
46	72	Нет	79	Нет

Мобильный / планшет

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81 год	Нет

Что касается Chrome 46 и Opera 33 (и связанных с ними мобильных версий), у нас есть «начальная поддержка» в Blink (без флага).

Есть другой способ сделать это?

Наша собственная Сара Драснер писала об SMIL, собственном методе SVG для анимации, и о том, как animateMotionон используется для анимации объектов по пути SVG. Это выглядит как:

Но SMIL устарел! Так что это не рекомендуется.

GreenSock - это другой способ, который рекомендуется. Сара рассказывает об этом в GSAP + SVG для опытных пользователей: движение по пути (SVG не требуется). Пример:

См. Демонстрацию пера для autoRotate true / false от Сары Драснер (@sdras) на CodePen.