Animirajte promjene svojstava

Za izradu animacije upotrijebite odgovarajući tip animacije za svojstvo koje se animira i primijenite animaciju ovisno o vrsti ponašanja koje je potrebno.

Možete povući komponente animacije s Components > Default Components > Animation u prikaz Navigator ili 2D kako biste stvorili njihove instance.

Možete postići slične rezultate koristeći različite tehnike animacije. Za više informacija pogledajte odjeljak Dodavanje animacije.

Primijeni animacije

Animacija svojstva primjenjuje se kada se vrijednost svojstva promijeni. Animacije boja i brojeva su vrste animacija svojstava za specifične svrhe. Postavke za animacije navedite u Properties > Animation Targets.

Animiranje promjena boje

Na primjer, možete primijeniti animaciju na vrijednost svojstva Color instance komponente Rectangle kako biste njezinu vrijednost promijenili iz trenutne boje u drugu boju tijekom razdoblja vremena navedenog u milisekundama.

1. U pogledu 2D stvorite instancu komponente Color Animation.
2. Properties Animation TargetsIdite na Animacija > Upravljanje animacijom.
3. TargetU animacijskom uređivaču odaberite komponentu koju ćete animirati.
4. U odjeljku Property unesite svojstvo koje želite animirati. Za animiranje više svojstava odvojite ih zarezima.

   

5. U odjeljku Color Animation odaberite izvornu boju u From color i novu boju u To color.
6. Animation U odjeljku Animiraj promjene postavite trajanje animacije u Duration.

Animirajte promjene numeričkih vrijednosti

Slično tome, da biste primijenili animaciju kada se numerička vrijednost nekog svojstva promijeni, stvorite instancu komponente Number Animation.

1. Idite na Properties > Number Animation.

   

2. Odaberite izvorni vrijednost u From i novu vrijednost u To.
3. U odjeljku Animation postavite trajanje animacije u Duration.

Na primjer, animaciju možete primijeniti na vrijednost svojstva X instance pravokutnika kako biste postigli dojam da se ona pomiče sa svoje trenutne pozicije na x-osi na drugu poziciju tijekom vremenskog razdoblja navedenog u milisekundama. Kako biste postigli dojam da se komponenta pomiče i na x-osi i na y-osi, unesite x i y u polje Properties odvojeno zarezom.

Za primjer upotrebe animacije svojstava za animiranje mjerila i prozirnosti komponenti pogledajte primjer Coffee Machine.

Postavite neanimirane svojstva

Za trenutačnu promjenu vrijednosti svojstva tijekom animacije bez animiranja promjene svojstva:

1. Stvorite instancu komponente Property Action u Navigator u.
2. Idite na Properties > Property Action

   

3. Postavite vrijednost u polje Value.

Ovo je korisno za postavljanje neanimiranih vrijednosti svojstava tijekom animacije.

Na primjer, možete stvoriti instancu komponente Sequential Animation koja sadrži dvije instance komponente Property Action oko instance komponente Number Animation. Prva radnja svojstva postavlja svojstvo Opacity pravokutnika na 0.5, animacija broja mijenja širinu slike, a druga radnja svojstva vraća prozirnost na 1.

Pokreni animacije

Da biste specificirali postavke za reprodukciju animacija, idite na Properties > Animation.

Za automatsko pokretanje animacija odaberite Running. Animacije se pokreću onoliko dugo koliko navedete u polju Duration.

Možete povezati svojstvo 'running' animacije sa signalom koji emitira komponenta kako biste animaciju reproducirali kada korisnici odaberu gumb, na primjer. Za više informacija pogledajte Povezivanje komponenti sa signalima.

Za pokretanje animacija više puta u petlji postavite broj ponavljanja u polju Loops. Postavite vrijednost na -1 kako bi se animacija neprestano ponavljala dok se izričito ne zaustavi.

Da biste naveli da animacije trebaju završiti do kraja kada se zaustave, odaberite opciju Run to end. Ovo je ponašanje najkorisnije kada je svojstvo Loops postavljeno, jer će se animacija normalno završiti s reprodukcijom, ali se neće ponovno pokrenuti.

Sve animacije definirane za komponentu izvršavaju se paralelno, osim ako ih ne uključite u komponentu Parallel Animation ili Sequential Animation za njihovo grupno upravljanje.

Za pauziranje animacija odaberite gumb (Paused).

Da biste animaciji dodali krivulju ublažavanja, odaberite gumb (Easing Curve Editor) u polju Easing Curve.

Pokrenite grupe animacija

Možete stvoriti nekoliko animacija koje se mogu izvoditi paralelno ili uzastopno.

Za upravljanje grupom animacija koje će se reproducirati istovremeno:

1. Stvorite instancu komponente Parallel Animation u Navigator.
2. Povucite ostale animacije na nju.

Da biste animacije reproducirali u zadanom redoslijedu, jedna za drugom, umjesto toga stvorite instancu komponente Sequential Animation.

Na primjer, komponenta banera može imati nekoliko ikona ili slogana za prikaz, jedan za drugim. Vrijednost svojstva Opacity mogla bi se promijeniti u 1.0, što označava neprozirni objekt. Korištenjem sekvencijalne animacije, svaka animacija prozirnosti reproducirat će se nakon što prethodna animacija završi, dok će se korištenjem paralelne animacije animacije reproducirati istovremeno.

Ako pojedinačne animacije stavite u grupu paralelnih ili uzastopnih animacija, više ih ne možete neovisno pokretati ili zaustavljati. Morate ih pokretati i zaustavljati kao grupu.

Dodajte pauze između grupiranih animacija

Sequential Animation Pause Animation Kada se koristi u sekvencijalnoj animaciji, pauza je korak u kojem se ništa ne događa, tijekom zadanog trajanja.

Za navođenje pauze između dviju animacija:

1. Stvorite instancu komponente Pause Animation unutar Sequential Animation u Navigator.
2. Idite na Properties > Animation.
3. Odaberite Paused.
4. Postavite trajanje pauze u polju Duration.

Razmatranja performansi

Možete koristiti fluidnost i dinamičke prijelaze, kao i vizualne efekte, za postizanje velikog učinka u korisničkom sučelju. Međutim, morate biti oprezni pri korištenju nekih od podržanih značajki jer one mogu utjecati na performanse korisničkog sučelja.

Općenito, animiranje svojstva uzrokuje ponovnu procjenu svih veza koje to svojstvo referenciraju. Obično je to ono što želite, ali u nekim slučajevima može biti bolje onemogućiti vezu prije izvođenja animacije i zatim ponovno postaviti vezu nakon što se animacija završi.

Izbjegavajte izvođenje JavaScripta tijekom animacije. Na primjer, trebalo bi izbjegavati izvođenje složenog JavaScript izraza za svaki kadar animacije x svojstva.

Posebno pripazite pri stvaranju instanci komponente Script Action jer se skriptne animacije izvršavaju u glavnoj niti i stoga mogu uzrokovati preskakanje sličica ako im treba previše vremena da se dovrše.

Sažetak komponenti za animaciju

Sljedeća tablica navodi komponente koje možete koristiti za programsko animiranje svojstava komponenti. Dostupne su u Components > Default Components > Animation.