23. ábra: SVG animálása SMIL-lel - CSS-trükkök

Anonim

Annak ellenére, hogy az SVG CSS-sel történő animálása kényelmesebb lehet az átlagos kezelőfelület számára, az SVG-nek van egy másik módja az animáció beépítésére közvetlenül az SVG szintaxisába. Pontosan ezzel foglalkozunk röviden ebben a videóban, de ha egy teljes útmutatót szeretne, mindenképpen nézze meg Sara Soueidan A Guide to SVG Animations (SMIL) című cikkét itt, a CSS-Tricks oldalon.

A SMIL rövidítése a szinkronizált multimédia integrációs nyelv. Ahogy megértem, ez önmagában egy „dolog”, ami történetesen beépül az SVG-be. De az SVG-nek vannak saját SMIL-szerű kiegészítései. Csak az egészet SMIL-nek fogom nevezni, bár biztos vagyok benne, hogy néha technikailag hibás vagyok.

Nagyon egyszerű animációk esetén nem sok mindegy, hogy SMIL-ben vagy CSS-ben csinálod-e, ugyanazt a dolgot fogja megtenni ugyanolyan nehézségi fokon. Néhány dolog még könnyebb lehet a CSS-ben. De itt van néhány dolog, ahol a SMIL az út:

  • Animálnia kell valamit, amelyhez a CSS nem fér hozzá. Mint egy sokszög vagy út alakja.
  • A használni kívánt események befolyásolják az animáció, mint egy clickvagy mouseover, vagy valami.
  • Additív animációkat szeretne megtenni, például animálni bárhonnan, ahol most újabb x pixel van.
  • Olyan animációkat szeretne, amelyek közvetlenül kapcsolódnak más animációkhoz, például amikor az animáció befejeződik, indítsa el ezt a következő animációt (az időtartam manuális manipulálása nélkül).
  • Biztos vagyok benne, hogy vannak még.

A szintaxis eleinte félelmetesnek érzi magát, de ígérem, nagyon egyszerű. Itt egy alapvető példa:

Lásd Chris Coyier (@chriscoyier) Pen jAipI-t a CodePen-en.

A "forma morfondírozás" nagyon szuper egyedülálló a SMIL-nél, ezért itt van egy jobb példa, mint a furcsa, amelyet a videóban tettünk:

Lásd Chris Coyier (@chriscoyier) Pen Shape Morph gombját a CodePen-en.

Ebben a bemutatóban az eseményeket a SMIL helyett a JavaScript kezeli. Csak jó tudni, hogy te is meg tudod csinálni. A SMIL eseményindítók jóak, de akkor a kattintásra szoruló dolognak abban az SVG-ben kell lennie, nem pedig bárhol máshol a DOM-ban.