Masz jedną lub dwie ikony, które chcesz animować za pomocą animacji. Od czego byś zaczął Załóżmy, że masz pliki SVG, Illustrator CC i After Effects CC, ale rozwiązanie wymyka się Tobie.

W tym artykule pokażę, jak łatwo animować plik SVG, w tym przygotowanie pliku SVG w programie Illustrator i importowanie do programu After Effects CC. Wyjaśnię również, jak możesz przekonwertować go na warstwy kształtów i dodać ruch. Na koniec porozmawiajmy o eksportowaniu i renderowaniu.

Końcowy wynik pracy.

Przejdźmy teraz do najciekawszej części - naucz się animować obrazy.

Przygotowywanie pliku SVG w programie Illustrator

Zacznijmy od otwarcia pliku SVG w programie Adobe Illustrator CC. Będę animować ikonę małego samochodu, która jest dostępna bezpłatnie w tygodniu ikon.

Po otwarciu pliku musimy rozgrupować i podzielić wszystkie obiekty na warstwy. Możesz to zrobić ręcznie lub użyć Release to Layers (Sequence)  aby przyspieszyć proces. Przed zaimportowaniem pliku do programu After Effects musimy go zapisać w formacie pliku programu Illustrator.

  Możemy rozgrupować obiekty za pomocą Release to Layers (Sekwencja), aby nie marnować cennego czasu.

Zaimportuj i zorganizuj plik w programie After Effects CC

Wszystko jest teraz gotowe do zaimportowania do programu After Effects CC. Użyjmy skrótu klawiaturowego Ctrl + I (Windows)lub Command + I (Prochowiec)aby załadować okno dialogowe Importować pliklub przejdź do Plik\u003e Importuj\u003e Plik ...  W tym samym miejscu wybierz przygotowany przez nas plik Illustrator CC i kliknij Import.Powinno pojawić się małe okno dialogowe z nazwą wybranego pliku. Wybierz Kompozycja  z rozwijanej listy o nazwie Rodzaj importu.

  Szybszym sposobem zaimportowania pliku jest dwukrotne kliknięcie kolumny w panelu projektu.

W panelu Oś czasu zobaczymy nową kompozycję. Kliknij dwukrotnie. Teraz powinniśmy zobaczyć warstwy programu Illustrator CC z pomarańczowymi ikonami po lewej stronie nazw.

Zanim przejdziemy do biznesu, musimy przekształcić wszystkie te warstwy Warstwy kształtowe. Musimy je wszystkie podkreślić Ctrl + A / Command + Alub ręcznie za pomocą Shift + lewa mysz. Następnie kliknij warstwę prawym przyciskiem myszy i wybierz Utwórz\u003e Utwórz kształty z warstwy wektorowej.

Po wybraniu nowych warstw przeciągnij je na górę panelu nad warstwami programu Illustrator CC, a następnie usuń warstwy programu Illustrator CC, aby nie przeszkadzały.

  Konwertuj warstwy programu Illustrator CC na warstwy kształtów w programie After Effects CC

Chociaż nie jest to konieczne, ważne jest, aby nadać każdej warstwie odpowiednią nazwę i / lub oznaczyć ją kolorem. Umożliwi nam to wydajniejszą pracę, ponieważ skupimy się na kluczowym personelu. W poniższym przykładzie kolory etykiet mniej więcej odpowiadają wypełnieniu ich odpowiednich warstw.

  Oznaczanie warstw kształtów odpowiednimi nazwami, kolorami, etykietami i układem jest bardzo praktyczne.

Użyj skrótu klawiaturowego, aby skonfigurować ustawienia. Ctrl + K / Command + K  lub Kompozycja\u003e Ustawienia kompozycji ...  Z Ustawień kompozycji musimy wybrać szerokość, wysokość, liczbę klatek i czas trwania (szerokość, wysokość, częstotliwość klatek i czas trwania). W tym projekcie wybrałem 60 klatek na sekundę, aby animacja była płynna.

W tej chwili wydaje się, że wszystko jest gotowe do pracy, ale jest jeszcze jedna rzecz do zrobienia. Musimy zgrupować niektóre warstwy razem, aby ich ruchy były zsynchronizowane z warstwą główną, którą możemy kontrolować. Ta metoda jest nazywana Rodzicielstwo.

  Użyj Pick Whip, aby przypisać warstwę macierzystą do wielu warstw.

W naszym przykładzie przypisałem mniej znaczącym warstwom (warstwom potomnym), takim jak przednia szyba, części ciała, drewno i liny do podstawowej warstwy ciała (warstwa macierzysta). To pozwoliło mi kontrolować pozycję i obrót całego samochodu (z wyjątkiem kół) za pomocą warstwy macierzystej.

