Przejdź do głównej zawartości

Robi się ciekawie. Animacja w tle.

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?


Etykiety:

Komentarze

Prześlij komentarz

Popularne posty z tego bloga

Animacja w tle

Pierwsze próby animacji SVG W poprzednim poście przedstawiłem wam tło do gry. Może wrzucę rysunek jeszcze raz. Całość jest zrobiona wektorowo i ustawiona w CSS jako background body. To teraz dodaję animację chmur i słońca. Chwilę googlowania i... zaraz, zaraz, jak to nie można animować elementy SVG w background? Oczywiście, że nie! Przecież miałem już podobny problem. Opowiem Wam o tym. Nie wiem, czy wam się już chwaliłem, ale jedna z moich postaci już rusza ręką. Macha sobie radośnie, ale żeby to robiła, to ja straciłem dla niej dużo czasu. Pewnie jak większość wie, plik SVG może składać się z figur geometrycznych, ścieżek, które mogą posiadać  swój id. Można też dodać im klasy. Po umieszczeniu SVG w HTML, można nim manipulować CSS lub JavaScriptem, podobnie jak np. divem, img, tekstem. A przynajmniej tak mi się wydawało. W pierwszych podejściach do animacji z pomocą GSAP, ustawiłem moją postać w tagu img. Na nic się nie zdała próba animacji jakiejkolwiek części ciała
Prześlij komentarz
Czytaj więcej

GSAP - framework Javascript

GSAP, ależ to dobre jest   Im dłużej siedzę nad tą grą, tym częściej jestem miło zaskakiwany. Chociaż nie od razu jest przyjemnie, zwłaszcza jak się ma bardziej skomplikowane problemy do rozwiązania (jak dla mnie). Do tej pory nie stosowałem żadnych frameworków i prostą animację chciałem zrobić w CSS. W miarę czytania o GASP (GreenSock Animation Platform) i jego testowania, zrezygnowałem z jakiejkolwiek animacji w CSS. Czym jest GSAP? Jest to zbiór narzędzi do tworzenia animacji w JS. https://greensock.com/gsap Obsługuje podstawowe funkcje animacji, takich jak ruch w dowolnym kierunku, czas trwania, zmiana koloru, przeźroczystości, skalowania, obracania obiektu. Na tym jednak się nie kończy. Można manipulować opóźnieniem animacji, krzywą prędkości https://greensock.com/ease-visualizer ,wykonywać przekształcenia 3D. Animacje mogą nachodzić na siebie lub występować jedna po drugiej. Jest też sporo wtyczek z zaawansowanymi funkcjami. Użycie Wystarczy wkleić link do pli
Prześlij komentarz
Czytaj więcej

Grafika na tło

Wektorowe tło Dziś krótki wpis, ale przedstawiający wynik paru godzin dłubania w Affinity Designer. Wszystkie rysunki wykonałem sam. Nie oznacza to, że nie wzorowałem się na rysunkach doświadczonych grafików, ale nie było żadnego kopiuj, wklej. Trochę czasu też straciłem na oglądaniu YouTube z tutorialami.    Elementy nieba: chmury i słońce, są wzorowane na rysunkach mojej córki.   Myślę, że jak na amatora to nie mam czego się wstydzić.  W tym tygodniu również testowałem animację ręki postaci. Po wielu próbach w końcu udało mi się. Moje zmagania opiszę w osobnym wpisie. Na przyszły tydzień szykuję wprowadzenie animacji słońca i chmur w tle oraz dodanie nowych graficznych elementów. Będą do miejsca do chowania się postaci. Na razie nie mam pomysłu, co to może być na łące? Może stóg siana, traktor i ... zobaczymy. Zapytam córki.
Prześlij komentarz
Czytaj więcej