PODSTAWOWA TEORIA
ANIMACJI INTERNETOWEJ

Istnieje animacja funkcjonalna, która sprawia, że interfejs jest bardziej intuicyjny i przyjazny dla użytkownika. Taki typ animacji jest stosowany w interfejsach produktów i aplikacjach mobilnych. I jest animacja dekoracyjna, która jest najczęściej używana na stronach docelowych lub projektach specjalnych, służąc do przyciągnięcia uwagi widza, uczynienia projektu bardziej interesującym i pomocy w wywołaniu pewnych emocji.

Szybkość animacji odzwierciedla stosunek odległości przebytej przez element do czasu potrzebnego na jej pokonanie. Szybkość obejmuje również wszystkie zmiany, jakie element przechodzi od początku do końca. Jest to jeden z kluczowych elementów animacji, ponieważ odpowiada za ogólną dynamikę i nastrój, który próbujesz stworzyć. Tworzenie animacji to dość kreatywny proces, który szybko okaże się nie różnić od reżyserowania własnego filmu.

Podczas projektowania animacji ważne jest, aby o tym pomyśleć:

• Jak długo to potrwa
• Prędkość, z jaką wykonywany jest efekt animacji
• Z jaką prędkością element rozpocznie i zakończy ruch.

Jaki czas trwania wybrać, aby animacja wyglądała schludnie? Nie ma dokładnej odpowiedzi. Ważne jest, aby użytkownik nie czekał na wynik ruchu, ale też aby animacja nie była zbyt szybka. Widz powinien mieć czas na zrozumienie, gdzie element pojawił się na ekranie i jak znalazł się w nowym miejscu. Ogólnie rzecz biorąc, animacja powinna być naturalna.

Bardziej dynamiczne animacje są odpowiednie do wyświetlania małych elementów, takich jak teksty, listy, karty lub przyciski. Duże elementy są zwykle animowane bardziej płynnie. Czas trwania zależy również od ilości miejsca zajmowanego przez animację. Wysoka prędkość jest bardziej odpowiednia dla mikro-ruchów, ponieważ im wyższa prędkość, tym więcej uwagi wymaga, odwracając uwagę użytkownika od reszty treści.

Odległość ruchu w animacji internetowej jest zazwyczaj niewielka:

• Elementy ujawniane z przezroczystości (karty, listy, obrazki)
• Efekty najechania (animacja po najechaniu myszą) dla przycisków i kart: Zoom, przesunięcie, zmiana koloru
• Wyskakujące okienko (np. powiększenie zdjęcia)
• Animowany pokaz slajdów

Chociaż parametry animacji mogą się różnić w zależności od projektu, prędkość animacji ma tendencję do przestrzegania uniwersalnego zestawu zasad. Animacja jest najwygodniejsza do postrzegania w granicach określonych poniżej, użyj ich jako przewodnika, a nie pomylisz się.

Jest to średni zakres wartości dla animacji większości elementów, nie za szybki i nie za wolny. Zakres ten jest wystarczający do animowania tekstu, kafelków, list i elementów dekoracyjnych. Zwiększmy interwał:

Odstęp 0,1 sekundy jest postrzegany jako chwila, dzięki czemu nadaje się do małych elementów i ruchów (najechanie kursorem, przełączanie kart, przesuwanie w galeriach), podczas gdy animacje dłuższe niż sekunda będą wydawać się męczące. Dobrym pomysłem jest upewnienie się, że nie stosujesz tej animacji do ważnego elementu na stronie internetowej.

Dane te zostały ujawnione w badaniu przeprowadzonym przez Neilson Norman Group (firmę zajmującą się badaniami i doradztwem w zakresie doświadczeń użytkowników) oraz Model Human Processor.

Gdy właściwości animowanego elementu są podobne do właściwości obiektów fizycznych, są one łatwiejsze w odbiorze. Takie animacje są bardziej przewidywalne, dlatego nie powodują dyskomfortu.

Pomagają one wywołać pewne skojarzenia i emocje, które są znane użytkownikowi. Jednym z głównych sposobów na osiągnięcie naturalnego wrażenia jest wyobrażenie sobie, jak zachowywałby się fizyczny obiekt, gdyby poruszał się tak jak animacja. Jak wpływa to na prędkość?

