JavaScript to ostatni ze sposobów, które omówimy w animowaniu SVG. Przyjrzeliśmy się CSS, który jest świetny i całkiem wygodny, ale nie może wykonać wielu właściwości SVG, które warto animować. Następnie przyjrzeliśmy się SMIL, który jest deklaratywną składnią bezpośrednio w samym kodzie SVG, który jest potężniejszy, ponieważ może animować więcej rzeczy, w tym kształt samego elementu.
JavaScript może zrobić wszystko, co każdy z nich, i robi to dobrze. Po prostu kosztuje to samodzielne napisanie naprawdę skomplikowanego kodu lub koszt biblioteki, która ci pomoże. Ale kiedy już zaczniesz działać, składnia może być naprawdę wspaniała i przyjazna dla animacji, a wydajność może być naprawdę na najwyższym poziomie.
Kolejną zaletą korzystania z JavaScript dla animacji SVG jest obsługa. Jest wiele dziwactw, o które należy się martwić podczas animowania SVG. Niektóre przeglądarki nie obsługują przekształceń elementów. Niektóre przeglądarki robią dziwne rzeczy z powiększaniem strony. Niektóre są niezgodne z pochodzeniem z transformacji. Biblioteki JavaScript często pomagają w rozwiązaniu tych problemów.
Chociaż mówimy konkretnie o animacji, wiele bibliotek JavaScript SVG ogólnie zajmuje się pracą z SVG. Mogą go tworzyć i manipulować nimi, uzyskiwać dostęp do właściwości elementu, zmieniać je itp. Trochę jak dodanie bardziej niezawodnego API do SVG.
Snag.svg - „jQuery for SVG”
Podstawowy przykład użycia Snap.svg:
Zobacz Pen BhHix autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Kolejną rzeczą, którą zrobiliśmy w tym filmie z Snap.svg, jest przekonwertowanie tej animacji CSS Pen do Snap.svg, ucząc nas, że możemy używać Snap.svg do pracy z wbudowanym SVG już na stronie. Firma Adobe sama zebrała wiele przykładów.
Raphael - starsza biblioteka tego samego twórcy co Snap.svg
SVG.js - „Lekka biblioteka do manipulowania i animowania plików SVG”. Oto demo zegara, któremu przyjrzeliśmy się, pokazujące, jak działają te animacje poprzez szybkie manipulowanie DOM.
D3.js - „D3.js to biblioteka JavaScript do manipulowania dokumentami na podstawie danych. D3 pomaga ożywić dane za pomocą HTML, SVG i CSS ”. Oto samouczek dotyczący rozpoczęcia tworzenia SVG za jego pomocą i kolejne wprowadzenie do animacji za jego pomocą.
GreenSock - „Ultra wysokowydajna, profesjonalna animacja dla nowoczesnej sieci”. GreenSock dotyczy ogólnie animacji w Internecie, ale obsługuje format SVG. Oto pióro, w którym możesz zobaczyć, jak to działa.
Velocity.js - „Przyspieszona animacja JavaScript”. Również biblioteka o animacjach w Internecie w ogóle, która obsługuje SVG. Julian Shapiro stworzył go i napisał o tym, dlaczego animacja JavaScript może być najbardziej wydajnym stylem animacji, a także o tym, jak działa Velocity.js. Oto bardzo proste demo animujące niektóre właściwości specyficzne dla SVG.
Możesz także zrobić to samodzielnie dzięki animacjom JavaScript bez pomocy frameworka. Pamiętaj, że wbudowane SVG znajduje się w DOM, więc wszystkie standardowe elementy DOM API są dostępne. Trochę tak jak ty, jak naprawdę nie potrzebujesz jQuery do pracy z DOM, po prostu często to ułatwia. Oto przykład, który robi rzeczy po swojemu, co jest całkiem interesujące.