Animirati promjene svojstava

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

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 promijenili njezinu vrijednost s 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 svojstva promijeni, stvorite instancu komponente Number Animation.

1. Idite na Properties > Number Animation.

   

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

Na primjer, animaciju možete primijeniti na vrijednost svojstva X instance pravokutnika kako bi se činilo da se pomiče sa svoje trenutne pozicije na x-osi na drugu poziciju tijekom vremenskog razdoblja navedenog u milisekundama. Kako bi se komponenta činila da se 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 se animacije trebaju odigrati 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 reproducirali animacije u zadanom redoslijedu, jednu 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 smjestite u grupu paralelnih ili slijednih 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.

Da biste specificirali pauzu 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 završetka animacije.

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

Posebno pazite 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.