Sculpting Software Animation

At designe animation er skulptur tid. Timing er kritisk. Hvis du ikke overvejer animationstiming, designer du ikke animation.

Animation er visuel musik. Dygtige animatorer anvender rytme, timing, tempo, komposition, struktur og dynamik.

Året er 2018, interfaceværktøjer tilslutter endelig animation, men mange mangler mærket. De boltrer naivt på animation i stedet for at give brugerne håndtag til at kontrollere animationstimingen. Derfor er der nu et landskab af software-værktøjer, der promoterer grødet animation.

Der er et væld af viden indlejret i klassisk animation. Vi behøver ikke at opfinde hjulet igen.

Udløst af bevægelse

Du sætter dig først ned ved en biograf for at se en flick, og du bemærker sandsynligvis udgangsskiltene, kanten af ​​skærmen, hovederne til andre lånere efter din mening. Hvis filmen ikke suger, falder alt stationært væk, og du føler dig indhyllet på billedet. Det vil sige, indtil nogle jackass ser på deres Instagram-meddelelser i din perifere vision, og du er pisket tilbage til virkeligheden.

Vi bemærker typisk, når ting bevæger sig, og holder op med at lægge mærke til dem, når de stadig er.

Bevægelse holder vores opmærksomhed, så det er værd at overveje, hvordan vi styrer det.

Optisk toil

At lære, at ”Disneys 12 principper for animation” findes, er ikke nok. Det er som om en designer opdager, at design er sådan det fungerer ™ og kalder det for en dag.

En klassisk driblerkommentar

Uerfarne interfaceanimatorer har en tendens til at over-animere alt. Dette er i konflikt med stræben efter 'glæde'. De opretholder en dyrebarhed omkring de nøglerammer, de har placeret, og glemmer at det bliver træt på øjet. Der er en falsk antagelse om, at seeren sidder rundt med lokket ånde og leder efter hårdt arbejde. Dette forstærkes af samfund som dribler, hvor brugere kaster bukserne med spænding, når de ser animation, fordi de aldrig har set det før. Sandheden føles den bedste animation usynlig.

Her er en klassisk ting, vi ser i interfacearbejdet i dag: Den kraftige brug af fjedre.

Grødet

Det svingende interfaceelement holder vores opmærksomhed uden grund. Vores øjne samles til at fokusere på det, fordi det tager for lang tid at peter ud. Der er spænding, og vi er sultne på, at slutpositionen skal løses.

Forbedret med kontrolleret fjedertiming.

Vores element føles som om det har en hensigt, hvis vi reducerer mængden af ​​overskydende svingninger. Det er kortfattet, men stadig polstret med en enkelt, forsætlig overskridelse. Dette kan opnås ved at indtaste fjedre, parametriske nøglerammer eller håndtiming. I sidste ende, hvordan det føles, er det, der betyder mest.

Lad os tale om morfiske ting

En play-knap forvandles til en hamburger, derefter til en luk knap, så den bliver til en and.
kom nu…

En anden usmagelig grænseflade trope ... se, den overdådige hamburger menu. Selv hvis du gjorde det uden en fjeder, er det højt. Vi behøver ikke at se en bogstavelig, opmærksomhedsfangende overgang for at opfatte en tilstandsændring. Du behøver ikke at morfeste alt ind i alting.

Mushy hamburger Ikon i sammenhæng

Lad os se det i sammenhæng. Stil ind, hvor dine øjne kigger. Bemærker du, at ikonet klapper rundt længe efter at den bredere overgang er afsluttet? Det vigtigste er den større tilstandsændring, der udløses af knappen. Over-animeret vrøvl i hamburgerikonet deler din opmærksomhed her.

En mere up to-point tilgang er ikke at forme ikonet overhovedet. I stedet kan vi fokusere på at bruge subtile animationsgoder til at kommunikere interaktion. Det handler ikke om at fange øjet. Det handler om at styre det. Denne knap er udstyret med en depression og snappet fjederbakke med en kraftigt dæmpet lethed for at håndhæve følelsen af ​​at trykke på en knap.

I sammenhæng. Undskyld Medium's gif-komprimering ...pas på optisk arbejde

Det er nyttigt at tænke på, hvordan du fører øjet hen over skærmen. Tænk på dine øjenkugler, der svinger i deres stikkontakter, dart rundt, accelererer, decelererer. Du leder blikket, når du animerer. Hvor tilføjer du accenter? Hvor skal øjet sætte sig? Mere sporing kræver mere fysisk og mental forpligtelse. Er det værd at optisk træthed at tilføje noget finurligt offset-animation? Der er nuance for balance; en bevægelsesøkonomi.

Formel vs følelse

Bestem disse selv. Start ikke med dem. Jeg taler om de ordinerede, stive, sort / hvide ting som IBM og Google Formler. Vær skeptisk.

Stol ikke på tallene, stol først på dine øjne og følelser. Du kan bøje virkelighedens regler. Bevægelse er en illusion, og man bliver tryllekunstner.

Overvej motivation og intention for hvert element, du koreograferer. Det bogstavelige er ikke altid bedre. Animation er et medium, hvor det umulige er passende. Det er rigtigt, når det føles rigtigt.

