Wykorzystanie 12 zasad animacji Disneya w następnym projekcie projektowania stron internetowych

Dokładnie w momencie, w którym to piszę, w moim biurze na ścianach i półkach jest 17 Disneyowskich czegoś lub czegoś innego. Siedemnaście. Nawet ja się dziwię. Chociaż kocham wszystko – Disneya, magia stworzona dzięki 12 zasadom animacji umyka mi nawet, gdy oglądam jeden z ich filmów.

I o to chodzi. 12 zasad animacji jest subtelnych. Robią wrażenie na widzach, nie zdając sobie z tego sprawy. Sprawiają, że się śmiejemy, płaczemy, współczujemy i marzymy, czasem w tej samej scenie. Tworzą postacie i obiekty, które wyglądają i poruszają się tak realistycznie, że chcesz ich dotknąć. (Widziałeś kiedyś Coco ? Odpoczywam.)

Te 12 zasad animacji stanowi teraz podstawę wszystkich prac związanych z ruchem, Disneya i innych. Odnoszą się również do pól poza animacją, takich jak projektowanie stron internetowych.

Krótka historia 12 zasad animacji

Dwanaście zasad animacji zostało wprowadzonych przez Ollie Johnstona i Franka Thomasa, dwóch z Disneya „Dziewięć starych ludzi”, podstawową grupę animatorów, którzy dołączyli w latach 20. i 30. XX wieku. Johnston i Thomas napisali The Illusion of Life: Disney Animation w 1981 roku i pozostała „biblią” animacji. Książka przygląda się bliżej podejściom najlepszych animatorów Disneya do wyodrębnienia 12 zasad. Chociaż te zasady były pierwotnie przeznaczone do ręcznie rysowanych animacji, przetrwały zmiany technologiczne i są teraz używane przez animatorów komputerowych (takich jak Pixar) i projektantów stron internetowych.

12 zasad animacji i ich wpływ na projektowanie stron internetowych

Nie bez powodu te zasady przetrwały próbę czasu. Czasami podstawy są nadal najlepsze.

1. Squash i rozciąganie

Źródło: Chris Gannon przez Giphy

„Squash and Stretch” to najważniejsza z zasad animacji. Daje animacjom elastyczność, grawitację, wagę i masę. Kiedy obiekt jest w ruchu, nie pozostaje w tym samym kształcie.

Jednak głośność musi pozostać spójna. Rozciąganie wymaga uczynienia obiektu cieńszym i dłuższym; zgniatanie sprawia, że ​​jest krótszy i szerszy. Gdybyś po prostu uczynił go cieńszym lub krótszym, nie zachowałby tej samej objętości.

W projektowaniu stron internetowych „Squash and Stretch” jest używany, gdy obiekty muszą przyciągać wzrok. Jeśli istnieje obiekt, który musi wyglądać tak, jakby miał masę fizyczną, ta zasada może załatwić sprawę.

2. Przewidywanie

Źródło: CentoLodigiani przez Giphy

Przewidywanie przygotowuje widza na to, co ma się wydarzyć, i może sprawić, że akcja będzie bardziej realistyczna. Nie usiadłbyś bez uprzedniego zgięcia kolan lub złapania czegoś bez wystawienia ramienia, prawda? Przewidywanie sprawia, że ​​postać lub obiekt wykonuje jeden lub dwa realistyczne ruchy, aby wskazać widzowi, co ma się wydarzyć.

W projektowaniu stron internetowych przewidywanie jest używane w przejściach. Na przykład, jeśli odwiedzający wypełnia pole informacyjne i opuszcza wymagane informacje, pole może się nieco odbić, aby przyciągnąć jego uwagę i przekazać: „Hej, coś jest nie tak”. Innym sposobem wykorzystania przewidywania jest nieznaczne zmniejszanie przedmiotów, a następnie powiększanie ich po najechaniu kursorem.

3. Inscenizacja

Inscenizacja prowadzi oko widza tak, że spojrzy tam, gdzie chcesz, („linie wiodące” w fotografii). Pomiń resztę sceny, aby widz skupił się na tym, czego chcesz. Innym elementem inscenizacji jest to, że każda akcja wykonywana przez postać ma za sobą intencję. Jeśli wyizolujesz każdą klatkę animacji, będziesz w stanie określić intencje stojące za pozą.

Inscenizacja to jedna z łatwiejszych zasad, które można zastosować do projektowania stron internetowych i wizualizacji używanych na stronach internetowych. Tak się dzieje, gdy wyskakujące okienko pojawia się na stronie internetowej – ruch wyskakującego okienka sprawia, że ​​skupiasz się na nim, a reszta strony jest zamazana, przyciemniona lub zakryta. W przenośni oświetlasz najważniejszą część „sceny”, a wszystko inne trzymasz w tle. Można do tego również użyć światła i cienia, a projektanci stron internetowych mogą zastosować tę zasadę, po prostu pozbywając się niepotrzebnych szczegółów.

4. Na wprost i pozuj do pozy

