Przejście od After Effects do przejść CSS i klatek kluczowych

Strony internetowe coraz bardziej przypominają aplikacje mobilne. Użytkownicy coraz częściej oczekują również doświadczenia bardziej przypominającego aplikację. Od powiadomień push po tryb offline, pojawiają się natywne aplikacje internetowe.

Gdy aplikacje internetowe będą działać jak aplikacje natywne, interakcje projektowe również zmienią się, aby uwzględnić przypadek użycia — a mianowicie wszechobecność animacji. Animacje napędzają interakcje we wszystkich naszych ulubionych aplikacjach, od Ubera po Lyft i Snapchata po Instagram.

Jako programiści stron internetowych potrzebujemy dobrych podstaw do tworzenia animacji, które są zarówno wydajne, jak i łatwe w utrzymaniu, co ma kluczowe znaczenie dla natywnego środowiska aplikacji internetowych. Musimy być w stanie przejść od After Effects do przejść CSS, animacji i klatek kluczowych.

Co to jest After Effects?

After Effects to branżowy produkt firmy Adobe, używany przez grafików i projektantów ruchu do kluczowania, komponowania i śledzenia animacji. Jest to de facto narzędzie używane przez wielu projektantów do przekazywania pomysłów zespołowi poprzez eksportowanie warstw animacji do łatwego do wizualizacji przykładowego wideo, wraz z tabelą referencyjną czasu rozpoczęcia i zakończenia animacji.

Film demonstracyjny i tabela referencyjna razem dają zespołowi programistów dobrą podstawę do implementacji animacji. Wideo służy do obejrzenia ogólnego obrazu, podczas gdy tabela referencyjna zawiera najdrobniejsze szczegóły, które powodują lub przerywają interakcję animacji.

Rzeczy, które możemy zrobić z After Effects

To, co możemy stworzyć za pomocą After Effects, ogranicza tylko nasza wyobraźnia. Może zapewnić nieskończoną liczbę efektów postprodukcyjnych dla obrazu lub wideo. W ramach sieci stanowi platformę do dzielenia się pomysłami.

Rozważ czerwoną kulkę powyżej. Kula jest animowana za pomocą programu After Effects, aby powoli przetoczyć się na środek, zatrzymać się na sekundę, a następnie powoli przyspieszyć, aby wyjść z rzutni. Klasyczne animacje internetowe dotyczące ruchu, skalowania, obracania, a nawet zmiany koloru są łatwe do wykonania w programie After Effects i służą jako natychmiast wygenerowany dokument wymagań (lub wideo lub GIF) dla animacji, które mają zostać zaimplementowane.

Narzędzia potrzebne do rozpoczęcia

Ponieważ JavaScript, HTML5, CSS3 i wiele innych języków stają się standardem w większości głównych programów klienckich, z których witryna otrzymuje ruch, hurtowe korzystanie z tych narzędzi staje się coraz bardziej wykonalne. Poniżej przedstawiamy kilka kluczowych technologii, o których należy pamiętać podczas wdrażania animacji.

Przejścia CSS

Przejścia CSS zapewniają sposób kontrolowania szybkości wprowadzania zmian we właściwości CSS do elementu. Zamiast natychmiastowego stosowania stylu (bez przejść), można go stosować stopniowo na określonej krzywej przyspieszenia, korzystając z reguł dostosowywania. Przykładem może być zmiana koloru tła z czarnego na biały na przestrzeni czasu.

 transition-property: background-color; transition-duration: 3s;

Przy tej regule na elemencie zmiana koloru tła zajęłaby trzy sekundy, stopniowo zmieniając się z czarnego na biały, przechodząc przez odcienie szarości. Można to dodatkowo dostosować, dodając funkcję czasu przejścia, aby obliczyć wartości pośrednie, i opóźnienie przejścia, aby opóźnić rozpoczęcie animacji.

Przejścia CSS są dobre do prostych interakcji , takich jak zmiana koloru tła lub przenoszenie elementu w nowe miejsce.

Korzystanie z animacji CSS

Animacje CSS zapewniają jeszcze lepszą kontrolę nad pośrednimi krokami między animacją, używając punktów orientacyjnych. Punkty orientacyjne (lub klatki kluczowe) to przypięte punkty w czasie podczas animacji, kiedy stosujemy określone style do elementu. Następnie używamy zdefiniowanych klatek kluczowych, aby określić, jak powinna wyglądać animacja.