• Na przykład identyczne elementy będą poruszać się w różny sposób, jeśli pokonają różne odległości. Gdy elementy poruszają się, ten z najkrótszą odległością zatrzyma się jako pierwszy.
• Elementy różniące się masą również poruszają się inaczej, większe poruszają się wolniej. Gdyby był to obiekt fizyczny, jego masa uniemożliwiłaby mu szybszy ruch.

Zasady te są ściśle związane z naszą percepcją. Ważne jest, aby pamiętać, że obiekty fizyczne zawsze mają początek i koniec swojego ruchu. W pewnym momencie przyspieszają (np. na początku, gdy są popychane), a w pewnym momencie zwalniają (np. na końcu ścieżki). Animacja internetowa przekazuje te właściwości za pomocą Easing.

Easing to najważniejsza technika w projektowaniu animacji, nadająca elementom autentyczności, charakteru i dynamiki.

Easing jest zwykle przedstawiany za pomocą wykresu zależności między odległością ruchu (oś Y) a czasem potrzebnym do jej pokonania (oś X). Jeśli ktoś nauczy się je poprawnie odczytywać i komponować, pomoże to projektantom lepiej wyjaśnić zadanie deweloperowi.

Ruch liniowy wydaje się najbardziej nienaturalny. Wyobraź sobie, że prędkość elementu nie zmienia się przez całą animację, tak jakby nie było grawitacji i tarcia. Taka animacja będzie wyglądać sztucznie i niechlujnie.

Istnieje kilka rodzajów efektu easing. Zapoznanie się z nimi i nauczenie się stosowania ich w swoich projektach z pewnością okaże się przydatne. Oto jak wyglądają najczęstsze przykłady easingu i ich wykresy:

Ten rodzaj łagodzenia jest najbardziej powszechny. Przejścia Ease-In-Out polegają na płynnym przyspieszaniu elementu na początku i spowalnianiu go na końcu ruchu. Animacje w ten sposób wyglądają najbardziej naturalnie: Element przyspiesza, kończy ruch i zatrzymuje się.

W tym przypadku element przyspiesza na początku i ma stałą prędkość animacji. Ten typ animacji wygląda jak start rakiety.

W animacjach Ease-Out element ma wyraźny szybki ruch na początku i płynne zatrzymanie na końcu.

Asymetryczny easing pozwala na zastosowanie bardziej subtelnych ustawień w celu dokładnego oddania właściwości fizycznych. W tym przypadku punkty przyspieszania i zwalniania mają własną dynamikę, a wykresy z krzywymi animacji mogą wyglądać zupełnie inaczej. Na przykład, element może mieć płynne przyspieszenie na początku i szybkie zatrzymanie na końcu.

Gdy obiekty zderzają się ze sobą, mogą się od siebie odbijać lub rozciągać w różnych kierunkach. W projektowaniu animacji efekty te nazywane są Bounce i Elastic. Efekty te sprawiają, że ruch wygląda naturalnie.

Amplituda ruchu zależy od ogólnej koncepcji projektu. Podczas projektowania porównaj swój element z fizycznym obiektem, aby dokładnie zobaczyć, jak zbudować animację. Jeśli chcesz osiągnąć efekt skaczącej lekkiej, miękkiej piłki, przyspieszenie elementu będzie musiało być płynne, a jego odbicie od powierzchni będzie musiało być duże. Z drugiej strony, jeśli wyobrazisz sobie spadającą metalową kulkę, jej opadanie będzie znacznie szybsze, a odbicie będzie ledwo zauważalne.

Złagodzenie animacji, odbicie i prędkość składają się na pewną dynamikę. Ucząc się korzystać z tych narzędzi, będziesz wiedział, jak nadać animacji odpowiedni ton.

Krzywe Beziera są używane do wykreślania przyspieszenia elementu. Krzywa Beziera to krzywa matematyczna na wykresie zawierającym osie Y (odległość) i X (prędkość), które odzwierciedlają odległość przebytą przez element w przestrzeni i czas potrzebny na jej pokonanie. Dostosowując krzywą, można regulować szybkość, z jaką element pokonuje różne części swojej ścieżki.

Istnieją dwa rodzaje krzywych Beziera: kwadratowe i sześcienne. Współrzędne pierwszego i ostatniego punktu są jasno określone i leżą na krzywej. Pozostałe punkty są regulowane i leżą poza linią. Przesuwanie punktów przekształca krzywą, tworząc gładki kształt.