„Na wprost” i „poza do pozy” to dwa różne sposoby tworzenia animacji. Dzięki „na wprost” ramy są tworzone w kolejności od początku do końca. Daje to animacji dynamiczny, płynny ruch. W przypadku „pozy do pozy” tworzone są pierwsza i ostatnia klatka, a następnie dodawane są niezbędne pozy pomiędzy nimi.

Źródło: Vincenzo Lodigiani, Motion Artist

Obecnie animacja komputerowa wykorzystuje „pozę do pozy”, ponieważ komputer może automatycznie uzupełnić brakujące klatki. Sprawdź animacje na Czechowie – możesz stwierdzić, że nie są one realistycznie płynne (i nie powinny być). Jeśli chcesz stworzyć animację „na wprost” na swojej stronie internetowej, możesz skorzystać z funkcji timingu steps( ), która pozwala zdefiniować wiele klatek i wyświetlać je w sekwencji.

5. Kontynuacja i nakładanie się akcji

Zasada „follow through and nakładającego się działania” mówi, że gdy postać lub obiekt jest w ruchu, a następnie zatrzymuje się, części obiektu poruszają się i zatrzymują w różnym tempie. To naśladuje prawdziwe prawa fizyki.

• Nakładające się działanie: Różne części obiektu poruszają się w różnym tempie.
• Follow Through: Luźno połączone części obiektu kontynuują ruch przez kilka sekund po zatrzymaniu głównego obiektu. Te części przesuną się poza punkt zatrzymania, a następnie cofną się w kierunku obiektu.

W poniższym przykładzie ramiona i nogi Roszpunki poruszają się w innym tempie niż jej głowa – to nakładające się działanie. Kiedy przestaje się kręcić, jej włosy nadal kołyszą się przez sekundę – to następstwo.

„Drag” to pokrewna technika, w której dzieje się odwrotnie – części obiektu poruszają się, a reszta dogania. Wszystkie te techniki pokazują realistyczny ruch lub mogą wyolbrzymiać ruch w celu uzyskania komicznego efektu.

Z tym też wiąże się „ruchome trzymanie”. Postacie, które pozostają, nadal poruszają się nieznacznie, aby animacja nie uległa stagnacji.

W projektowaniu urządzeń mobilnych i stron internetowych „obserwuj” i „nakładające się działanie” pokazują widzowi, że działanie zostało celowo zatrzymane. W przeciwnym razie możesz pomyśleć, że po prostu przestał działać. Na przykład spójrz, jak aplikacja Wunderlist na moim iPhonie pokazuje, że przenoszę element listy. Element przybiera inny kolor i powiększa się, gdy go przesuwam, a po zakończeniu wraca do oryginalnego koloru i rozmiaru. W ten sposób wiem, że akcja jest zakończona.

Możesz również zobaczyć tę zasadę w akcji na swoim iPhonie. Gdy przechodzisz między widokami lub przesuwasz ikony na ekranie głównym, elementy poruszają się w nieco innym tempie. W ten sposób komunikuje się Twój iPhone: „Rzeczy się zmieniają”.

6. Zwolnij i zwolnij

Zasada „slow in and slow out” mówi, że obiekt zaczyna się powoli poruszać, nabiera rozpędu i przyspiesza, a następnie ponownie zwalnia, gdy się zatrzymuje. Zasadniczo ruchy muszą przyspieszać i zwalniać, aby były naturalne. Aby osiągnąć ten efekt, na początku i na końcu akcji znajdują się dodatkowe klatki, które podkreślają stopniowe zwiększanie i zmniejszanie ruchu.

Źródło: Iluzja życia na Tumblr

W przypadku projektowania stron internetowych CSS ma dwie funkcje czasowe związane z tą zasadą: złagodzenie i złagodzenie. Przykład możesz zobaczyć na stronie Twój Plan, Twoja Planeta (kliknij najpierw „Zacznijmy”).

7. Łuk

Podobnie jak wiele innych 12 zasad animacji, „łuk” opiera się na fizyce. Obiekty zwykle poruszają się po pewnym łuku z powodu grawitacji. Gdyby pozostały proste, ruch byłby mechaniczny, a nie realistyczny.

Dotyczy to również wszystkich rodzajów ruchu, nie tylko łuków od niskich do wysokich do niskich:

W projektowaniu stron internetowych zasada „arc” może być wykorzystana do tworzenia animacji łukowych, oczywiście, ale także poprzez obracanie elementu, jak podczas ładowania.

8. Akcja drugorzędna

Akcja drugorzędna podkreśla akcję główną bez odwracania jej uwagi. Nadaje także postaciom i przedmiotom większy wymiar i tchnie życie w scenę. Zasada inscenizacji odgrywa pewną rolę, ponieważ główna akcja nadal musi być w centrum uwagi.

Akcja drugorzędna nie musi wychodzić poza główny obiekt. Może to być postać gwiżdżąca podczas chodzenia lub wyrażająca emocje poprzez uniesienie brwi.

