Put pomicanja - CSS-trikovi

Anonim

Ovo je svojstvo započelo život kao motion-path. Ovo i sva ostala srodna svojstva pokreta- * u specifikaciji se preimenuju u offset- *. Mijenjamo imena ovdje u almanahu. Ako ga želite koristiti odmah, vjerojatno najbolje koristiti obje sintakse.

offset-pathNekretnina u CSS definira put kretanja za element slijediti tijekom animacije. Evo primjera korištenja sintakse SVG puta:

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

Ovo se svojstvo ne može animirati, već definira put za animaciju. motion-offsetSvojstvo koristimo za izradu animacije. Evo jednostavnog primjera animiranja pomicanja kretanja s @keyframes animacijom:

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

Pogledajte olovku Jednostavni primjer animiranja putem putem CSS-trikova (@ css-trikovi) na CodePenu.

U ovoj demonstraciji narančasti krug animiran je duž offset-pathCSS-a. Zapravo smo taj put u SVG-u nacrtali s potpuno istim path()podacima, ali to nije nužno za pokretanje.

Recimo da smo povukli takav put u ovom SVG softveru za uređivanje:

Pronašli bismo put poput:

Vrijednost datributa je ono za čim tragamo, a možemo je premjestiti ravno u CSS i koristiti kao offset-path:

Pogledajte olovku zEpLRo by CSS-Tricks (@ css-tricks) na CodePenu.

Obratite pažnju na jedinice bez vrijednosti u sintaksi puta. Ako primjenjujete CSS na element unutar SVG-a, te će koordinatne vrijednosti koristiti koordinatni sustav postavljen unutar tog SVG-a viewBox. Ako primjenjujete pokret na neki drugi HTML element, te će vrijednosti biti pikseli.

Također imajte na umu da smo koristili grafiku koja pokazuje prstom kako bismo pokazali kako se element automatski rotira tako da je nekako okrenut prema naprijed. To možete kontrolirati pomoću 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 */ )

Vrijednosti

Koliko najbolje možemo reći path()i nonejedine su radne vrijednosti za offset-path.

offset-pathObjekt se trebao prihvatiti sve sljedeće vrijednosti.

  • path(): Navodi put u sintaksi koordinata SVG
  • url: Referencira ID SVG elementa koji će se koristiti kao put kretanja
  • basic-shape: Određuje oblik u skladu sa specifikacijom CSS Shapes, koja uključuje:
    • circle()
    • ellipse()
    • inset()
    • polygon()

    Inače, Clippy je sjajan alat za generiranje vrijednosti Basic Shape.

  • none: Određuje uopće put kretanja

Evo nekoliko testova:

Pogledajte test vrijednosti kretanja olovke pomoću CSS-Tricks (@ css-tricks) na CodePen-u.

url()Čini se da čak i kazivanje SVG elementu da uputi put definiran isti SVG putem ne djeluje.

Uz API za web animacije

Dan Wilson istražio je nešto od toga u Future Use: CSS Motion Paths. Svim tim istim stvarima imate pristup u JavaScript-u putem API-ja za web animacije. Na primjer, recimo da ste definirali offset-pathCSS, i dalje možete kontrolirati animaciju putem JavaScript-a:

Pogledajte Pen CSS MotionPath by CSS-Tricks (@ css-tricks) na CodePenu.

Još primjera

Glavu gore! Mnogo ih je stvoreno prije promjene s imenovanja u pomicanju * u pomak *. Trebalo bi ih prilično lako popraviti ako ste toliko skloni.

Pogledajte Pen Whoosh! Merih Akar (@merih) na CodePenu.

Pogledajte Pen pJarJO Erica Willigersa (@ericwilligers) na CodePenu.

Pogledajte automobil Pen scalextric na putu kretanja Ksesa (@Kseso) na CodePenu.

Pogledajte Pen CSS Motion Path Airplane, autora Ali Klein (@AliKlein) na CodePenu.

Pogledajte Pen CSS Animate na SVG putu od by (@yisi) na CodePenu.

Pogledajte Pen Motion Path Infinity, autora Dan Wilson (@danwilson) na CodePen.

Pogledajte Spirala putanje olovke CSS, autora Dan Wilson (@danwilson) na CodePenu.

Pogledajte Olovku zGzJYd od 一丝 (@yisi) na CodePenu.

Podrška preglednika

offset-pathNekretnina još uvijek smatra Eksperimentalna značajka u vrijeme pisanja ovog teksta. Ako vas trenutni nedostatak podrške za preglednik oklijeva koristiti je na projektu, možda biste trebali razmisliti o korištenju GSAP-a za ovu razinu animacije, što Sarah također pokriva u svom postu. Ovo će vam ponuditi trenutno najširu podršku za preglednike.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
46 72 Ne 79 Ne

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ne

Od Chromea 46 i Opere 33 (i srodnih mobilnih verzija) imamo "početnu podršku" u Blink-u (bez zastavice).

Postoji li još jedan način za to?

Naša vlastita Sarah Drasner napisala je o SMIL, SVG-ovoj izvornoj metodi za animacije i o tome kako animateMotionse koristi za animiranje objekata duž SVG puta. Izgleda kao:

Ali SMIL je zastario! Dakle, ovo se ne preporučuje.

GreenSock je ipak drugi način koji se preporučuje. Sarah govori o tome u GSAP + SVG-u za napredne korisnike: kretanje duž puta (SVG nije potreban). Primjer:

Pogledajte demo olovke za autoRotate true / false autorice Sarah Drasner (@sdras) na CodePen-u.

dodatne informacije

  • Spec.: Modul puta kretanja razina 1 Spec
  • Zbirka primjera na CodePenu
  • Buduća upotreba: CSS Motion Paths, Dan Wilson
  • Putovi kretanja - prošlost, sadašnjost i budućnost Cassie Evans
  • WebKit ulaznica # 139128
  • Ulaznica za Mozilla # 1186329
  • Zahtjev za značajku Microsoft Edge
  • Status Chrome platforme: CSS put kretanja i uzorak
  • MDN: kretanje (veze do ostalih srodnih svojstava)