BRZDĚTE! aneb efekty přirozeného pohybu animací - Grafika.cz - vše o počítačové grafice

17. srpna 2001, 00.00 | Dnešní pokračování seriálu "Skriptování pro středně pokročilé" je určeno těm, kteří chtějí dát pohybujícím se objektům plynulé "dojezdy" s použitím jednoduchých skriptů.

Dnešní pokračování seriálu "Skriptování pro středně pokročilé" je určeno těm, kteří chtějí dát pohybujícím se objektům plynulé "dojezdy" s použitím jednoduchých skriptů. Pomocí nich vytvoříte efekty, které byste klasickou tween animací buď nikdy nevytvořili, nebo byste strávili spousty času "pipláním" jednotlivých fází animace.

Většina z vás, kdo jsou alespoň mírně pokročilí, dokáže ovládat pohyb objektu na scéně pomocí tzv. lineárního pohybu:

objekt._x += 10

nám posune objekt o deset pixelů ve vodorovném směru. Pokud takový skript umístíme do smyčky a nadefinujeme podmínku:

if (objekt._x > 500) {stop()}

objekt se bude pohybovat lineárním pohybem až na souřadnici 500.

Pokud ale použijete tento lineární pohyb např. pro pohyb jednotlivých položek menu nebo jako animaci, zjistíte, že takový pohyb je nuda a působí nepřirozeně. Ve chvíli, kdy jej zastavíte, objekt prostě "zašlajfuje" na místě.

Stejně tak jste už určitě na některých webech viděli efekt plynulého "dobržďování" pohybu, který dává animaci více přirozenosti a elegance.

Někteří z vás určitě provedli pár pokusů s takovým typem pohybu. A to s větší nebo menší spokojeností s výsledkem. Tento tutorial se proto věnuje základním metodám, které se dají použít při simulaci plynulého zpomalování pohybu.

Dnešní tutorial bude trochu atypický v tom, že nebude návodem "udělejte si scénu 400 x 300......", ale spíše průvodcem metodami, které lze použít. U každého příkladu bude samozřejmě podrobný popis skriptů a jejich funkcí.

Takže s chutí do toho! Nejprve si stáhněte ukázkový soubor zde, otevřete si jej a pomocí CTRL+Enter jej spusťte.

V horní části scény budete mít vždy velkou číslicí označené číslo ukázky, červenými šipkami se budete přesouvat mezi jednotlivými ukázkami.

Ukázka č.1: nejjednodušší varianta s jedním parametrem

Na scéně vidíte tlačítko s písmenem S, tedy tlačítko, které odstartuje, resp. vyresetuje pohyb modrého kroužku. Nad tlačítkem je Input Text Field, textové pole, do kterého můžete zapisovat různé hodnoty parametru "koeficientRychlosti".

Nejprve si ukázku vyzkoušejte s různými hodnotami. Vidíte, že pohyb ke konci dráhy plynule zpomaluje. A čím větší "koeficientRychlosti", tím pomalejší pohyb.

Toto je nejjednodušší a nejpoužívanější metoda plynulého "dobržďování" pohybu. Vystačí vám pro velkou většinu aplikací a její princip je skutečně velmi jednoduchý. Podívejme se na tento princip blíže. Ukončete režim testování souboru a podívejte se na scénu.

Nad číslicí 1 najdete prázdný řídící klip, který se jmenuje "ridic1". Všechny skripty, které hýbou modrým kroužkem, jsou schované v něm. Otevřete jej a podívejte se na jednotlivé snímky a skripty na nich.

První frame:

startX = 25
endX = 775
_parent.jezdec._x = startX
stop()

Zde jsou nastavené hodnoty pro počáteční a koncový bod celého pohybu. Klip "jezdec" (modré kolečko) je nastaven na startovní pozici.

Druhý frame:

krok = (1.05*endX - _parent.jezdec._x)/koeficientRychlosti

if (_parent.jezdec._x <= endX) {
_parent.jezdec._x += krok
play()
} else {
gotoAndPlay(4)
}

První řádek definuje velikost kroku, o který se bude klip "jezdec" posunovat. Základem pro výpočet tohoto kroku je rozdíl mezi koncovým bodem pohybu a současnou pozicí klipu. Co to znamená?

Zkuste si to v duchu představit nebo nakreslit na papír: máte koncový bod, třeba na souřadnici 100. K němu se přibližujete s objektem, jehož současná poloha je 20. Trasa, kterou má bod ještě urazit, má velikost 80. Kdybych objekt posunul o celý rozdíl, tedy o 80, okamžitě by skočil na koncový bod, což nechci. Vezmu tedy 80/2, poloviční hodnotu a posunu bod o 40.

Nyní jsem skočil z polohy na 20 na polohu 60 a celý proces zopakuji: současná poloha je 60, rozdíl mezí koncovým bodem a současnou polohou je 100 - 60 = 40, vezmu polovinu tohoto rozdílu 40/2 = 20 a pohnu objektem o 20.

