Pot odmika - CSS-triki

Anonim

Ta lastnost je začela življenje kot motion-path. Ta in vse druge povezane lastnosti gibanja * se v specifikaciji preimenujejo v offset- *. Tukaj v almanahu spreminjamo imena. Če jo želite uporabiti zdaj, je verjetno najbolje, da uporabite obe sintaksi.

offset-pathHotel v CSS definira pot gibanja za element slediti med animacijo. Tu je primer uporabe sintakse poti 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"); )

Te lastnosti ni mogoče animirati, temveč definira pot do animacije. Uporabljamo motion-offsetpremoženja za ustvarjanje animacije. Tu je preprost primer animiranja premika gibanja z animacijo @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 */ ) )

Oglejte si preprost primer peresa s pomočjo CSS-trikov (@ css-triki) na CodePen.

V tej predstavitvi je oranžni krog animiran vzdolž offset-pathnastavljenega v CSS. To pot smo v SVG dejansko narisali s popolnoma enakimi path()podatki, vendar to ni potrebno, da bi dobili predlog.

Recimo, da smo v neki programski opremi za urejanje SVG narisali tako zabavno pot:

Našli bi pot, kot je:

Vrednost datributa je tisto, za čimer iščemo in jo lahko premaknemo naravnost v CSS in uporabimo kot offset-path:

Oglejte si Pen zEpLRo by CSS-Tricks (@ css-tricks) na CodePen.

Upoštevajte vrednosti brez enot v sintaksi poti. Če CSS uporabljate za element znotraj SVG, bodo te koordinatne vrednosti uporabile koordinatni sistem, nastavljen znotraj teh SVG viewBox. Če gib uporabljate za drug element HTML, bodo te vrednosti slikovne pike.

Upoštevajte tudi, da smo uporabili grafiko s prstom, ki kaže, da pokažemo, kako se element samodejno zavrti, tako da je nekako obrnjen naprej. To lahko nadzirate z 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 */ )

Vrednote

Kolikor najbolje lahko ugotovimo, path()in noneso edine delovne vrednote za offset-path.

offset-pathPremoženje naj bi sprejeli vse naslednje vrednosti.

  • path(): Podaja pot v sintaksi koordinat SVG
  • url: Sklicuje se na ID elementa SVG, ki se uporablja kot pot gibanja
  • basic-shape: Določa obliko v skladu s specifikacijo CSS Shapes, ki vključuje:
    • circle()
    • ellipse()
    • inset()
    • polygon()

    Clippy je mimogrede izjemno orodje za ustvarjanje vrednosti Basic Shape.

  • none: Podaja nobene poti gibanja

Tu je nekaj testov:

Oglejte si test vrednosti gibanja peresa s strani CSS-Tricks (@ css-tricks) na CodePen.

url()Zdi se, da tudi povedati elementu SVG, naj se sklicuje na pot, ki je definirala isti SVG, prek ne deluje.

Z API-jem za spletne animacije

Dan Wilson je nekaj tega raziskal v Prihodnji uporabi: Pot gibanja CSS. Do vseh teh istih stvari imate dostop v JavaScript prek API-ja za spletne animacije. Recimo, da ste offset-pathv CSS definirali , da lahko animacijo še vedno nadzirate prek JavaScripta:

Oglejte si Pen CSS MotionPath by CSS-Tricks (@ css-tricks) na CodePen.

Več primerov

Glave gor! Veliko teh je bilo ustvarjenih pred spremembo poimenovanja motion-* v offset- *. Če bi bili tako naklonjeni, bi jih bilo enostavno popraviti.

Glej Pen Whoosh! avtor Merih Akar (@merih) na CodePen.

Oglejte si Pen pJarJO Eric Willigers (@ericwilligers) na CodePen.

Oglejte si avtomobil Pen scalextric na poti gibanja Kseso (@Kseso) na CodePen.

Oglejte si Pen CSS Motion Path Airplane avtorja Ali Klein (@AliKlein) na CodePen.

Oglejte si Pen CSS Animate na poti SVG avtorja 一丝 (@yisi) na CodePen.

Oglejte si Pen Motion Path Infinity avtorja Dan Wilson (@danwilson) na CodePen.

Oglejte si svinčnik Pen CSS Motion Path Dan Wilson (@danwilson) na CodePen.

Oglejte si Pen zGzJYd by 一丝 (@yisi) na CodePen.

Podpora brskalnika

V offset-pathčasu pisanja tega besedila lastnost še vedno velja za eksperimentalno značilnost. Če vas trenutno pomanjkanje podpore brskalnika omahuje pri uporabi projekta, boste morda želeli razmisliti o uporabi GSAP za to raven animacije, ki jo v svojem prispevku zajema tudi Sarah. To vam bo ponudilo trenutno najširšo podporo za brskalnike.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
46 72 Ne 79 Ne

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ne

Od Chrome 46 in Opera 33 (in z njimi povezanih različic za mobilne naprave) imamo »začetno podporo« v Blink (brez zastavice).

Ali obstaja še en način za to?

Naša lastna Sarah Drasner je pisala o SMIL, naravni metodi SVG za animacije, in o tem, kako animateMotionse uporablja za animiranje predmetov po poti SVG. Izgleda:

Toda SMIL je zastarel! Torej to ni priporočljivo.

GreenSock pa je še en način, ki je priporočljiv. Sarah o tem govori v GSAP + SVG za izkušene uporabnike: gibanje po poti (SVG ni potreben). Primer:

Oglejte si predstavitev Pen za autoRotate true / false avtorice Sarah Drasner (@sdras) na CodePen.

Dodatne informacije

  • Spec: Modul poti gibanja Level 1 Spec
  • Zbirka primerov na CodePenu
  • Prihodnja uporaba: CSS Motion Paths, Dan Wilson
  • Gibalne poti - preteklost, sedanjost in prihodnost Cassie Evans
  • Vstopnica za WebKit # 139128
  • Vstopnica za Mozilla # 1186329
  • Zahteva za funkcijo Microsoft Edge
  • Stanje platforme Chrome: pot gibanja CSS in vzorec
  • MDN: gibanje (povezave do drugih povezanih lastnosti)