Tag disse eksempler sammenlignet side om side. De gør begge ting den samme, men med forskellige timinger.

Eksemplet til venstre er for bogstaveligt. En visning, der præsenterer sig selv på skærmen, behøver ikke at starte fra 0% skala og animere helt op til 100% skala for at antyde, at den gyver ud i rummet.

Du kan opleve en punchier version ved at vise resultatet og tidens visps lidt før. Alt hvad vi skal gøre er at bære øjet. Til højre starter vi skalaen på 90% og nærmer os 100% temmelig hurtigt. Vi føler skalaen uden at skulle sidde igennem og se enhver værdi mellem 0–100. Ingen har tid til den lort!

Retter øjet til at følge hurtig handling. - Animatørens overlevelsessæt, Richard Williams

Lad os eksperimentere med et mere abstrakt eksempel. Lad os flytte en form over skærmen:

En lineær, robotisk tween. Koldt ikke?

Lad os nå til resultatet ved at sprænge det meste af handlingen hurtigere, men bruge stærk dæmpning (lempelse) til en dejlig bedring.

smurtSkulptur af en kurve

Hvad hvis vi skubber det videre? Lad os skulptur kurven lidt mere. Nem ind og ud. Stærk acceleration, der bruger flere rammer på afvikling. Hvis handlingen er for hurtig, kan vi føre øjet med en langstrakt "udtværing" ramme. Måske en smule overskydning til at slibe den lidt ned.

Umulige udtværingsrammer bærer øjet på tværs af hurtig bevægelse. Via John Kricfalusi

Ser tid med grafer

Krydret animatører opfatter tid med nuance. Øjet skal trænes for at se og føle timing. Selvom denne evne kan tage år at udvikle, er det stadig muligt at dissekere timing takket være computere. TAKK COMPUTERE!

http://www.navone.org/HTML/Tutorial_Splines2_2.htm

Interpoleret computeranimation anvender ofte konceptet en Graph Editor, så du kan skulptere tid. Mens rotterne med kurver kan skræmme oprindeligt, er det simpelt i kernen. Grafer beskriver blot en værdi, der ændrer sig over tid. Værdien er knyttet til attributter (f.eks. Skala, position, rotation, farve, bøjethed, glans, ruhed).

Motionscope

Når vi manipulerer formen på disse grafer, designer vi tid. Ved hjælp af MotionScope (vores interne værktøj hos Thinko), lad os se på, hvordan timing & afstand korrelerer med grafer. Det er som en konsol for en ingeniør eller et histogram til en fotograf.

Trinvis / blokeret https://framer.cloud/aAdpl/Nem i https://framer.cloud/vKGrRNem ind og ud https://framer.cloud/tfOhNForårssimuleret https://framer.cloud/deNRRCirkulær bevægelse kan beskrives med sin & cosinus-funktioner pr. Dimension https://framer.cloud/cTAKXTilpasset kubisk Bezier-kurve https://framer.cloud/lWHuBFlere, lagdelte dimensioner https://framer.cloud/jBPYO

En fordel ved at bruge et omfang er evnen til at observere bevægelse i rå dimensioner. Vi kan fejlsøge animationsproblemer ved at fokusere på et “lag” animation ad gangen.

EN HJÆLPEDUMP !!!

Der er et bjerg at lære, men heldigvis har andre animatører skrevet bådmængder med god information. Her er nogle værdifulde begreber, der skal refereres til:

Flytning holder:

En metode til at sælge vægt og holde former i live http://www.keithlango.com/tutorials/march05/movingHold.htm

Antikviteter:

En kontrasterende afvikling før en primær bevægelse.

Implementering af forventning & overshoots:

Arcs:

Spline-hygiejne:

Pixars Victor Navone taler om at løsne funktionskurver.

Overgangs- og rumlige grænseflader:

Jeg skrev disse!

Kunsten at interpolere:

STOR snak af min ven Marcus Eckert.

http://push-conference.com/news/getting-from-a-to-b-the-art-of-interpolation-by-marcus-eckert/

Game Feel:

Nogle ideer til at overveje taktil følelse.

https://amzn.to/2rno2bV

Animatorens Survival Kit:

Dette er Bibelen for animatorer. Et must have.

https://amzn.to/2w8NrM0

Sådan Lerp som en professionel:

Implementering af interpolering

https://chicounity3d.wordpress.com/2014/05/23/how-to-lerp-like-a-pro/

Øve sig

Læsningsteori er en ting, men implementering af disse ideer er et andet spil. Det er nyttigt at tegne rundt med og uden kode.

At eksperimentere uden kode - Øv manuel animation for at få en følelse af timing. Animer en bold på tværs af skærmen uden at bruge computer-in-betweens. Tegn hver mellemramme selv. Det er ikke svært. Bare få et børsteværktøj, gør det på størrelse med en kugle, og eksperimenter med timing og afstand! Når du lærer at føle timing, forbedres dit arbejde drastisk.

Anyhoo, det er det for nu.

Spørgsmål?

pasquale@thinko.com / @pasql på twitter

Tak for at have læst og set

Særlig tak til Jacob Bijani for tekniske bidrag.