Jistě jste si všimli, že tímto postupem se krok, o který budu pohybovat objektem, neustále zmenšuje a zmenšuje - výsledek je ten, že se pohyb zpomaluje a zpomaluje.

Číslo dva, kterým jsem dělil rozdíl mezi koncovým bodem a současnou polohou objektu, je proměnná "koeficientRychlosti". Čím větší bude hodnota této proměnné, tím kratší bude krok a tím celkově pomalejší pohyb získáme.

Další řádky skriptu, následující po definici velikosti kroku, provádějí samotný pohyb klipu "jezdec". Tento skript říká: " Pokud pozice klipu nedosáhla koncového bodu, posuň klip o velikost "kroku" a přejdi na následující frame. Pokud pozice klipu dosáhla koncového bodu, zastav skript".

Třetí frame opakuje akce z framu 2 a tím vytváří smyčku, která bude posunovat klip "jezdec" tak dlouho, dokud tento nedorazí do koncového bodu a na framu 4 se celý skript zastaví.

Nyní si můžete ještě jednou spustit soubor a otestovat si, jak se mění rychlost pohybu s velikostí proměnné "koeficientRychlosti".

Ještě malá poznámka: jistě jste si všimli, že v definici velikost proměnné "krok" není použitá přímo poloha koncového bodu (endX), ale o trochu více (1.05*endX). To je proto, aby se při malých rychlostech klip "dovláčel" až do koncového bodu.

Ukázka č.2: varianta se dvěma parametry

Jistě jste si všimli, že ukázka č.1. má jeden nedostatek: lze řídit jen rychlost pohybu, nikoliv ovlivňovat "brzdnou dráhu".

Tento problém řeší ukázka č.2., která rozšiřuje skript o další parametr, mnou nazvaný "koeficientRegenerace" (protože neustále obnovuje hodnotu proměnné "koeficientRychlosti").

Vyzkoušejte si ukázku č.2., tedy spusťte soubor a červenou šipkou přejděte na číslo 2. Zde najdete dvě vstupní textová okna s přednastavenými údaji.

Nyní si pohrajte s velikostí proměnné "koeficientRegenerace". Změňte její hodnotu na 1.0 a tím dostanete pohyb, totožný s ukázkou č.1. Nyní změňte hodnotu například na 1.03. Vidíte, jak pohyb ke konci výrazněji "dobržďuje"? Nyní zadejte hodnotu 1.07 a "dobrždění" je velmi výrazné. Při hodnotě 1.09 je brždění už tak razantní, že "jezdec" nedojede ani na konec dráhy.

Podívejme se na rozdíl ve skriptech oproti první ukázce. Je zcela minimální, skripty jsou totožné, jen za prvním řádkem následuje další:

krok = (1.05*endX - _parent.jezdec._x)/koeficientRychlosti
koeficientRychlosti *= koeficientRegenerace

Onen řádek pomocí operace násobení neustále zvětšuje hodnotu proměnné koeficientRychlosti. Co to znamená?

Zapojte opět představivost: z ukázky č.1. víme, že tím, jak se zmenšuje vzdálenost mezi koncovým bodem a polohou klipu "jezdec", neustále klesá hodnota proměnné "krok" a tím se pohyb zpomaluje. My však pohyb ještě více zpomalíme tím, že neustále zvětšujeme i dělitele, proměnnou "koeficientRychlosti" (jestliže měla například na začátku pohybu hodnotu 5, ke konci pohybu nabude hodnoty například 50 a po dělení v prvním řádku skriptu je tedy "krok" mnohem menší).

Pomocí této metody můžeme logicky dosáhnout i opačného efektu: pohyb bude zpočátku pomalý a bude neustále zrychlovat. Zadejte si v ukázce tyto hodnoty:

koeficientRychlosti     1000
koeficientRegenerace    0.8

a podívejte se na výsledek.

Podtrženo a sečteno: metoda, použitá v ukázce č.2. je vhodná tam, kde potřebujete více řídit průběh pohybu, např. tam, kde chcete mít velmi rychlý pohyb, který na konci velmi prudce "přibrzdí".

Ukázka č.3: lineární pohyb s bržděním

Tato ukázka vychází z poněkud jiného principu. Spusťte soubor, červenými šipkami skočte na ukázku č.3. a otestujte si ji. Na první pohled vidíte, že průběh "dobržďování" je plynulejší než v ukázkách č.1. a 2.

Nyní do textového pole "koeficientBrzdeni" zadejte hodnotu 1.0 a do "linearniSlozka" hodnotu 10. Co vidíte? Čistý lineární pohyb, který jsem popisoval v samotném úvodu tohoto tutorialu!

Tak, a teď se podívejme na princip tohoto pohybu. Otevřete si prázdný řídící klip "ridic3" na číslicí 3 a podívejte se na druhý snímek. Vidíte? Skript je velmi podobný skriptu v ukázce číslo 1., rozdílné jsou pouze první dva řádky:

krok = linearniSlozka
linearniSlozka /= koeficientBrzdeni