W projektowaniu urządzeń mobilnych i stron internetowych zasada „drugiego działania” jest widoczna, gdy elementy usuwają się z drogi, aby zrobić miejsce dla nowego elementu, na przykład podczas zmiany kolejności aplikacji na iPhonie. Może to iść w parze z „podążaniem za i nakładającym się działaniem”, które podkreśla te działania.

9. Czas

Czas jest dość prosty i wiąże się z „spowolnieniem i spowolnieniem”. Zasada mówi, że elementy powinny konsekwentnie poruszać się w naturalny sposób, tak jak w prawdziwym świecie. Dla podkreślenia można je celowo przyspieszyć lub spowolnić. Liczba użytych klatek ustali czas — więcej klatek oznacza wolniejszą akcję, mniej klatek oznacza szybszą akcję.

W tym przykładzie pierwsze działania Kaczora Daffy'ego mają naturalne wyczucie czasu, a ostatnie działanie, kiedy zbliża się do widza, jest celowo szybkie, aby podkreślić.

Timing pomaga również widzowi zrozumieć wagę obiektów w stosunku do siebie. W tym przykładzie postać powoli podnosi ciężary i szybko je upuszcza, pokazując, że są dla niego ciężkie:

Źródło: @scottthigpen na Giphy

W projektowaniu stron internetowych czas jest używany do tego, aby elementy zatrzymywały się nieco dłużej lub szybko znikały, szczególnie podczas reakcji na interakcję użytkownika. Na przykład, jeśli użytkownik chce zamknąć menu, możesz ustawić czas tak, aby trzymał się przez 300 ms. Jeśli dotkną elementu na pasku nawigacyjnym, chcesz, aby akcja została wykonana szybko (100 ms).

10. Przesada

Mimo że wiele z 12 zasad animacji koncentruje się na rzeczywistości, piękno animacji polega na tym, że nie jest prawdziwa. Zasada „przesady” mówi, że zbyt duży realizm może umniejszać to, w czym animacja jest najlepsza: rozrywkę. Przesada służy do uatrakcyjnienia postaci i obiektów. Zabiera rzeczywistość i podkręca ją, na tyle, aby scena była nadal wiarygodna. Przesada wymaga powściągliwości, by scena nie stała się abstrakcyjna ani surrealistyczna.

W projektowaniu stron internetowych obiekty są skalowane w górę lub w dół, aby przyciągnąć lub odwrócić uwagę. Gdy użytkownik jest aktywny w określonej części witryny, na przykład w formularzu, może ona rosnąć, podczas gdy inne elementy się kurczą. Jest to podobne do zasady „inscenizacji”, zwłaszcza gdy myślisz o formularzach wyskakujących.

11. Solidny rysunek

Źródło: Iluzja życia na Tumblr

Mimo, że animacja jest technicznie 2D, musi być realistycznie prezentowana w 3D. Zasadę „solidnego rysunku” można również nazwać „perspektywą”, ponieważ dotyczy umiejętności rysowania i rozumienia podstaw, takich jak:

• Anatomia
• Saldo
• Spójność
• Światło i cień
• Tom
• Waga

W przypadku projektantów stron internetowych dodanie głębi do elementu pokazuje użytkownikom, że mogą z nim wchodzić w interakcje. Możesz to zobaczyć w akcji na naszej stronie internetowej. Zobacz, jak przycisk „Dołącz, aby pobrać” zmienia kolor na różowy, gdy przewijam w dół:

12. Odwołanie

Prawdopodobnie najtrudniejsza z 12 zasad animacji do opanowania, „odwołanie” mówi, że twoje postacie, obiekty i ich świat muszą przemawiać do publiczności. Powinny być atrakcyjne i czarujące w jakiś sposób, fizycznie lub w inny sposób. Nie ma przepisu na to, aby zrobić to dobrze, ale solidny rozwój postaci i opowiadanie historii to kluczowe składniki.

W animacji nie każda postać będzie atrakcyjna – czarny charakter to kamień węgielny filmów Disneya. Jednak sposób ich prezentacji powinien nadal mieć charyzmę i zainteresować publiczność.

W projektowaniu stron internetowych „atrakcyjność” oznacza, że ​​strona internetowa jako całość jest angażująca, przyjemna i łatwa w użyciu.

Zawijanie

12 zasad Disneya może pomóc w prostych animacjach, na przykład podczas tworzenia interaktywnej gry na swojej stronie internetowej, ale mogą również pomóc w projektowaniu wszelkiego rodzaju stron internetowych. Większość konsumentów jest taka jak ja, jeśli chodzi o filmy Disneya: wiem, że coś mi się podoba, a mój mózg przetwarza wskazówki, ale nie mogę wyczuć, dlaczego mam takie reakcje. Zadaniem projektanta stron internetowych jest przewidywanie, co użytkownik pomyśli i zrobi, a następnie subtelne poprowadzenie go do podjęcia właściwych działań.

Szukasz jeszcze więcej sposobów na nawiązanie kontaktu z odbiorcami? Przeczytaj nasz wpis na blogu na temat używania emocji kolorystycznych.