Vejledning til materiel bevægelse i After Effects

Et grundlæggende klistermark og arbejdsgang til animation af brugergrænseflader

Jeg har allerede delt, hvorfor Motion Design ikke behøver at være hårdt, men jeg ville gøre det endnu lettere for designere at bruge de materialebevægelsesprincipper, jeg kender og elsker. After Effects er det primære værktøj, som vores team bruger til at oprette bevægelseseksempler til retningslinjerne for materiale. Efter at have brugt det til at animere min fair andel af brugergrænseflader, ønskede jeg at dele mine arbejdsgangstips og ...

Min After Effects-klistermærke

Download dette grundlæggende klistermark for at se et projekt afsluttet ved hjælp af min strømlinede arbejdsgang (skitseret nedenfor). Det indeholder en samling af materialekomponenter, baseline UI'er og navigationsovergange.

Download det her

Fås under Apache 2.0. Ved at downloade denne fil accepterer du Googles servicevilkår. Googles privatlivspolitik beskriver, hvordan data håndteres i denne tjeneste.

Importerer aktiver i AE

Første ting først, vi har brug for aktiver til at animere. De fleste af de visuelle designere i vores team bruger Sketch, som som standard ikke er interface med AE. Heldigvis har Adam Plouff oprettet dette plugin, der tilføjer denne funktionalitet. Jeg brugte det til at importere vores bibliotek med baseline-materialekomponenter fra Sketch til AE. Disse aktiver findes i mærkatarkets mappe Komponenter.

Oprettelse af brugergrænseflader

Med dette bibliotek med baseline-komponenter kan nye UI'er hurtigt samles ved at trække dem ind i en ny AE-komp.

Et eksempel på importerede Sketch-komponenter, der trækkes til en AE-komp

Tilpasning af komponenter

Disse baseline-komponenter er en god start - nu skal de tilpasses for at skabe en bred vifte af UI'er. Det er her, Master-egenskaber i AE skinner. Denne ofte oversettede funktion gør det muligt at oprette et enkelt genanvendeligt aktiv, der hurtigt kan finjusteres uden at duplikere originalen. Det svarer til, hvordan tilsidesættelse fungerer med symboler i Sketch. For eksempel tilpasses appbjælken ofte ved at ændre dens ikoner, farver og skygger. Med det i tankerne tilføjede jeg disse tre elementer som Master-egenskaber for komponenten.

Et eksempel på hurtigt at finjustere en komponent ved hjælp af Master egenskaber

Ved at tilføje masteregenskaber til hver komponent kunne jeg hurtigt oprette en samling af brugergrænseflader til at animere. Du kan finde disse i mappen Baseline UIs i download.

En samling af UI'er oprettet ved hjælp af komponenter tilpasset med Master-egenskaber

Animerende overgange

Nu hvor vi har etableret en arbejdsgang til oprettelse af brugergrænseflader, er det tid til at animere. Eksemplerne i mappen Navigationovergange illustrerer en metode til anvendelse af Materiale bevægelsesmønstre i After Effects. Hvis du er interesseret i at lære mere om disse mønstre, skal du læse min tidligere artikel.

Eksempler på nav-overgange ved hjælp af Materiale bevægelsesmønstre

For at starte, animeres hver ejendom uden at lette. Forældersammensætningen ændres derefter tid til at anvende lempelse og indstille varighed for alle de indlejrede nøglerammer. Dette giver mulighed for hurtige justeringer af lempelse og varighed, da kun to gang ombyttede nøglerammer styrer hele overgangen. Det er også en simpel metode til at anvende en overordnet lettelseskurve på alle animerede elementer. Vedvarende elementer animerer med hele lempelseskurven. Udgående elementer afslutter, når kurven øges, og indgående elementer kommer ind, når de går langsommere. Læs mere her under “Kompleks koreografi”.

Denne metode kan bruges til konsekvent at animere de fleste overgange, der bruger Materiale bevægelsesprincipper. Det kan begynde at bryde sammen med mere komplekse strømme eller stærkt stiliserede overgange, men disse har en tendens til at være mindre almindelige.

After Effects er et så fleksibelt værktøj, det er svært at hævde, at en enkelt arbejdsgang er korrekt. Hver designer vil have unikke og gyldige tilgange til animationsudfordringer. Mit håb er, at disse tip vil fremkalde nogle ideer og hjælpe dig med at være en mere effektiv bevægelsesdesigner.