Załóżmy, że chcemy, aby element był animowany jako odbicie. Element musi przesunąć się w górę, cofnąć się do pierwotnej pozycji, cofnąć się nieco, a następnie wrócić do pierwotnej pozycji. Używając klatek kluczowych, możemy rozbić ten elastyczny efekt na procenty czasu, jaki zajmie animacja.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Podobnie jak w przypadku przejść CSS, programiści mają wiele opcji do skonfigurowania. Możemy sprawić, że animacje będą się powtarzać w nieskończoność za pomocą animation-iteration-count , z wartością infinite , lub nawet kontrolować kierunek, w którym animacja płynie, za pomocą właściwości animation-direction . Mnóstwo właściwości animacji CSS daje nam precyzyjną kontrolę nad dopasowaniem animacji do projektu.

Animacje CSS są przydatne w przypadku krótkich, powtarzających się animacji , takich jak rozwinięcie, obrót i odbicia.

Korzystanie z JavaScript

JavaScript ma wiele zastosowań, od serwerów Raspberry Pi po kod po stronie klienta, ale jednym z jego podstawowych zastosowań pozostaje zmiana nazw klas elementów. Zmiana nazwy klasy to banalny, ale skuteczny sposób zarządzania stanem elementu.

Przykładem jest proste dodanie active klasy, która sygnalizuje początkowo ukrytemu komponentowi rozpoczęcie animacji. Rozważ piłkę poniżej. Używamy JavaScript, aby dodać klasę, która wyzwala animację za pomocą właściwości przejścia CSS.

Pierwsza część tej animacji może zostać zreplikowana za pomocą prostej kombinacji HTML, CSS i JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Po upływie limitu czasu ( 500ms ) do elementu div ball dodawana jest klasa active , która zmienia właściwość transform , która następnie wyzwala właściwość transition , która obserwuje właściwość transform w elemencie ball . Zmiana klas CSS za pomocą JavaScript nie tylko pomaga nam zarządzać stanem komponentu, ale także daje nam dalszą kontrolę nad animacjami poza animacjami i przejściami CSS.

Kontrolowanie animacji za pomocą JavaScript jest korzystne dla zarządzania stanem , aby wywoływać zdarzenia w oparciu o czynniki dynamiczne, takie jak dane wejściowe użytkownika lub stan aplikacji.

Od pomysłu do After Effects, CSS i JavaScript

Wyobraź sobie, że mamy zadanie, w którym musieliśmy animować element na stronie. Zróbmy z tego elementu czerwoną kulkę. Piłka musiałaby się obracać wokół strony, a także skalować w górę iw dół.

After Effects pozwala nam tworzyć makiety tego, jak wyglądałaby interakcja po uruchomieniu animacji. Piłka w ruchu poniżej jest tego przykładem. Zwróć uwagę, jak czerwona kula najpierw nieznacznie zwiększa się, a następnie zaczyna przyspieszać wokół okrągłej pętli i zwalnia z powrotem do swojej pierwotnej pozycji. Dopiero wtedy kula zmniejszy się do swojego pierwotnego rozmiaru.

Rozważ przesunięcie skali powyżej miejsca, w którym piłka rośnie lub kurczy się przed ruchem lub zatrzymaniem. Jest to niewielka funkcja, którą projektant stworzył w programie After Effects i musi być wyraźnie przekazana programiście, aby nie przegapić najdrobniejszych szczegółów.

Dlatego przed przejściem od After Effects do programisty należałoby wykonać pewne przygotowania. Nie mogliśmy po prostu stworzyć pliku wideo z animacją w akcji, udostępnić go programiście i nazwać go na jeden dzień.

Jednym ze sposobów jasnego przekazania naszych pomysłów jest utworzenie arkusza kalkulacyjnego z wyszczególnieniem kroków potrzebnych do animacji. W zależności od złożoności animacji mogą to być proste bazgroły na bilecie, plik tekstowy zawierający listę lub pełny arkusz kalkulacyjny.

Innym sposobem przekazania informacji o animacji jest osadzenie jej w samym filmie . Możesz to zrobić bezpośrednio w programie After Effects, dodając kluczowe informacje, takie jak skalowanie, liczba kroków i inne informacje w trakcie, aby nadać kontekst realizatorowi. Dzięki temu możemy wykorzystać film demonstracyjny jako uniwersalne źródło prawdy .