Aby nauczyć się czytać wykresy i zrozumieć, w jaki sposób kąty na krzywej pokazują dynamikę ruchu, narysujmy dwa podobne, ale nieco inne wykresy.

Nie ma uniwersalnych wartości dla punktów na krzywej, które stworzyłyby idealną animację. Ważne jest, aby eksperymentować i stopniowo odkrywać, jaka dynamika ruchu jest odpowiednia dla każdego przypadku. Gdy już nauczysz się czytać wykresy, możesz wykorzystać tę wiedzę bardziej profesjonalnie. Aby nieco ułatwić sobie życie, oto kilka usług, które pomagają projektantom wizualizować animacje:

cubic-bezier
Ta usługa pomaga przesunąć krzywą, odtworzyć jej ustawienia i zapisać pożądany wynik. Aby uprościć przekazywanie projektu animacji zespołowi programistów, można skopiować wartości punktów współrzędnych i udostępnić je deweloperowi.

easings.net
Serwis ten zawiera ukończone projekty animacji, które mogą okazać się przydatne jako gotowe przykłady zawierające właściwe wartości.

Tilda oferuje różne rodzaje animacji. W witrynie Zero Block dostępne jest zaawansowane narzędzie dla projektantów, w którym można skonfigurować niestandardowe efekty animacji, a także podstawowe bloki z wstępnie ustawionymi podstawowymi efektami animacji.

Więcej informacji na temat animacji w Tilda można znaleźć tutaj.

Chcieliśmy dać nieprofesjonalnym projektantom możliwość dodawania fajnych animacji do ich projektów, dlatego też dodaliśmy do bloków gotowe animacje. Ustawienia, których użyliśmy, są naszym zdaniem idealnie wyważone, a jednocześnie uniwersalne. Wszystko, co musisz zrobić, to aktywować animację dla wybranego elementu (nagłówka, podtytułu itp.) w panelu ustawień bloku.

Animacje zostały stworzone przez naszych projektantów. Prędkość nie jest ani zbyt szybka, ani zbyt wolna, a elementy podążają za sobą w harmonii. Przyjrzyjmy się, jak działają ustawienia animacji Tildy na przykładzie jednej z okładek:

W przykładzie przypisaliśmy ten sam styl animacji - pojawiający się od dołu - do wszystkich elementów, aby ruch był wyraźniejszy.

Zwróciliśmy uwagę na to, z jaką prędkością elementy będą pojawiać się jeden po drugim, z jakim opóźnieniem i z jakim przesunięciem. Jeśli przyjrzysz się uważnie wartościom na powyższej okładce, możesz to zobaczyć:

• Pierwszy pojawiający się element jest największy (nagłówek jest największy, dlatego jest kluczowym elementem).
• Po tytule następuje opis, który ma drugorzędne znaczenie. Prędkość animacji jest tutaj wyższa.
• Przycisk pojawia się jako ostatni, a szybkość jego wyświetlania jest szybsza niż w przypadku obu tekstów.

Styl łagodzenia jest taki sam dla wszystkich elementów z wstępnie ustawioną animacją:

Wykres pokazuje, że elementy przyspieszają gwałtownie na początku i stopniowo zwalniają na końcu.

Choreografia pomaga tworzyć rytm w animacji. Jest to podobne do rytmu muzycznego, ponieważ określa charakter danej pracy. Ważne jest, aby ruchy w animacji były jasno określone i nie były monotonne (z tym samym odstępem czasu między nimi).

Animacja równoległa. Elementy animacji, które mają taką samą prędkość i czas, dzięki czemu wyglądają jak jedna grupa.

Opóźniona animacja. Odnosi się to do animacji zawierającej niewielkie opóźnienie między pojawiającymi się elementami, przy czym następny element porusza się nieco szybciej niż poprzedni. Aby elementy nadal należały do tej samej grupy, interwał opóźnienia musi być niewielki (np. 0,3 sekundy).

Grupowanie elementów. Można grupować elementy i łączyć animację równoległą i opóźnioną. Na przykład, możesz sprawić, że wszystkie teksty w nagłówku pojawią się w tym samym czasie, a przyciski pojawią się z opóźnieniem.

Kolejność animacji zależy od ważności elementu, ponieważ istnieją elementy równorzędne i kluczowe.