Utwórz animację

Chciałem, żeby samochód uderzył w kamień i zawisł trochę w powietrzu. Chciałem też, aby drzewo poruszało się w górę iw dół, a pień się otwierał. Zacząłem od stworzenia kamienia, samochodów i kół. Potem nadszedł czas na pokonanie największej przeszkody - działania na choinkę. Po zakończeniu tego zająłem się drobnymi szczegółami, takimi jak pień i liny.

  Szkic animacji

Pierwszym krokiem było stworzenie elementu lub warstwy w formie kamienia, ale zamiast wracać do programu Illustrator CC w celu dodania kolejnej warstwy, po prostu użyłem narzędzia Pióro w programie After Effects CC. To pozwoliło mi szybko zaprojektować mały kamień.

  Och, potężne narzędzie Pen!

Bagażnik był stosunkowo prostym zadaniem. Zainstalowałem go z tyłu samochodu i zrobiłem punkt odniesienia w lewym dolnym wierzchołku. Za pomocą Pick Whip przypisałem go do nadrzędnej warstwy ciała. Przedostatnim krokiem było nadanie efektu obrotu, co z kolei sprawiło, że moment odbicia samochodu stał się bardziej realistyczny Bodymovin w połączeniu z mobilną biblioteką Lottie.

P.S.  Możesz znaleźć moje pliki programu Illustrator CC i After Effects CC.

Zestaw ikon można pobrać bezpłatnie na stronie.

Format pliku Flash (SWF) jest oparty na wektorze i przeznaczony do skalowalnej, kompaktowej grafiki w Internecie. Ponieważ ten format pliku oparty jest na grafice wektorowej, obiekt utrzymuje jakość obrazu w dowolnej rozdzielczości i jest idealny do tworzenia ramek animacyjnych. W programie Illustrator możesz tworzyć osobne klatki animacji na warstwach, a następnie eksportować warstwy obrazów do osobnych klatek do użytku na stronie internetowej. Możesz także zdefiniować postacie  w pliku programu Illustrator, aby zmniejszyć rozmiar animacji. Podczas eksportowania każdy znak jest definiowany w pliku SWF tylko raz.

Polecenie eksportu (SWF)

Zapewnia największą kontrolę nad animacją i kompresją bitów.

Zapewnia większą kontrolę nad mieszaniem formatów SWF i bitów w pofragmentowanym układzie. To polecenie oferuje mniej parametrów obrazu niż polecenie Eksport (SWF), ale używa ostatnio używanych parametrów polecenia Eksport (patrz).

Przygotowując obiekt do zapisania w formacie SWF, pamiętaj o następujących zaleceniach.

Za pomocą Device Central możesz zobaczyć, jak program Illustrator będzie wyglądał w programie Flash Player na różnych urządzeniach przenośnych.

Wstaw grafikę programu Illustrator

Grafikę utworzoną w programie Illustrator można szybko, łatwo i łatwo skopiować i wkleić do aplikacji Flash.

Po wklejeniu grafiki programu Illustrator do aplikacji Flash zachowane są następujące atrybuty.

Kontury i kształty

• Grubość obrysu

  Definicje gradientu

  Tekst (w tym czcionki OpenType)

  Powiązane obrazy

• Tryby mieszania

Ponadto programy Illustrator i Flash obsługują następujące funkcje podczas wstawiania grafiki.

Gdy wybierzesz całe warstwy najwyższego poziomu w obiekcie graficznym Illustrator i wkleisz je do aplikacji Flash, warstwy i ich właściwości (widoczność i blokowanie) zostaną zapisane.

Formaty kolorów inne niż RGB Illustrator (CMYK, skala szarości i formaty niestandardowe) są konwertowane przez Flash na RGB. Kolory RGB są wklejane w zwykły sposób.

Podczas importowania lub wklejania grafiki programu Illustrator można użyć różnych parametrów, aby zapisać określone efekty (na przykład cień rzucany przez tekst) jako filtry Flash.

Flash zapisuje maski programu Illustrator.

Eksportuj pliki SWF z programu Illustrator

Pliki SWF eksportowane z programu Illustrator mają podobną jakość i współczynnik kompresji jak pliki SWF eksportowane z Flash.

Podczas eksportowania możesz wybrać jeden z wielu predefiniowanych stylów zapewniających optymalną wydajność i określić, jak korzystać z kilku obszarów roboczych, jak konwertować znaki, warstwy, tekst i maski. Na przykład można określić eksport symboli programu Illustrator jako klipy lub obrazy graficzne, a także tworzenie symboli SWF z warstw programu Illustrator.

