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

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…

Werifikacja poprawności kodu

Jak sprawdzić, czy twój kod jest poprawny?
Dziś już oddałem jeden wpis, ale zaoszczędziłem trochę czasu i mogę napisać kolejny. Jest u mnie 22 i może zdążę do północy.
Gdy jesteś początkującym koderem (takim jak ja), chciałbyś wiedzieć, czy twój kod jest poprawny i pisany zgodnie z obowiązującymi standardami. Jednym ze sposobów jest publikacja kodu na forum programistycznym. Kilka razy tak zrobiłem i dostałem treściwą odpowiedź, ale zdarzały się sytuacje, gdy nikt nie odpowiadał. Wtedy zastanawiałem się, czy mój kod jest tak zły, że fachowcy nie mają już siły dopowiadać na te same błędy, czy taki dobry, że nie ma do czego się doczepić. 😉
To niesie także ryzyko, że kod zostanie sprawdzony powierzchownie i o wielu błędach się nie dowiesz. Może się też zdarzyć, że wywiąże się dyskusja pomiędzy kilkoma mistrzami, o tym, jak powinien wyglądać poprawny kod. Po takiej dyskusji zazwyczaj jesteś bardziej skołowany niż przed zadaniem pytania.
Czasami po prostu głupio pytać kolejny raz o spraw…

Program do organizacji pracy

Nawiązując do poprzedniego postu, w którym przedstawiłem plan działania, chciałbym wam pokazać program do zarządzania listą zadań.

Do tej pory chwilę używałem strony Trello. Trello posiada wszystko, co powinien mieć program "to do list". Jeżeli do tej pory nie używałeś żadnego, to wymienię czym powinieneś się kierować przy wyborze dobrego menadżera zadań. Nie będę tutaj wymieniał oczywistości, takich jak dodawanie zadań z datą.

Menadżer zadań powinien posiadać: 
dostęp z przeglądarki,aplikację na urządzenia przenośne,możliwość pracy w grupie,system powiadomień o nadchodzących "deadlines" oraz zmianach na liście,  opcje kopiowania list, zadań - przydatne, kiedy co tydzień powtarzasz te same zadania,możliwość dodawania komentarzy ludzi biorących udział w zadaniach,dodawanie załączników, zdjęć i innych plików multimedialnych,tworzenie podzadań, chcecklist  lub listy zakupów (funkcjonalność podobna),oznaczanie ważnych zadań, Dobrze, gdyby posiadał także:
chat,przydziela…