A JavaScript az utolsó módszer az SVG animálására. Megnéztük a CSS-t, amely remek és nagyon kényelmes, de nem képes számos SVG tulajdonságot elvégezni, amelyet érdemes lehet animálni. Ezután megnéztük a SMIL-t, amely egy deklaratív szintaxis közvetlenül az SVG-kódban, amely erősebb abban, hogy több dolgot animálhat, beleértve az elem alakját is.
A JavaScript mindent megtehet ezek közül, és jól is. Csak annak ára kerül, hogy valóban bonyolult kódot írjon maga, vagy egy könyvtár rezsije, amely segít. De ha elindult, a szintaxis valóban csodálatos és barátságos lehet az animációkkal szemben, és a teljesítmény valóban csúcsminőségű lehet.
A JavaScript előnye az SVG-animációk számára a támogatás. Rengeteg furcsaságot kell aggódni az SVG animálása közben. Néhány böngésző nem támogatja az elemek átalakítását. Néhány böngésző furcsa dolgokat végez az oldal nagyításával. Néhányan nincsenek összhangban az átalakulás eredetével. A JavaScript könyvtárak gyakran segítenek ezekben a problémákban.
Míg kifejezetten az animációról beszélünk, sok JavaScript SVG könyvtár általában az SVG-vel való együttműködésről szól. Létrehozhatnak és manipulálhatnak, hozzáférhetnek az elem tulajdonságaihoz, megváltoztathatják őket, stb. Olyanok, mint egy erősebb API hozzáadása az SVG-hez.
Snag.svg - „jQuery az SVG számára”
Alapvető példa a Snap.svg használatára:
Lásd Chris Coyier (@chriscoyier) Pen BhHix-jét a CodePen-en.
Egy másik dolog, amit ebben a videóban a Snap.svg-vel tettünk, az, hogy ezt a CSS animációs tollat Snap.svg-vé alakítottuk át, és megtanított minket arra, hogy a Snap.svg-t arra használhatjuk, hogy már az oldalon lévő inline SVG-vel dolgozzunk. Az Adobe számos példát gyűjtött össze.
Raphael - régebbi könyvtár ugyanattól az alkotótól, mint a Snap.svg
SVG.js - „Könnyű könyvtár az SVG manipulálására és animálására.” Itt van az óra bemutató, amelyet megnéztünk, bemutatva, hogyan működnek ezek az animációk a DOM gyors manipulálásával.
D3.js - „A D3.js egy JavaScript könyvtár, amely adatok alapján manipulálja a dokumentumokat. A D3 segít az adatok életre hívásában HTML, SVG és CSS segítségével. ” Itt van egy oktatóanyag az SVG létrehozásának megkezdéséről, és egy másik bemutató animáció.
GreenSock - „Rendkívül nagy teljesítményű, professzionális minőségű animáció a modern internet számára.” A GreenSock általában az internetes animációkról szól, de támogatja az SVG-t. Itt van egy toll, ahol láthatja, hogyan működik.
Velocity.js - „Gyorsított JavaScript-animáció.” Szintén egy könyvtár az interneten található animációról általában, amely véletlenül támogatja az SVG-t. Julian Shapiro készítette, és arról írt, hogy a JavaScript-animáció miért lehet a legjobban teljesítő animációs stílus, valamint a Velocity.js működéséről. Itt van egy nagyon egyszerű bemutató, amely animál néhány SVG-specifikus tulajdonságot.
Java-animációkkal is szabadon megteheti magát egy keretrendszer segítsége nélkül. Ne feledje, hogy az inline SVG a DOM-ban található, így az összes szokásos DOM API-dolog elérhető az Ön számára. Olyan, mint te, mennyire nincs szükséged a jQuery-re a DOM-mal való együttműködéshez, ez csak gyakran megkönnyíti. Itt egy példa, amely a maga módján csinálja a dolgokat, ami nagyon érdekes.