Zaimportuj pliki programu Illustrator do aplikacji Flash

Aby utworzyć kompletny układ w programie Illustrator, a następnie zaimportować go do aplikacji Flash w jednym kroku, możesz zapisać obiekt graficzny w rodzimym formacie programu Illustrator (AI) i zaimportować go z dużą precyzją do aplikacji Flash za pomocą Plik\u003e Importuj do pracy obszar ”lub„ Plik ”\u003e„ Importuj do biblioteki ”.

Jeśli plik programu Illustrator zawiera wiele obszarów roboczych, wybierz obszar roboczy do zaimportowania z okna dialogowego Importuj we Flashu i określ ustawienia dla każdej warstwy w tym obszarze roboczym. Wszystkie obiekty w wybranym obszarze roboczym są importowane do Flash jako pojedyncza warstwa. Podczas importowania innego obszaru roboczego z tego samego pliku AI obiekty z tego obszaru roboczego są importowane do Flasha jako nowa warstwa.

Podczas importowania grafiki programu Illustrator jako pliki AI, EPS lub PDF Flash zachowuje te same atrybuty, co podczas wklejania grafiki programu Illustrator. Ponadto, jeśli importowany plik programu Illustrator zawiera warstwy, możesz je zaimportować na jeden z poniższych sposobów.

Konwertuj warstwy programu Illustrator na warstwy Flash.

Konwertuj warstwy programu Illustrator na ramki Flash.

Konwertuj wszystkie warstwy programu Illustrator na jedną warstwę Flash.

Ostatnio różne rodzaje animacji SVG (Scalable Vector Graphics) na stronach i aplikacjach stały się bardzo popularne. Wynika to z faktu, że wszystkie najnowsze przeglądarki obsługują już ten format. Oto informacje na temat obsługi przeglądarki SVG.

W tym artykule opisano najprostszy przykład animacji wektora SVG za pomocą lekkiej wtyczki Jquery Lazy Line Painter.

  Kod źródłowy

Aby ukończyć i w pełni zrozumieć to zadanie, podstawowa znajomość HTML, CSS, Jquery jest pożądana, ale nie wymagana, jeśli chcesz tylko animować SVG). Zacznijmy!

I tak kroki, które musimy wykonać:

1. Utwórz poprawną strukturę plików
2. Pobierz i podłącz wtyczkę
3. Narysuj fajny obraz konturowy w programie Adobe Illustrator
4. Konwertuj nasz obraz na Lazy Line Converter
5. Wklej wynikowy kod do main.js
6. Dodaj trochę CSS do smaku

1. Utwórz poprawną strukturę pliku
  Pomoże nam w tym usługa Initializr, w której musisz wybrać parametry jak na poniższym obrazku.

• Classic H5BP (płyta kotła HTML5)
• Bez szablonu
• Tylko HTML5 Shiv
• Zminimalizowane
• Klasy IE
• Chromowana ramka
• Następnie kliknij Pobierz!

2. Pobierz i podłącz wtyczkę

Ponieważ initializr zawiera najnowszą bibliotekę Jquery, z archiwum musimy pobrać z repozytorium projektu Lazy Line Painter, musimy przenieść tylko 2 pliki do naszego projektu. Pierwszy to „jquery.lazylinepainter-1.1.min.js” (wersja wtyczki może się różnić), znajduje się w katalogu głównym odebranego folderu. Drugi to przykład / js / vendor / raphael-min.js.

Te 2 pliki są umieszczone w folderze js. I podłącz je do naszego index.html przed main.js w następujący sposób:

3. Narysuj fajny obraz konturowy w programie Adobe Illustrator

1. Rysujemy nasz kontur obrazu w programie Illustrator (najłatwiej to zrobić za pomocą narzędzia Pióro)
2. Konieczne jest, aby kontury naszej figury nie zamykały się, ponieważ dla naszego efektu potrzebny jest początek i koniec
3. Nie powinno być wypełnienia
4. Maksymalny rozmiar pliku - 1000 × 1000 px, 40kb
5. Utwórz kadr do granic obiektu Obiekt\u003e Obszary robocze\u003e Dopasuj do granic obszarów roboczych
6. Zapisz w formacie SVG (wystarczą standardowe ustawienia zapisu)

Na przykład możesz użyć ikon w załączniku.

4. Konwertuj nasz obraz na Lazy Line Converter
  Po prostu przeciągnij ikonę do pola na obrazku poniżej.
  Grubość, kolor konturu i szybkość animacji można zmienić w samym kodzie, który pojawia się po konwersji!

