Nobīdes ceļš - CSS-triki | CSS almanahs 2025

Šis īpašums sāka dzīvot kā motion-path. Šis un visi citi saistītie kustības * rekvizīti tiek pārdēvēti par nobīdi *. Mēs mainām nosaukumus šeit almanahā. Ja vēlaties to izmantot tūlīt, iespējams, vislabāk izmantot abas sintakses.

offset-pathĪpašums CSS definē kustību ceļu elementu sekot animāciju laikā. Lūk, piemērs, izmantojot SVG ceļa sintaksi:

.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"); )

Šo rekvizītu nevar animēt, drīzāk tas nosaka animācijas ceļu. Mēs izmantojam motion-offsetīpašumu, lai izveidotu animāciju. Šeit ir vienkāršs kustības nobīdes animēšanas piemērs ar @keyframes animāciju:

.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 */ ) )

Skatiet pildspalvas vienkāršo piemēru animācijai pa ceļu, izmantojot CSS-Tricks (@ css-tricks) vietnē CodePen.

Šajā demonstrācijā oranžais aplis tiek animēts gar offset-pathCSS iestatīto. Mēs faktiski uzzīmējām šo ceļu SVG ar tieši tādiem pašiem path()datiem, bet tas nav nepieciešams, lai iegūtu kustību.

Pieņemsim, ka dažās SVG rediģēšanas programmatūrās mēs uzzīmējām šādu bailīgu ceļu:

Mēs atrastu tādu ceļu kā:

dAtribūta vērtība ir tas, ko mēs esam pēc tam, un mēs varam pārvietot to taisni CSS un izmantot to kā offset-path:

Skatiet CSS-Tricks (@ css-tricks) Pen Pen zEpLRo.

Ceļa sintaksē ņemiet vērā bezvienības vērtības. Ja CSS lietojat SVG elementam, šajās koordinātu vērtībās tiks izmantota tajā SVG iestatītā koordinātu sistēma viewBox. Ja kustību lietojat citam HTML elementam, šīs vērtības būs pikseļi.

Ņemiet vērā arī to, ka mēs izmantojām pirksta grafiku, kas norāda, kā elements tiek automātiski pagriezts, lai tas būtu vērsts uz priekšu. To var kontrolēt, izmantojot 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 */ )

Vērtības

Cik labi mēs varam pateikt, path()un tās noneir vienīgās darba vērtības offset-path.

offset-pathĪpašums ir paredzēts pieņemt visus šādas vērtības.

path(): Norāda ceļu SVG koordinātu sintaksē
url: Atsauces uz SVG elementa ID, kas jāizmanto kā kustības ceļš
basic-shape: Norāda formu saskaņā ar CSS Shapes specifikāciju, kas ietver:
- circle()
- ellipse()
- inset()
- polygon()
Clippy, starp citu, ir lielisks rīks, lai ģenerētu pamata formas vērtības.
none: Nenorāda kustības ceļu vispār

Šeit ir daži testi:

Skatiet CSS-Tricks (@ css-tricks) pildspalvas kustības ceļa vērtību testu vietnē CodePen.

url()Šķiet, ka pat teikt, ka SVG elementam ir atsauce uz ceļu, kurā noteikts tas pats SVG, izmantojot .

Ar Web Animations API

Dens Vilsons dažus no tiem izpētīja sadaļā Nākotnes izmantošana: CSS kustības ceļi. Jums ir piekļuve visiem šiem pašiem sīkumiem JavaScript, izmantojot Web Animations API. Piemēram, pieņemsim, ka offset-pathCSS esat definējis a , joprojām varat kontrolēt animāciju, izmantojot JavaScript:

Skatiet CSP-Tricks Pen CSS MotionPath (@ css-tricks) vietnē CodePen.

Vairāk piemēru

Galvas augšā! Daudzi no tiem tika izveidoti pirms pārejas no kustības * nosaukšanas uz nobīdi *. Vajadzētu būt diezgan viegli tos salabot, ja esat tik tiecies.

Redzi Pen Whoosh! autors Merihs Akar (@merih) vietnē CodePen.

Skatiet Eric Willigers (@ericwilligers) Pen pJarJO vietnē CodePen.

Skatiet Ksešo (@Kseso) vietnē CodePen Pen scalextric automašīnu kustības ceļā.

Skatiet Ali Kleina (@AliKlein) Pen CSS kustības ceļa lidmašīnu vietnē CodePen.

Skatiet Pen CSS Animate on SVG Path, ko 一丝 (@yisi) vietnē CodePen.

Skatiet Dan Wilson (@danwilson) pildspalvas kustības ceļa bezgalību vietnē CodePen.

Skatiet Dena Vilsona (@danwilson) Pen CSS kustības ceļa spirāli vietnē CodePen.

Skatiet z (@yisi) pildspalvu zGzJYd vietnē CodePen.

Pārlūkprogrammas atbalsts

Šīs offset-pathrakstīšanas laikā īpašums joprojām tiek uzskatīts par eksperimentālu funkciju. Ja pašreizējais pārlūkprogrammas atbalsta trūkums liek jums vilcināties ar tā izmantošanu projektā, iespējams, vēlēsities apsvērt iespēju izmantot GSAP šim animācijas līmenim, ko Sāra apskata arī savā ziņā. Tas jums šobrīd piedāvās visplašāko pārlūka atbalstu.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
46	72	Nē	79	Nē

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	Nē

Sākot ar pārlūku Chrome 46 un Opera 33 (un ar to saistītajām mobilajām versijām), mums ir “sākotnējais atbalsts” Blink (nav karodziņa).

Vai ir kāds cits veids, kā to izdarīt?

Mūsu pašu Sāra Drasnere rakstīja par SMIL, SVG vietējo metodi animācijām, un par to, kā animateMotiontiek izmantoti, lai animētu objektus pa SVG ceļu. Tas izskatās:

Bet SMIL tiek novecots! Tāpēc tas nav ieteicams.

GreenSock ir vēl viens veids, lai gan tas ir ieteicams. Sāra par to runā GSAP + SVG enerģijas lietotājiem: kustība pa ceļu (SVG nav nepieciešama). Piemērs:

Skatiet Sara Drasnera (@sdras) vietnē CodePen izmantoto pildspalvu demonstrāciju, lai uzzinātu, kā autoRotate true / false.