Proměnná krok je definována pomocí lineární složky pohybu, jde tedy o jednoduchý přírůstek, který neustále posunuje klip "jezdec" o konstantní krok kupředu. Abychom dosáhli efektu "brždění", budeme proměnnou "linearniSlozka" neustále o něco zmenšovat. Toho dosáhneme pomocí dělení proměnnou "koeficientBrzdeni". Jak se bude "linearniSlozka" stále a stále dělením zmenšovat, pohyb se bude plynule zastavovat.

Podtrženo a sečteno: metoda v ukázce č.3 umožňuje řídit pohyb od čistě lineárního, tedy rovnoměrného a postupně k němu přidávat zbrždění. Toho můžeme využít tam, kde se nám hodí více méně rovnoměrný pohyb a chceme jej pouze mírně přibrzdit (což s metodami č.1. a 2. nejde).

Ukázka č.4: ještě vylepšení pro fajnšmekry

Pokud vám předchozí ukázky ještě nestačily, připravil jsem pro vás ještě drobné vylepšení ukázky č.3. Spusťte si soubor, překlikejte červenými šipkami na č. 4 a podívejte se na výsledný pohyb.

Jak vidíte, pohyb se postupně zpomaluje, ale přibližně v poslední třetině "dobržďování" skončí a pohyb je téměř lineární. Nyní zkuste zadat hodnotu pro "koeficientRegenerace" na 0.9991. Co se stane? Pohyb se téměř zastaví a po chvilce se zrychlí!

Nyní se podívejme na skript, který nám takové rozšířené řízení pohybu umožňuje. Jde vlastně o kombinaci dvou metod:

krok = linearniSlozka
linearniSlozka /= koeficientBrzdeni
koeficientBrzdeni *= koeficientRegenerace

Jsou zde jednoduše kombinovány skripty z ukázek č.2. a 3..

Tím, jak nezávisle na sobě rostou a klesají hodnoty proměnných, pohyb mění plynule svojí charakteristiku. Zaexperimentujte si se vstupními hodnotami v textových polích a najdete spousty zajímavých kombinovaných pohybů.

Podtrženo a sečteno: metoda v ukázce č.4 umožňuje vytvářet poněkud "divočejší" pohybové kreace, a to s použitím jednoduchého skriptu a tří proměnných. Doporučuji pro obzvláště náročné designery :o).

Ukázka č.5.: ukázka použití pro řízení velikosti objektů

Skripty, které jsem popsal v předchozích ukázkách, mají spousty, ba přímo hromady použití. Proto jsem vám jako ukázku připojil řízení velikosti objektu, použitelné například do různých typů menu, nebo jako inteligentní náhradu zvětšení fotografie po kliknutí, používané v html ... záleží jen na vaší fantazii.

Spusťte si soubor a přejděte na č. 5. Najeďte myší nad oranžový obdélník a podívejte se, jak krásně plynule se vám zvětší. Nyní stiskněte tlačítko "reset", zadejte nové hodnoty a sledujte, jak se mění pohyb.

Skripty jsou totožné se skripty v ukázce č. 2. Jediný rozdíl je v tom, že všechny skripty jsou napsány přímo v oranžovém klipu "okno" (a samozřejmě místo _x souřadnice jsou zvětšovány _xscale a _yscale).

Tento klip obsahuje na prvním framu button, spouštějící zvětšování objektu. Po doběhnutí animace do koncového bodu se skript zastaví a čeká na stisknutí tlačítka "reset".

Podtrženo a sečteno: využití skriptů, simulujících "dobržďování" pohybu, je nesčíslně, (rotace objektů, spojení dvou pohybů: například plynulý pohyb současně se zvětšováním nebo zmenšováním, atraktivní menu s plynule najíždějícími položkami atd. atd.), je jen na vás jak a kde je použijete.

Závěr

Moje závěrečná dvě doporučení:
1) prostudujte pečlivě popsané skripty a neodcházejte od nich, aniž byste je opravdu pochopili. Věřte, že se vám to vyplatí, pak už budete podobné efekty jen tak ledabyle střílet z rukávu.

2) Ihned poté, co budete mít pocit, že jste přesně pochopili funkci skriptu, napište si vlastní jednoduchý příklad. Uvidíte, že napoprvé na něco zapomenete a je lepší si to vypilovat ve chvíli, kdy je vám princip jasný, než se pak mořit se vším od začátku.

Závěr všech závěrů

Když jsem tak psal o rozdílech mezi lineárním a nelineárním pohybem, vzpomněl jsem si na jednu starou povídku od Stanislava Lema, ve které vystupují "nelineárnící" neboli "nelineární automaty". Takže úplně na závěr: občas vypněte kompjůtr, zastavte neustálé pojídání baget (mě se to teda moc často nedaří :o))) a přečtěte si třeba dobrou knížku. Můj typ: Stanislav Lem a jeho příběhy pilota Pirxe jsou sice vykopávky, ale mají svoje kouzlo a svérázný vtip (nelineární :o)))

A v příštím tutoriálu bych vám chtěl přiblížit pár zásad, pomocí nichž bude běh vašich animací plynulejší, bez onoho věčného "škubání a zadrhávání".