5. Wklej wynikowy kod do main.js
  Teraz wystarczy wkleić wynikowy kod do pustego pliku main.js
  Parametry:
  strokeWidth - grubość konturu
  strokeColor - kolor konturu
Możesz także zmienić prędkość rysowania każdego wektora, zmieniając wartości parametru czasu trwania (domyślnie 600)

6. Dodaj trochę CSS do smaku
  Usuń akapit z index.html

Witaj świecie! To jest Boilerplate HTML5.

I zamiast tego wstawiamy blok, w którym odbędzie się nasza animacja

następnie dodaj trochę CSS do pliku main.css, aby uzyskać ładniejszy wygląd:

Korpus (tło: # F3B71C;) # ikony (pozycja: stała; góra: 50%; lewa: 50%; margines: -300px 0 0 -400px;)

zapisz wszystkie pliki.
  Teraz wystarczy otworzyć index.html w nowoczesnej przeglądarce i cieszyć się efektem.

P.S. podczas uruchamiania na komputerze lokalnym rozpoczęcie animacji może być opóźnione o kilka sekund.

Przejrzysty plik GIF w programie Adobe Illustrator wykonuje się w następujący sposób. Przejdź do Plik\u003e Zapisz dla Internetu i urządzeń (Alt + Ctrl + Shift + S). W oknie, które zostanie otwarte, w polu Zoptymalizowany format pliku przejdź najpierw do zakładki Rozmiar obrazu  (Rozmiar obrazu). Faktem jest, że cała strona domyślnie wpada w okno optymalizacji, co zwykle nie jest konieczne. Dlatego na karcie Rozmiar obrazu odznacz pole. Klip do obszaru roboczego  (Przytnij, aby dopasować do strony) i kliknij Zastosuj.

Następnie na liście wyboru formatu wybierz GIF i zaznacz pole Przezroczystość.

Następnie określamy, które kolory będą przezroczyste. Wszystkie kolory obecne na obrazie są zawarte w zakładce. Tabela kolorów  (Karta kolorów) i są wyświetlane jako kolorowe kwadraty. Wybierz narzędzie na pasku narzędzi po lewej stronie okna Kroplomierz  (pipeta).

Istnieją dwa sposoby definiowania kolorów. Najprostszym sposobem jest określenie koloru za pomocą pipety bezpośrednio na obrazie - następnie kolor zostanie podświetlony na tablicy kolorów ciemnym pociągnięciem. Cóż, jeśli dokładnie wiesz, jaki kolor powinien być przezroczysty, możesz go wybrać bezpośrednio na tabeli kolorów, klikając odpowiednie pole koloru. W pierwszym i drugim przypadku, jeśli chcesz wybrać kilka kolorów, musisz pracować z wciśniętym klawiszem Shift (lub Ctrl). Po wybraniu koloru musisz poinstruować program, aby był przezroczysty. Aby to zrobić, kliknij ikonę Odwzorowuje wybrane kolory na Przezroczyste  (Dodaj wybrane kolory do przezroczystości). Na rysunku ten przycisk jest zakreślony kółkiem, a kolor czerwony jest wybrany jako przezroczysty. Na obrazie pojawi się przezroczysty obszar, a mały kwadrat na tablicy kolorów zmieni swój wygląd - jego część stanie się białym trójkątem. Aby cofnąć wybrany kolor, wybierz go w Tabeli kolorów, a następnie ponownie kliknij ikonę Mapuj wybrane kolory na Przezroczyste.

Kilka słów o sposobie ustawiania przezroczystości. Odpowiedzialne za to menu rozwijane. Określ algorytm roztrząsania przezroczystości, w języku rosyjskim - algorytm symulujący przezroczystość (ryc. poniżej). Można wybrać cztery opcje: Bez ditheringu przezroczystości - bez algorytmu, Dithering przezroczystości dyfuzyjnej - algorytm rozproszony, Dithering przezroczystości wzoru - algorytm oparty na wzorach i Dithering przezroczystości hałasu - algorytm oparty na szumach. W trybie algorytmu rozproszonego suwak staje się aktywny Kwota  (Wartość), co pozwala zmienić wartość dyfuzji. Co zastosować w praktyce? W zależności od celu i obrazu. Nie korzystam z tej opcji i zawsze pozostawiam ustawienie domyślne - Bez roztrząsania przezroczystości.

Kliknij Zapisz - przezroczysty plik GIF jest gotowy. Prace zostały wykonane w programie Adobe Illustrator w wersji CS4 (wer. 14), ale wszystkie działania i skróty klawiaturowe są istotne dla wcześniejszej wersji CS3 (wer. 13).

Adobe Illustrator i After Effects
  Import i prosta animacja

Cześć Dzisiejsza recenzja to prosta animacja w After Effects.

Zasoby: Adobe Illustrator CC
   Adobe After Effects CC

Rozpocznijmy badanie od rysowania w Illustratorze.

Remis
  1) Narysuj żółty prostokąt jako tło

