Офсетов път - CSS-трикове

Този имот започна живот като motion-path. Това и всички други свързани с него свойства на движение се преименуват на 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-трикове) на 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.

Дори да кажем на SVG елемент да се позовава на път, дефинирал същия SVG url(), изглежда не работи.

С API за уеб анимации

Дан Уилсън изследва част от това в Future Use: CSS Motion Paths. Имате достъп до всички тези същите неща в JavaScript чрез API за уеб анимации. Например, да речем, че сте дефинирали offset-pathв CSS, пак можете да контролирате анимацията чрез JavaScript:

Вижте Pen CSS MotionPath от CSS-Tricks (@ css-tricks) на CodePen.

Още примери

Внимание! Много от тях бяха създадени преди промяната от движение- * именуване към отместване- *. Трябва да е доста лесно да ги поправите, ако сте толкова склонни.

Вижте Pen Whoosh! от Мерих Акар (@merih) в CodePen.

Вижте Pen pJarJO от Eric Willigers (@ericwilligers) на CodePen.

Вижте автомобила Pen scalextric на пътя на движение от Kseso (@Kseso) на CodePen.

Вижте самолета Pen CSS Motion Path от Ali Klein (@AliKlein) на CodePen.

Вижте Pen CSS Animate на SVG Path от 一丝 (@yisi) на CodePen.

Вижте Pen Motion Path Infinity от Дан Уилсън (@danwilson) на CodePen.

Вижте Pen CSS Motion Path 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.