Ten wyeksportowany plik wideo z programu After Effects działa jako forma umowy między projektantem a deweloperem. Mając wspólne zrozumienie, możemy wykorzystać omówione narzędzia do jego implementacji — a mianowicie klasy CSS, zdarzenia JavaScript, przejścia CSS, animacje CSS i animacje JavaScript.

1. Podziel animację

Poszukaj wzorców i zanotuj czasy.

Pierwszą rzeczą do zrobienia jest narysowanie osi czasu animacji dla każdego elementu (lub grupy elementów). Musimy zrozumieć, gdzie przecinają się animacje, aby zsynchronizować czas i cykl życia animacji wokół nich. Planowanie jest kluczem do złożonej animacji, dzięki czemu możemy przyrostowo budować nasze rozwiązanie w sposób możliwy do utrzymania w celu dostosowania do przyszłych wymagań.

Na podstawie powyższych informacji dzielimy je na następujące kroki:

1. Zainicjuj komponent i poczekaj na wyzwalacz.
2. Po uruchomieniu zwiększ rozmiar i rozszerz cień.
3. Następnie poruszaj się w kółko z ease-in-out .
4. Następnie zmniejsz rozmiar i zmniejsz cień.

Zaletą konturowania jest to, że rozumiemy, które elementy muszą znajdować się poza elementami animacji — na przykład cień musi być niezależny od piłki. Podobnie jak nakreślenie eseju, rozbicie animacji porządkuje nasze myśli na temat pracy, którą musimy wykonać. Kontury pokazują proces myślenia kryjący się za animacją i podwójnie służą jako dokumentacja naszej pracy.

2. Negocjuj z interesariuszami

Czy możemy uprościć niektóre obszary? Które części animacji są niezbędne? Czy możemy zsynchronizować czasy?

Po zbadaniu pracy potrzebnej do wykonania zadania, negocjujemy. Targowanie się z projektantem i właścicielem produktu to odpowiedzialność każdego dewelopera. Realizator ma pełne zrozumienie kluczowego nisko wiszącego owocu, co można zrobić, a co nie jest praktyczne.

Animacja jest trudna, ponieważ usunięcie pozornie drobnych szczegółów z animacji może zmienić wrażenia użytkownika. Aby dać przykład oparty na programowaniu, zmiana zachowania animacji jest podobna do zmiany ładunku odpowiedzi, który możemy otrzymać z wywołania API: Pewne rzeczy mogą zostać zmienione, ale niektóre części muszą tam być.

Jest to sytuacja indywidualna, oparta na naszych relacjach z projektantem, a także z właścicielem produktu, biorąc pod uwagę harmonogram wprowadzenia na rynek. Proszenie o usunięcie niektórych animacji nie jest zalecane, ponieważ wykraczałoby to poza nasz obszar kompetencji.

Dobrym podejściem do targowania się byłoby synchronizowanie czasów lub uproszczenie animacji, których przeglądarka może nie być w stanie wykonać natywnie , oraz unikanie animacji korzystających z JavaScript, ponieważ byłyby trudne w utrzymaniu i mogłyby skutkować niską wydajnością. Zamiast tego możemy i powinniśmy prosić o te ustępstwa.

3. Zaplanuj atak

Dowiedz się, jaki powinien być stan początkowy i końcowy każdego elementu. Zobacz, gdzie ma nastąpić każdy czas przejścia. Wykorzystaj BEM w klasach CSS, aby wyraźnie zastosować animacje. Zrozum powody, dla których JavaScript powinien być ograniczany na korzyść CSS.

Przyjrzyjmy się animacji opisanej wcześniej. Wyskakuje na nas pięć stanów:

1. stan początkowy, z czerwoną kulą i cieniem;
2. powiększona wersja piłki z dłuższym cieniem;
3. ruch piłki po okręgu;
4. zmniejszanie kuli wraz z jej cieniem;
5. powrót do stanu początkowego, czekając na wyzwolenie.

W przypadku wszystkich pięciu stanów powinniśmy przyjrzeć się, jaki jest styl przed i po czym. Dostarczy nam to informacji o tym, jakich narzędzi do animacji będziemy potrzebować, aby go wdrożyć.

Aby to zrobić, zaczynamy od podstawowego stylu przypadku. Może to być nic, jeśli element pojawia się znikąd, lub może to być poprzedni styl w przypadku animacji połączonych.

Zachowaj prostotę , wprowadzając bardzo niewiele zmian w stylach między stanami. Po zidentyfikowaniu stanów początkowych i końcowych musimy oznaczyć je jako klasy CSS, aby można je było łatwo zastosować do elementu. Daje nam to elastyczność w używaniu JavaScript do obsługi aplikacji klas opartych na danych otrzymanych z wywołań AJAX, od których element może zależeć.

BEM CSS jest idealny dla naszej strategii nazewnictwa, ponieważ przedstawiamy stany naszych animacji w toku za pomocą modyfikatorów. Jeśli animacja jest wystarczająco ogólna, BEM jest również dobrą metodologią do utrzymywania klas CSS DRY („nie powtarzaj się”), które działają w różnych bazach kodu. Zaczynaliśmy od samych znaczników bloków i elementów, a następnie nakładaliśmy modyfikatory w miarę postępów animacji.

Oto przykładowa podróż do klasy szablonu:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Zaczynamy od elementu kontenera z kulą klasy, która reprezentuje czerwoną kulę, którą animujemy. W miarę jak animacja powtarza się w całym środowisku, tak samo dzieje się z naszymi nazwami klas BEM , od skalowania w górę do poruszania się po okręgu. Jest to metoda śledzenia tego, jak element powinien wyglądać po zastosowaniu stylów.

4. Stała implementacja

Mając pod ręką zarys i narzędzia gotowe do użycia, powinniśmy odpryskiwać poszczególne etapy projektu.

Możemy iteracyjnie zająć się każdym stanem jako osobnym elementem, w razie potrzeby opierając się na poprzednim stanie. Mając jasno zdefiniowany stan, możemy bardziej skupić się na tym, aby nasz kod był suchy i łatwy do odczytania, a nie na szczegółach implementacji. I oczywiście fajnie byłoby dodać testy, aby objąć naszą logikę.

Stan początkowy

Zaczynamy od prostej czerwonej kuli z lekkim cieniem.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Skalowanie

Skalowanie w górę składa się z dwóch części: rozmiaru elementu i jego cienia. Używamy klatki kluczowej o nazwie scale , która jest dzielona zarówno przez skalowanie w górę, jak i w dół dla DRY-ness do obsługi tej animacji.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Okrążanie (po zastosowaniu animacji skalowania w górę)

Używamy klatki kluczowej o nazwie circular , a także przesuwamy jej właściwość transform-origin , aby przesuwać element po okręgu, zaczynając od początku. Pamiętaj, że krążenie ma miejsce tylko po zakończeniu animacji zwiększania skali.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Skalowanie w dół (po zastosowaniu animacji okrążania i zwiększania skali)

Aby zmniejszyć skalę, ponownie używamy skali klatki kluczowej, z animation-direction: reverse , aby wykonać odwrotność do tego, co robi klasa scale-up. To sprowadza nas z powrotem do naszego pierwotnego stanu.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Demo pracy

Jeśli połączymy wszystkie te klasy w sekwencję, otrzymalibyśmy reprezentację CSS renderowania wykonanego w After Effects.

Kliknij piłkę, aby rozpocząć.

Zobacz kulę animacji pióra autorstwa Chrisa Ng (@chrisrng) na CodePen.

Wniosek

Narzędzia omówione w tym artykule nie są najnowocześniejsze, ale są ogólnie obsługiwane przez większość głównych przeglądarek, co sprawia, że ​​można z nich korzystać dzisiaj.

Wcześniej implementacja animacji była trudna, ponieważ oznaczała używanie zewnętrznych narzędzi, takich jak jQuery Animate, do wykonywania prostych czynności, takich jak przenoszenie elementów na stronie. Obecnie przejścia i animacje CSS można wykonywać natywnie i wydajnie, wykorzystując GPU.

Animacje to zawsze przeciąganie liny między deweloperem, projektantem i właścicielem produktu. Sztuką jest znaleźć złoty środek, gdzie wszyscy interesariusze są zadowoleni z jakości produktu. Mamy nadzieję, że ten przewodnik pomoże ci dokonać tego przejścia.