Rysunek 1 - Prostokąt

2) Narysuj okrąg i wypełnij go gradientem
   Popracujmy trochę nad kołem:
   - usuń dolny punkt na konturze, uzyskaj łuk;
   - narysuj linię prostą, zamykając spód łuku, otrzymujemy półkole

Rysunek 2 - 1) narysuj okrąg; 2) gradient; 3) usuń punkt

3) Narysuj prostokąt i wykonaj jego kopię
   - jeden prostokąt jest szary;
   - drugi prostokąt jest ciemnoszary
  4) Rysujemy trójkąt z gwiazdki, ustawiając liczbę promieni - 3

Rysunek 3 - 1) światło proste; 2) prostokątny ciemny; 3)  trójkąt

5) Narysuj kota za pomocą pióra i prostych kształtów

Rysunek 4 - 1) głowa; 2) szyja; 3) ciało; 4) noga; 5) ogon

A teraz najbardziej GŁÓWNY  za chwilę
  Rozłóż zdjęcia na warstwy (co będzie animowane - na osobnej warstwie) w następujący sposób:

Rycina 5 - wszystkie zdjęcia (czerwony znacznik ważnych warstw)

Wszystko, teraz oszczędzaj.
  Zobaczmy ustawienia zapisu

Rysunek 6 - Zapisz

A teraz następny krok. BliskoAdobe Illustrator i otwórz program After Effects.

Importuj do After Effects
  Plik - Import - Plik - wybierz nasz zapisany plik  Ilustrator
Wybieramy import warstw z programu Illustrator, jeśli umieścimy materiał, otrzymamy obraz ze scalonymi warstwami, ale nie jest nam potrzebny.

Rysunek 7 - Importuj jako skład

Wszystkie zaimportowane.
  Zobaczmy teraz, co mamy. Kliknij dwukrotnie kompozycję otworzy się i zobaczyliśmy warstwy (jeśli wszystko zostało zrobione poprawnie, będzie kilka warstw). Rozumiemy to, patrz rysunek

Rycina 8 - Kompozycja otwarta

A teraz jesteśmy tu na dziś Animacja.

Animacja w Po efektach
Ustaw punkt obrotu na strzałce u góry za pomocą narzędzia Przesuń za (skrót - Y). Po prostu weź punkt i przenieś go tam, gdzie chcesz. W rezultacie będzie to wyglądać tak ...

Rysunek 9 - Narzędzie Przesuwanie i warstwy

Cóż, to wszystko, przejdź teraz do warstw animacji.
  Potrzebujemy warstwy Arrow i Head_cat.
  Zacznijmy od strzałki.
  Otworzymy listę, znajdź i kliknij zegar. Więc punkt pierwszy ustawiamy na zero sekund. W sumie animacja potrwa 2 sekundy.
  Oto ustawienia, które musisz wykonać (wystarczy umieścić 3 punkty)

druga	0	1	2
	+66	- 70	+66

Tak to będzie wyglądać:

Rysunek 10 - Strzałka obrotu

A teraz animujemy głowę kota.
  Rozwiń head_cat i znajdź Pozycja.
  Będą 4 punkty.
  Tylko ostatnia współrzędna zostanie zmieniona bez dotykania reszty.

druga	0.1	0.17	1.12	2.0
Pozycja	689.3	729.3	729.3	689.3

Patrzymy na zdjęcie.

Rysunek 11 - Ustaw głowicę

Tak więc zasada animacji była taka. Strzała kołysze się z boku na bok, gdy tylko zbliża się do kociaka, wciąga głowę w siebie, zatrzymuje się nieco w tej pozycji, a następnie przywraca ją na swoje miejsce.

Ostatni etap

Produkcja
  Konieczne jest stworzenie gotowego produktu z pracy.
  Przejdź do menu - Dodaj do kolejki renderowania
  Otwiera się panel Renderowania, aw module wyjściowym (dwa kliknięcia) wybieramy format wyjściowy. Wziąłem * .mov

Rysunek 12 - Renderowanie

Kliknij przycisk RENDER i uzyskaj wynik (pamiętaj tylko o podaniu ścieżki).
  To wszystko.