Nacisk wizualny zostanie położony na kluczowy element, podczas gdy reszta zostanie ujednolicona w jak największym stopniu. Na przykład, nagłówek strony może być głównym elementem, podczas gdy podtytuły i obrazy będą drugorzędne. Jednym ze sposobów podkreślenia kluczowego elementu jest pokazanie tytułu jako pierwszego, a następnie pauza i pojawienie się drugorzędnych elementów w wolniejszym tempie.

Na stronie internetowej są to zazwyczaj listy, galerie zdjęć, wzory, elementy o podobnym przeznaczeniu. Mogą pojawiać się razem lub jeden po drugim. Jeśli pojawiają się jeden po drugim, animacja wyglądu powinna być taka sama.

Zdjęcia w galerii są częścią tej samej całości. Ważne jest, aby uwaga widza nie była rozproszona. Musisz upewnić się, że animacja jest prosta, jednolita i wystarczająco szybka.

Ten rodzaj animacji nie ma na celu przyciągnięcia uwagi, ponieważ dodaje jedynie dynamiki podczas przewijania strony. Dobrą techniką wizualnego zebrania różnych elementów w grupie jest rozpoczęcie animacji drugiego elementu przed zakończeniem pierwszej animacji. Na przykład:

Z drugiej strony kluczowe elementy nadają ton i skupiają uwagę użytkownika. Może to być jeden element lub kilka elementów (wtedy są one zebrane w grupy). Na przykład, można stworzyć jasny, duży nagłówek, ustawić go tak, by pojawiał się szybko, bez opóźnienia, ale ze spowolnieniem na końcu. Pozostałe elementy mogą pojawiać się płynnie po nagłówku, ale z dużym opóźnieniem.

Animacja jest narzędziem do dodawania ekspresji, podkreślania i kontrolowania uwagi. Jest to bardzo potężne narzędzie, które często jest używane nieumiejętnie. Jeśli chodzi o animację, często istnieje duża pokusa, aby zastosować wszystkie znane techniki w jednym projekcie. Zwykle kończy się to źle, ponieważ uwaga widza zostaje przesunięta przez ruch obrazów i tekstów, a zanurzenie się w treści staje się bardzo trudne. Skąd więc wiesz, czy nie przesadzasz?

Równowaga animacji w projekcie odnosi się do liczby animowanych elementów, które nie powodują kontrowersyjnego wrażenia z oglądania strony. Dodawanie zbyt dużej ilości animacji jest częstym błędem. Aby nie usuwać niepotrzebnych animacji na końcu, lepiej jest określić, ile animacji potrzebujesz na początku, kierując się następującymi zasadami:

Nie animuj wszystkich elementów w swoim projekcie. Nadmierna dynamika zmęczy cię i rozproszy uwagę widza. Na początek określ elementy, na które chcesz położyć nacisk - zazwyczaj wystarczą dwa. Na przykład nagłówki i zdjęcia w galerii.

Kontrola jakości. Jeśli dodajesz animację do projektu, ważne jest, aby upewnić się, że działa ona poprawnie i nie zawiesza się. Animacja wymaga dużej ilości zasobów systemowych, a przy dużym obciążeniu procesora będzie działać wolno lub z przerwami. Użytkownicy nie będą pod wrażeniem i nie będzie efektu "wow". Dlatego ważne jest, aby:

• Nie animuj zbyt wielu elementów
• Przetestuj witrynę na komputerach o niskiej mocy
• Zamiast jednoczesnej animacji kilku elementów, użyj sekwencji z krótkim opóźnieniem
• Nie umieszczaj na stronie ciężkich obrazów

Utrzymanie hierarchii. Zastosuj tę samą animację do elementów o tej samej wartości w całej witrynie. Na przykład:

• Ten sam styl wyglądu nagłówka
• Ten sam styl najechania (na przykład wygląd cienia pod przyciskiem po najechaniu myszą)

Zachowaj styl. Zastosuj ten sam styl animacji do hierarchii. Na przykład możesz zdecydować, że wszystkie nagłówki sekcji będą zanikać od dołu, a obrazy i podpisy będą pojawiać się z boku.

Ograniczona ilość animacji pomaga uniknąć przesady i zamieszania w stylach na początku. Upewnij się, że minimalna ilość animacji na stronie nie jest dla ciebie wystarczająca, a dopiero potem spróbuj dodać więcej.

Animacja czyni projekt bardziej interesującym i wspiera jego styl, nastrój i charakter. Może być jednak szkodliwa, jeśli nie przestrzega się podstawowych zasad: