Mam kilka ilustracji wykonanych w programie Illustrator i planuję animować je dla witryny, nad którą pracuję. Słyszałem o zestawie narzędzi Create.js z lampą błyskową, ale czy jest to najlepsza droga, czy jest jeszcze inna ” lepszy „sposób na zrobienie tego?
Oto przykład animacji, do których dążę: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Odpowiedzi:
Istnieje wiele sposobów animowania rzeczy w Internecie. Istnieje jeszcze więcej sposobów tworzenia animacji niż eksportowania do animacji internetowych.
Projektowanie animacji w programach AfterEffects lub Animate CC (które mogą importować pliki programów Illustrator i Photoshop) ma ogromne zalety z oczywistych powodów podziału pracy i korzystania z edytora graficznego.
Mając to na uwadze, zawsze powinieneś zawsze kompilować się do jednego z poniższych :
Ograniczone możliwości interakcji:
Bardziej w pełni interaktywny:
Teraz przejdę do każdego bardziej szczegółowo.
GIF to dobry sposób na przejście, gdy animacje nie wymagają dużej interakcji, nie muszą być dynamicznie zmieniane i są względnie małe. Dobrze wykonane pliki GIF mogą być tak szczegółowe, jak ilustracja, którą połączyłeś, bez żadnych problemów z wydajnością. Możliwa jest nawet niewielka interakcja przy użyciu przezroczystej nakładki (lub tylko jej części).
Uwaga dodatkowa: istnieje teraz .gifvformat utworzony przez Imgur, który konwertuje pliki GIF w locie na formaty wideo WebM lub MP4. Zwiększa to wydajność, znacznie zmniejszając rozmiar pliku końcowego. Możesz rozważyć zrobienie tego samego.
Innym sposobem na zachowanie płynnej, ale stylizowanej animacji jest użycie duszka. Google stosuje to podejście do animacji logo . Innym świetnym przykładem jest stara strona Aleksandra Engzella, która miała chore animacje typograficzne przy użyciu tego podejścia. Jest to optymalne, gdy GIF byłby zbyt duży, ale nie potrzebujesz dużej interakcji.
Widziałem także bardzo interesującą animację JavaScript, która przypomina duszka lub GIF używany przez Google (najedź na obraz Chrome w lewym górnym rogu - wymaga to przeglądarki Chrome), ale zamiast tego używa animowanej maski. Zgaduję, że zastosowali to podejście do ograniczenia całkowitego rozmiaru pliku.
W ostatnich latach zyskaliśmy ogromne możliwości dotyczące wideo. Ten <video>element pozwala nam dostosować sposób interakcji i wykorzystywać filmy, jak nigdy dotąd. Teraz możemy łatwo korzystać z pełnoekranowych filmów w tle i wykonywać takie czynności, jak przewijanie klatka po klatce podczas przewijania . Zauważyłem również, że FaceBook wykorzystuje wideo do niektórych prostych animacji, gdy wita użytkowników na ich temat wokół specjalnych wydarzeń. Zaletą jest to, że można go skompresować do dość małego rozmiaru pliku i może wykonywać szerszy zakres animacji (wszystko, co może zrobić oprogramowanie do edycji wideo). W związku z tym, jeśli ktoś może zrobić chore wideo, dość łatwo jest zamienić go w fantastyczny dodatek do strony internetowej.
Oczywiście filmy nie nadają się do większości animacji w sieci (np. Przejścia przycisków itp.), Więc nie używaj ich wszędzie.
Biorąc to wszystko pod uwagę, jeśli chcesz, aby animacja była generowana dynamicznie, gdy potrzebujesz więcej niż naprawdę podstawowej interakcji, gdy chcesz tworzyć środowiska 3D, aw wielu innych przypadkach GIF, duszek lub wideo po prostu nie będą utnij to. Po podjęciu decyzji istnieje kilka innych opcji, z których najlepsze zależą od animacji i potrzeb.
Nie mam statystyk, ale większość animacji internetowych, które widziałem, wykorzystuje płótno . Płótno jest świetne w użyciu ze względu na jego wydajność i elastyczność w tworzeniu. Używa tylko jednego elementu przeglądarki (DOM), ponieważ po prostu maluje - jak na prawdziwym płótnie - elementy jeden na drugim. Śledząc, co jest namalowane i gdzie za pomocą JavaScript, możemy stworzyć całkiem niesamowite animacje, a nawet gry.
Jednak podstawową wadą używania płótna jest jego względna trudność w skalowaniu. Często, w zależności od animacji, trudniej jest stworzyć responsywną animację Canvas niż przy użyciu innych środków. Inną wadą jest to, że posiadanie dużej ilości treści na kanwie nie jest zbyt przyjazne SEO, ponieważ elementów kanwy nie można indeksować (możesz obejść ten problem, umieszczając ukryty wizualnie kod HTML treści, jeśli dotyczy). Z tej samej uwagi rzeczy takie jak zaznaczanie tekstu dla użytkowników są trudne z Canvas (szczególnie bez korzystania z biblioteki takiej jak CreateJS).
Doskonałym wykorzystanie płótna Google Doodles , które są często wykonywane na płótnie. Kiedy mają grę lub interaktywną animację, używają Canvas za każdym razem, gdy patrzę. Jeśli nie ma interakcji, użyją GIF-a lub duszka.
Istnieje wiele świetnych bibliotek, które ułatwiają pracę z Canvas, choć zdecydowanie nie jest to wymagane w zależności od tego, co należy zrobić. Wśród tych stworzonych specjalnie dla Canvas są CreateJS (do którego możesz eksportować z Animate CC), Pixi.js , PaperJS , KineticJS i FabricJS (ułożone w kolejności według moich wrażeń na ich temat). Wtyczka After Effects o nazwie Lottie (wcześniej BodyMovin) może również eksportować do Canvas (lub SVG [1] ) i ma wbudowany silnik animacji.
Oczywiście można również łatwo sparować większe biblioteki animacji, takie jak GSAP, z Canvas. W przypadku czegoś tak szczegółowego, jak ilustracja, którą połączyłeś, zaleciłbym użycie pewnego rodzaju frameworka, ale w przypadku wielu rzeczy nie są one tak naprawdę konieczne, a jedynie przydatne - szczególnie, jeśli wiesz już, jak korzystać z jednego z nich.
Innym niewiarygodnie potężnym sposobem animowania rzeczy w Internecie w łatwo reagujący sposób jest użycie SVG ( Scalable Vector Graphics ). Spełniają swój cel - wektory skalowalne - dobrze. Wielu uważa, że używanie SVG na początku jest mylące, ale większość rzeczy, takich jak układ współrzędnych SVG i transformacje, zawiera świetne artykuły wyjaśniające je.
Jedną z wielu uroczych cech SVG jest to, że może być animowana za pomocą JavaScript, czystego CSS (w tym :hoverstanów, transforms, transitions i animations) lub animacji SMIL („natywny” sposób animowania rzeczy za pomocą SVG - ale IE nie robi tego w ogóle go wspiera i jest stopniowo amortyzowany ). Polecam najpierw spróbować użyć CSS, a następnie JavaScript, gdy nie jest to (względnie) proste w CSS. Do przekształcania elementów SVG praktycznie konieczne jest użycie narzędzia takiego jak wtyczka MorphSVG GSAP, chyba że nie masz nic przeciwko jedynie częściowemu wsparciu, w którym to przypadku SMIL może być akceptowalny.
Ponieważ elementy SVG mogą mieć dowolny kształt, można ich używać do tworzenia fajnych efektów . Sarah Drasner przeprowadziła kilka pomocnych testów wydajności dotyczących animacji SVG, które pokazują, które sposoby animacji SVG są najlepsze pod względem wydajności.
W zależności od animacji (i potrzeby obsługi przeglądarki), biblioteka taka jak Snap.svg lub GSAP może być przydatna, ale często CSS i, w razie potrzeby, wystarczy trochę niestandardowego JS. Biorąc to pod uwagę, wtyczka After Effects o nazwie Lottie (wcześniej BodyMovin) i rozszerzenie Flash o nazwie Flash 2 SVG mogą być naprawdę pomocne w tworzeniu animacji SVG.
Aby uzyskać więcej informacji, spójrz na ten pokrewny post dotyczący animacji elementów SVG.
PS Najlepiej jest używać plików SVG w <object>tagu lub osadzonych bezpośrednio w <svg>elemencie XML, jeśli jest on interaktywny, i jako obraz tła, jeśli nie jest interaktywny, ale są też inne sposoby na to.
Z mojego doświadczenia wynika, że animacje i przejścia CSS powinny być używane przede wszystkim w elementach interfejsu użytkownika oraz innych podstawowych przejściach i animacjach. Nawet wtedy czasami odpowiednie jest użycie biblioteki animacji JS, takiej jak GSAP lub Velocity.js, do animacji / przejść interfejsu użytkownika. To zależy od rodzaju pożądanego zachowania i tego, czy jest to wygodne w CSS.
Chociaż możemy tworzyć szalone rzeczy za pomocą czystego CSS, generalnie trudniej jest tworzyć skomplikowane ilustracje, takie jak te, które podajesz jako przykład przy użyciu CSS, nawet przy dodatkowym manipulowaniu obrazami. Złożone animacje CSS są często trudniejsze w utrzymaniu niż ich odpowiedniki JavaScript. Inną wadą jest to, że animacje CSS są trudne do zmiany za pomocą JavaScript i nie działa zbyt dobrze po zmieszaniu z JavaScript.
Mając to na uwadze, proste interakcje z wykorzystaniem przejść i animacji powinny zwykle korzystać z CSS; powinieneś to zrobić domyślnie. Aby rozpocząć naukę animacji za pomocą CSS, zapoznaj się z moim wprowadzeniem do animacji internetowej .
W bibliotekach takich jak Animate.css można także znaleźć pomocne animacje i funkcje łagodzące , które można pobierać i dodawać do własnych projektów. Prawie nigdy nie będziesz potrzebować całej biblioteki, weź tylko te części, które chcesz.
Animacje JavaScript oparte na DOM są dość proste. Mają złą reputację z powodu okropnych bibliotek animacji, takich jak jQuery animate(), ale mogą być szczególnie wydajne, szczególnie przy użyciu API animacji internetowych (omówionych poniżej) lub specjalistycznej biblioteki animacji, takich jak GSAP , Velocity.js lub mo.js ( GSAP ma nawet specjalną wtyczkę, która specjalnie zastępuje jQuery .animate). Korzystając z takiej biblioteki, często mogą przewyższać inne rodzaje animacji w przypadku bardziej intensywnych animacji, takich jak animacja wielu elementów.
Głównym powodem, dla którego musisz użyć animacji opartej na modelu DOM, jest to, że masz dużo animacji użytkownika lub skomplikowanych ram czasowych zawierających już utworzone elementy DOM. Często najlepiej jest użyć czegoś takiego jak Canvas nad DOM z powodów już określonych.
Biblioteki takie jak GSAP pozwalają nam robić szalone rzeczy, takie jak spowolnienie animacji po najechaniu myszą, śledząc matryce animacji. W ten sposób animacje oparte na DOM mogą być bardziej spersonalizowane i interaktywne niż każda inna forma animacji, jeśli są dobrze wykonane. Jedynym minusem jest to, że czasami, w zależności od tego, jak jest zbudowany i co musi zrobić, nie będzie dobrze.
WebGL to sposób na tworzenie przede wszystkim prac 3D. Ma niesamowite projekty , które powinieneś sprawdzić. Oczywiście nie można go stosować na każdej stronie internetowej, ale należy o tym wspomnieć.
W rzeczywistości animuje elementy DOM do tworzenia środowisk 3D (i 2D), co jest niesamowite ze względu na potencjał. Podczas korzystania z biblioteki WebGL wraca do korzystania z Canvas, ale nadal nie ma doskonałej obsługi na urządzeniach mobilnych i może być bardzo wydajna. Zasadniczo jest całkiem jasne, kiedy trzeba używać WebGL, czy nie.
Z mojego doświadczenia wynika, że korzystanie z biblioteki WebGL jest praktycznie konieczne. Na szczęście są dobre. ThreeJS jest zdecydowanie najczęstszym, jaki widziałem, a następnie PixiJS . Środowisko WebGL, takie jak A-Frame, może również ułatwić pobieranie i tworzenie podstawowych rzeczy.
Animacje Web API jest próbą standaryzacji jak animacje są realizowane i utrzymywane w różnych przeglądarkach sparowanych z poprawą wydajności. Jest przeznaczony do użytku z elementami DOM, w tym SVG. Przypomina to strukturę animacji CSS (w formie JS), ale dodaje takie funkcje, jak oś czasu i zwiększona wydajność.
Poprawia wydajność poprzez umieszczanie animacji w wątku kompozytora (więcej szczegółów można znaleźć w tym świetnym poście na ten temat). Aby zapoznać się ze sposobem korzystania z niego, zapoznaj się z dokumentacją Mozilli lub tym wprowadzającym postem .
Możesz zapytać: „ Czy to zastąpi biblioteki animacji JavaScript? ” Odpowiedź brzmi „ Mam nadzieję, że niektóre ”. Udoskonalenie natywnych mechanizmów animacji przeglądarki jest korzystne dla wszystkich, a wraz z nimi niektóre słabsze biblioteki animacji staną się bezużyteczne. Biorąc to pod uwagę, bardziej rozbudowane biblioteki animacji nadal będą miały dodatkowe zalety, takie jak te odnotowane przez GSAP . To, czy potrzebujesz biblioteki po szerokim wsparciu WAAPI, zależy od twoich potrzeb.
WAAPI obecnie nie ma dobrego wsparcia, ale dziś można go stosować z polifillem w produkcji. Wygląda na to, że będzie coraz lepiej i otrzyma więcej wsparcia.
Unikaj korzystania z właściwości, które nie są wydajne lub powodowania ponownego wlewania / odmalowywania .
Unikaj animowania wielu elementów na stronie, ponieważ są one bardziej intensywne, a zmiana może być później trudna.
Korzystając z CSS, użyj transitionanimacji, o ile to możliwe (z uzasadnionego powodu). Działają lepiej i są z reguły łatwiejsze w obsłudze.
Inteligentnie użyj tej will-changewłaściwości w przypadku dużych elementów, które zamierzasz animować, aby przeglądarka wiedziała z wyprzedzeniem. Aby uzyskać więcej informacji i sugestii na ten temat, przeczytaj coś na ten temat w tym artykule SitePoint na ten temat.
Unikaj setIntervali wybieraj requestAnimationFramepodczas wykonywania pomiaru czasu w JavaScript (dobre biblioteki animacji, takie jak GSAP, robią to za Ciebie, jeśli korzystasz z ich osi czasu).
Gdy możesz, użyj interfejsu API animacji internetowych, ponieważ ma on możliwości animacji innymi metodami w JavaScript, których nie ma.
Nigdy nie należy uruchamiać Flasha w produkcie końcowym . Animacje JavaScript działają lepiej, są bardziej dynamiczne, są łatwiejsze do edycji, nie wymagają pobierania, działają na większej liczbie platform (Flash nie działa na większości tabletów / telefonów) i są bardziej responsywne niż nieporęczne stare Flash. Nie są również bardzo dostępne i nie są przyjazne SEO.
Biorąc to pod uwagę, program Animate CC (rebranding Flasha) jest przydatnym sposobem tworzenia animacji i można go eksportować do Canvas przy użyciu Create.js .
Zazwyczaj istnieje wiele metod tworzenia animacji. Najlepszy zależy od tego, co chcesz zrobić, a czasem nie ma wyraźniej lepszej metody. Często zdarza mi się, że używam wielu w tym samym projekcie. Ważne jest, aby myśleć krytycznie , dokładnie zrozumieć, jak ma się zachowywać animacja i na tej podstawie zdecydować o metodzie. Pomaga również, jeśli pracowałeś nad każdym z nich.
[1] - Lottie może również eksportować do natywnego Androida, iOS i React Native .
Z mojego doświadczenia wynika, że podczas wykonywania animacji statycznych (animacji nieprzeznaczonych do interakcji z użytkownikiem) odkryłem, że najlepiej działało dla mnie animowanie ilustracji w programie After Effects, a następnie eksportowanie ostatecznego wyniku do pliku .GIF. To sprawia, że animacja jest całkowicie przyjazna dla przeglądarki i gwarantuje identyczną wizualizację na dowolnym urządzeniu.
Jeśli jednak szukasz czegoś, z czym użytkownik mógłby wchodzić w interakcje, uważam, że Canvas jest naprawdę dobrym rozwiązaniem, a do tego CreateJS wydaje się być odpowiedni do pracy z biblioteką EaseJS.
W każdym razie, zgodnie z twoim przykładem, możesz równie dobrze zrobić to z animowanym plikiem GIF i uzyskać dokładnie ten sam wynik.
Jeśli pracujesz z After Effects, możesz użyć wtyczki Bodymovin . Sprawia, że Twoja praca jest do użytku mobilnego i internetowego. Będziesz miał plik .json i lottie.js, którego możesz użyć w swoim HTML. Ale najpierw musisz wyłączyć Zezwalaj skryptom na zapisywanie plików i dostęp do sieci w ustawieniach ogólnych. Gdy to zrobisz, przejdź do Window , Extensions i znajdź Bodymovin . Wybierz kompozycję, ustaw lokalizację do zapisania i kliknij przycisk renderowania. Umieść swoje pliki .json i lottie.js w kodzie HTML i praca jest zakończona. Myślę, że GIF nie jest najlepszym rozwiązaniem, ponieważ wymaga więcej czasu na załadowanie.
Możesz go pobrać tutaj: http://aescripts.com/bodymovin Po prostu dodaj swoją cenę, a jeśli chcesz za darmo, możesz po prostu umieścić 0,00 $ ...
Oto samouczek dotyczący korzystania z Bodymovin i ustawiania animacji w witrynie za pomocą Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Jeśli znasz podstawy HTML i CSS, to powinno być dla Ciebie łatwe. Ten samouczek pomógł mi, mam nadzieję, że może ci to pomóc.