Зміщений шлях - CSS-хитрощі

Ця властивість почала життя як motion-path. Це та всі інші пов’язані з ним властивості руху * перейменовані в зміщення * у специфікації. Ми міняємо імена тут, в альманасі. Якщо ви хочете використовувати його прямо зараз, можливо, найкраще використовувати обидва синтаксиси.

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-Tricks (@ css-tricks) на CodePen.

У цій демонстрації помаранчевий круг анімується вздовж того, що offset-pathми встановили в CSS. Ми насправді намалювали цей шлях у SVG з точно такими ж path()даними, але це не потрібно, щоб отримати рух.

Скажімо, ми намалювали такий забавний шлях у деяких програмах для редагування SVG:

Ми знайшли би такий шлях:

Значення dатрибута - це те, що ми шукаємо, і ми можемо перенести його прямо в CSS і використовувати як offset-path:

Див. Pen zEpLRo by 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.

url()Здається, навіть не вдається сказати елементу SVG посилання на шлях, який визначає той самий SVG .

За допомогою API веб-анімації

Ден Вілсон дослідив деякі з них у "Майбутнє використання: Шляхи руху CSS". Ви маєте доступ до всіх цих самих речей у JavaScript через API веб-анімацій. Наприклад, скажімо, ви визначили а offset-pathв CSS, ви все ще можете керувати анімацією за допомогою JavaScript:

Див. Pen CSS MotionPath від CSS-Tricks (@ css-tricks) на CodePen.

Більше прикладів

Вгору! Багато з них були створені до переходу від іменування руху * до зміщення *. Виправити їх, якщо ви так схильні, повинно бути досить просто.

Дивіться Pen Whoosh! Мерих Акар (@merih) на CodePen.

Дивіться Pen pJarJO Еріка Віллігерса (@ericwilligers) на CodePen.

Подивіться автомобіль Pen scalextric на шляху руху Ксесо (@Kseso) на CodePen.

Подивіться на літак Pen CSS Motion Path Air by Ali Klein (@AliKlein) на CodePen.

Дивіться Pen CSS Animate на SVG Path від 一丝 (@yisi) на CodePen.

Дивіться Pen Motion Path Infinity від Dan Wilson (@danwilson) на CodePen.

Дивіться ручку CSS Motion Spiral від Dan Wilson (@danwilson) на CodePen.

Дивіться Ручку zGzJYd від 一丝 (@yisi) на CodePen.

Підтримка браузера

На offset-pathмомент написання статті властивість досі вважається експериментальною особливістю. Якщо нинішня відсутність підтримки браузера змушує вас вагатися використовувати її в проекті, то, можливо, ви захочете використати GSAP для цього рівня анімації, про що Сара також розповідає у своєму дописі. Це запропонує вам найширшу підтримку браузера на даний момент.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome	Firefox	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 від Sarah Drasner (@sdras) на CodePen