# 135: Három út az SVG animálásához - CSS-trükkök

Anonim

Az SVG animálása kissé egyedülálló abban a tekintetben, hogy három különféle módon lehet megközelíteni az animációt.

1. Animáció CSS ​​@ kulcskeretekkel

Az SVG elemek megcélozhatók és stílusozhatók CSS-sel. Vagyis animációt alkalmazhat a @keyframes segítségével. Mint ez:

 
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )

Választhatja ezt az animációt, ha…

  • Az animáció meglehetősen egyszerű.
  • Csak azokat a tulajdonságokat kell animálnia, amelyeket a CSS képes animálni.
  • Már ismeri és jól érzi magát a CSS animációkkal.

2. Animáció a SMIL segítségével

Van egy szintaxis az SVG-be beépített animációk számára. Íme egy nagyon egyszerű példa:

Itt van egy nagy bemutató a SMIL-ről.

Választhatja ezt az animációt, ha…

  • Olyan tulajdonságokat kell animálnia, amelyekre a CSS nem képes, mint például maga az alakzat.
  • Szüksége van további SMIL-funkciókra, például egy animáció megkezdésére, amikor egy másik befejeződik az időtartamok / késések kézi szinkronizálása nélkül. Vagy interakciós dolgok, például animáció indítása egy kattintásra.

3. Animáció JavaScript használatával

A JavaScript használatával hozzáférhet olyan dolgokhoz, mint a requestAnimationFrame (vagy más hurkok), így animálhat csak a gyorsan változó tulajdonságértékek segítségével. Vannak olyan keretek is az SVG-vel való együttműködéshez, amelyekbe általában animációs dolgok vannak beépítve. Vagy animációs keretek, amelyek együttműködnek az SVG-vel. Mint a SnapSVG, a GreenSock, az SVG.js vagy a Velocity.js.

Íme egy példa a SnapSVG-re:

 
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);

Választhatja ezt az animációt, ha…

  • Egyébként a JavaScript-en dolgozik, talán az animációja a JSON-nal vagy hasonlóval kapott adatokhoz kapcsolódik.
  • Amúgy szüksége van a JavaScript-re, mert szüksége van a logikára vagy a matematikára, vagy valami másra, ami valóban csak ott lehetséges.
  • Érdekli, hogy a JavaScript megoldjon néhány hibát az Ön számára.
  • Az animáció hatóköre meglehetősen nagy / bonyolult, és szükség van az absztrakcióra és a JavaScript által biztosított szervezésre.

Demó

Lásd Chris Coyier (@chriscoyier) tollának három módja az SVG animálására a CodePen-en.

Nem befolyásolja-e a lehetőségeit az, hogy végül hogyan használja az SVG-t?

Igen. Ha SVG-as- t használ , akkor nem használhatja egy másik stíluslap CSS-animációit. De Ön SMIL. Az animációk működni fognak bizonyos böngészőkben (az írás idején a Chrome igen, a Firefox nem). Nem lennék meglepve, ha az SVG fájlokba beágyazott CSS működne vagy működni fog egyszer. JavaScript, valószínűleg nem.

Ha az SVG-t CSS háttérképben használja, akkor elképzelhető, hogy hasonló történet, mint a fentiekben.

Ha inline-t használ , minden lehetőség nyitva áll előtted.

Ha az SVG-t egy objectvagy -on keresztül használja iframe, akkor a szkripteket / stílusokat közvetlenül be kell ágyaznia az SVG-be, hogy működjön.