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?


Komentarze

Popularne posty z tego bloga

Ruch na ekranie

Uruchomienie animacji. Moja obietnica z poprzedniego tygodnia, że oddam dwa wpisy wcześniej, a nie na ostatnią chwilę, właśnie staje się niespełnioną. Jest nawet gorzej. Nie pamiętam, kiedy oddawałem dwa wpisy w niedzielę. Obserwując inne wpisy na blogach mam wrażenie, że część uczestników konkursu już odpuściła. Część się tłumaczy nawałem pracy, przesileniem wiosennym, załamaniem nerwowym i takie tam. Ja taki nie będę i otwarcie przyznaję się że mi się nie chciało... To żart.
Dlatego dodaje dopiero ten wpis, bo uczyłem się GSAP, miałem trzy problemy, z którymi nie mogłem sobie poradzić, a o których za chwilę opowiem oraz oczywiście brak czasu.

Trochę dodałem tagów do HTML, przez co skróciłem kod CSS. Powiększył się również plik js, a postacie nareszcie się ruszają za pomocą GSAP. Możecie sprawdzić: https://guydiamond.github.io/where_is_my_letter/.

Pierwszym problemem objawił mi się na początku tygodnia był związany z css. Każdy div odpowiadający za miejsce do chowania się postaci, m…

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 pliku  HTML:
<script s…

Pora się pożegnać

Postanowienie z poprzedniego posta
Tak, to już ostatni dzień konkursu. Za nim zrobię podsumowanie całego projektu, wrócę do mojego poprzedniego wpisu. Narzekałem w nim, że wykryłem błąd. Myślałem, że szybko go naprawię i poprawię mój kod. Ten easy-peasy bug, zajął 3 dni! Przebudowywałem kod 3 razy. W końcu zwróciłem się z problemem na forum i dostałem podpowiedź, która pomogła mi rozwiązać problem. W tych dwóch krótkich  metodach miałem dwa bugi, które aktywowały się na przemian,  przez co zachowanie metod wyglądało na losowe.
Prawione metody w obiekcie Controller:
https://github.com/commitPrzez ten błąd, nie starczyło mi czasu na poprawę jakości kodu. Jednak jeszcze się nie poddaję. Jak znajdę dziś trochę czasu, to poprawię go i wyślę na githuba.

Podsumowanie
W czasie tego konkursu wypiłem 167 kaw, zużyłem ..., ale to Was pewnie nie interesuje.
Jeden z głównych warunków konkursu został spełniony. Ponad 20 postów zostało upublicznione. W utrzymaniu samodyscypliny przy pisaniu postów p…