Biblioteki JS do manipulacji SVG
Na planszy robi się interesująco. Słońce rusza promieniami, chmury latają po niebie, mysz hasa sobie po łące. Parę postaci uciekło z gry, zostawiając puste miejsce. To efekt przechodzenia z tagu img na object i zastępowanie JPG plikami SVG.Uparłem się, że do animacji promieni słonecznych użyję tzw. morfingu, czyli płynnego przejścia jednego kształtu w inny. Niestety, okazało się, że poznana biblioteka GSAP GreenSock, nie oferuje tej opcji za darmo. Co prawda mogłem to rozwiązać trochę inaczej, ale chciałem wypróbować tę metodę. I co poradzisz? Na takiego nic nie poradzisz, uparł się i nie odpuści.
Natrafiłem w sieci na Kute.js, lekką bibliotekę JS do animacji. Komplet zminimalizowanych bibliotek waży 30KB. Przyjrzyjmy się, co potrafi.
Kute.js
Dlaczego Kute.js, a nie Snap.svg? Snap jest cięższy. Podstawowy, zminimalizowany plik waży ok 80KB. Kute ma zbliżoną do GSAP składnie, łatwiej i szybciej mi go przyswoić i w sumie to zadecydowało.Przesunięcie obiektu box w GSAP :
tween = TweenMax.to(box, 2, {left:"700px"});
i w Kute.js:
tween = KUTE.To(box, {left: 100}, {duration: 200});
Nie można powiedzieć, że Snap jest gorszy. Ma większą społeczność, a co za tym idzie, jest większa szansa, że znajdziemy rozwiązanie na pojawiające się problemy. Choć przyznaję, że autor Kute odpisał mi na pytanie w ciągu godziny. W Kute nie dopatrzyłem się ruchu po ścieżce, Snap to posiada. W GSAP do animacji po ścieżce wymagany jest morhing, więc ponownie odpada.
Oczywiście miałem do wyboru inne biblioteki JS do animacji SVG. Vivus, Bonsai RaphaelJS i kilka innych. Nie mam na tyle czasu na sprawdzenie ich, ale gdyby mi czegoś brakowało, to drążyłbym temat. Większość tych bibliotek ma wspólne cechy: posiadają auto prefix dla właściwości CSS3, są kompatybilne ze starszymi przeglądarkami, obsługują funkcje wygładzające (ang. easing functions). Padło na Kute, dajmy szanse małym.
Biblioteka
Oprócz głównego pliku możemy dodać pięć innych rozszerzających możliwości manipulacji.
kute-svg - plugin do manipulacji kształtami SVG, posiada morphing
kute-css - animacje na podstawie o właściwości CSS
kute-attr - dodaje manipulację na atrybutach, dobrze jest dodać do wtyczki kute-svg, aby móc zmieniać atrybuty ścieżek, wypełnienia lub gradientu.
kute-text - wtyczka odpowiedzialna za operacje na tekście
W praktyce
Morphig zajął mi dużo czasu, a i tak nie osiągnąłem tego, co chciałem. Promienie słoneczne zrobione są z dwóch ścieżek, które mają tyle samo punktów. Pierwsza ścieżka ma krótsze promienie, druga dłuższe. Moim zamiarem było przejście z jednej ścieżki do drugiej. Efektem miała być animacja wydłużających się promyków. Wyszło hmmm, trochę dziwnie. Co prawda jest codepen poświęcony personalizacji morfingu, ale przy większej ilości punktów w krzywej, ciężko to ustawić. Jak widać, mi się nie udało.
Personalizacja morfingu kute.js
Kute użyłem tylko do animacji słońca.
GASP do reszty obiektów. Chmur, które mają losową prędkość poruszania i każda z nich ma przypisaną trasę ruchu. Mam też mysz, która za każdym razem, kiedy wyjdzie z spoza ekranu, ma losową ścieżkę ruchu.
Podsumowanie
Kute.js jest rozwiązaniem wartym uwagi. Łatwa, podobna do GSAP składnia sprawia, że tworzenie ruchu nie sprawia trudności. Przynajmniej jeśli chodzi o proste figury i ścieżki. Autor cały czas się interesuje projektem i chętnie pomaga.Ja jednak nie jestem do końca przekonany czy tę bibliotekę zostawić na stronie. Może jego zostawię a usunę GASP? Wszystko zależny od liczby negatywnych głosów dotyczących morpingu słońca.
Czy uważacie, że to słonce wygląda bardzo źle? Może lepiej zostawić bez morfingu?
Animacja na żywo: Where is my letter?
Komentarze
Prześlij komentarz