Ово својство је започело живот као motion-path. Ово и сва остала сродна својства покрета-* у спецификацији се преименују у оффсет- *. Мењамо имена овде у алманаху. Ако желите да је користите одмах, вероватно је најбоље да користите обе синтаксе.
offset-pathИмовина у ЦСС дефинише путању кретања за елемент на следећи начин током анимације. Ево примера коришћења синтаксе СВГ пута:
.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Својство користимо за креирање анимације. Ево једноставног примера анимирања померања кретања помоћу @кеифрамес анимације:
.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 */ ) )Погледајте оловку Једноставни пример анимирања дуж пута помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
У овој демонстрацији, наранџасти круг се анимира дуж offset-pathЦСС-а. Заправо смо тај пут нацртали у СВГ са потпуно истим path()подацима, али то није неопходно да бисмо добили покрет.
Рецимо да смо повукли овакав забаван пут у неком СВГ софтверу за уређивање:
Пронашли бисмо пут попут:
Вредност dатрибута је оно за чим трагамо и можемо је преместити право у ЦСС и користити као offset-path:
Погледајте оловку зЕпЛРо би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Обратите пажњу на јединице вредности у синтакси путање. Ако примењујете ЦСС на елемент унутар СВГ-а, те координатне вредности ће користити систем координата постављен унутар тих СВГ-а viewBox. Ако примењујете покрет на неки други ХТМЛ елемент, те вредности ће бити пиксели.
Такође имајте на уму да смо користили графику која показује прстом како бисмо показали како се елемент аутоматски ротира тако да је некако окренут напред. То можете контролисати помоћу 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(): Наводи путању у синтакси координата СВГurl: Позива се на ИД СВГ елемента који ће се користити као путања кретањаbasic-shape: Одређује облик у складу са спецификацијом ЦСС Схапес, која укључује:circle()ellipse()inset()polygon()
Цлиппи је, иначе, сјајан алат за генерисање вредности Басиц Схапе.
none: Одређује уопште путању кретања
Ево неколико тестова:
Погледајте тест вредности кретања оловке покрета компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
url()Чини се да чак и казивање СВГ елементу да упути путању која је дефинисала исти СВГ путем не делује.
Уз АПИ за веб анимације
Дан Вилсон је истражио нешто од тога у Будућој употреби: ЦСС Мотион Патхс. Имате приступ свим тим истим стварима у ЈаваСцрипт-у путем АПИ-ја за веб анимације. На пример, рецимо да сте дефинисали offset-pathЦСС, и даље можете да контролишете анимацију путем ЈаваСцрипт-а:
Погледајте оловку ЦСС МотионПатх компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Још примера
Главу горе! Много њих је створено пре промене са именовања у кретању * у померање *. Требало би их прилично лако поправити ако сте толико склони.
Погледајте Пен Вхоосх! од Мерих Акар (@мерих) на ЦодеПен.
Погледајте Пен пЈарЈО Ерица Виллигерса (@ерицвиллигерс) на ЦодеПен-у.
Погледајте аутомобил Пен сцалектриц на путу путање Ксесо (@Ксесо) на ЦодеПен-у.
Погледајте Пен ЦСС Мотион Патх Аирплане од Али Клеин-а (@АлиКлеин) на ЦодеПен-у.
Погледајте оловку ЦСС Анимате на СВГ путањи од 一丝 (@ииси) на ЦодеПен-у.
Погледајте Пен Мотион Патх Инфинити, аутора Дан Вилсон (@данвилсон) на ЦодеПен.
Погледајте спиралу путање оловке ЦСС покрета Ден Вилсон (@данвилсон) на ЦодеПен-у.
Погледајте оловку зГзЈИд од 一丝 (@ииси) на ЦодеПен-у.
Подршка прегледача
offset-pathИмовина се и даље сматра експериментална функција у време писања овог текста. Ако вас тренутни недостатак подршке за прегледач оклева да је користите у пројекту, можда бисте желели да размислите о употреби ГСАП-а за овај ниво анимације, што Сарах такође покрива у свом посту. Ово ће вам понудити тренутно најширу подршку за прегледаче.
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 46 | 72 | Не | 79 | Не |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | Не |
Од Цхроме 46 и Опера 33 (и сродних мобилних верзија) имамо „почетну подршку“ у Блинк-у (без заставице).
Постоји ли још један начин за то?
Наша сопствена Сарах Драснер писала је о СМИЛ, СВГ-овом изворном методу за анимације, и о томе како animateMotionсе користи за анимирање објеката дуж СВГ путање. Изгледа да:
Али СМИЛ се застарева! Дакле, ово се не препоручује.
ГреенСоцк је ипак други начин који се препоручује. Сарах говори о овоме у ГСАП + СВГ за напредне кориснике: кретање дуж пута (СВГ није потребан). Пример:
Погледајте демо оловке за аутоРотате труе / фалсе ауторице Сарах Драснер (@сдрас) на ЦодеПен-у.
Додатне Информације
- Спец.: Модул путање кретања нивоа 1 Спец
- Збирка примера на ЦодеПен-у
- Будућа употреба: ЦСС Мотион Патхс, Дан Вилсон
- Путови кретања - прошлост, садашњост и будућност, Цассие Еванс
- Улазница за ВебКит # 139128
- Мозилла Тицкет # 1186329
- Захтев за функцију Мицрософт Едге
- Статус Цхроме платформе: ЦСС путања кретања и узорак
- МДН: кретање (везе до осталих сродних својстава)