Izrada animacija vremenske crte

Možete stvoriti vremenske staze i animacije temeljene na ključnim okvirima za linearnu interpolaciju kroz međuvrijednosti na zadanim ključnim okvirima umjesto da se odmah prijeđe na ciljanu vrijednost.

Također možete povezati vremensku crtu s vrijednošću svojstva nekog komponenta, poput klizača, i na taj način kontrolirati animaciju.

Dodaj vremensku crtu

Timeline Koristite vremensku crtu i uređivač temeljen na ključnim okvirima u prikazu animacije svojstava komponenti. Prikaz je prazan dok ne stvorite vremensku crtu.

TimelineSljedeći videozapis prikazuje kako umetnuti ključne okvire za svojstva komponenti i animirati ih u uređivaču vremenske crte:

Stvorite vremensku crtu

Za izradu vremenske crte za animaciju UI komponente:

1. Idite na View > Views > Timeline.
2. Odaberite (Add Timeline) kako biste specificirali postavke vremenske crte i pokrenuli animaciju.

   

3. U Timeline Settings:
   1. U Timeline ID unesite ID koji opisuje vremensku crtu.
   2. U Start frame postavite prvi kadar vremenske crte. Dopuštene su negativne vrijednosti.
   3. U End frame, postavite posljednji kadar vremenske crte.
4. U Animation Settings:
   1. U Animation ID unesite ID za animaciju.
   2. U Start frame u postavite prvi kadar animacije.
   3. U End frame u postavite zadnji kadar animacije.
   4. U Duration u postavite duljinu animacije u milisekundama.

   Pogledajte pomoćne natpise za svrhu dodatnih postavki animacije.

5. Odaberite Close da zatvorite dijalog i spremite postavke.

   

Sada možete postaviti ključne okvire za svojstva koja želite animirati.

Postavite vrijednosti ključnih sličica

Kada kreirate vremensku crtu, Qt Quick Designer stvara jednu animaciju za tu vremensku crtu. Možete kreirati onoliko animacija za vremensku crtu koliko želite. Na primjer, možete kreirati animacije koje pokreću samo mali dio vremenske crte ili vraćaju vremensku crtu unatrag.

Za animiranje komponenti u prikazu Timeline, postavite vrijednosti ključnih okvira za svojstvo koje želite animirati. Qt Quick Designer automatski dodaje ključne okvire između dva ključna okvira i ravnomjerno postavlja njihove vrijednosti kako bi stvorio, na primjer, pokret ili transformaciju.

Za postavljanje vrijednosti ključnih okvira za svojstvo komponente:

1. Navigator U prikazu animacijske vremenske crte odaberite komponentu koju želite animirati.
2. Properties Insert Keyframe U prikazu animacije odaberite gumb Animacija (Actions) > Postavi ključni okvir za svojstvo koje želite animirati.

   

3. U prikazu Timeline odaberite gumb Per Property Recording za početak snimanja promjena svojstava.

   

4. Provjerite je li glava reprodukcije na okviru 0 i unesite vrijednost svojstva u polje pored naziva svojstva na vremenskoj crti. Pritisnite Enter da biste spremili vrijednost.
5. Pomaknite glavu reprodukcije na drugi kadar na vremenskoj crti i navedite vrijednost za taj kadar. Za više informacija pogledajte odjeljak Kretanje po vremenskoj crti.
6. Kada ste naveli onoliko vrijednosti koliko vam je potrebno, ponovno odaberite gumb Per Property Recording da biste zaustavili snimanje.

Stvorite vremenske staze za upotrebu u stanjima

States Možete stvoriti više vremenskih crta za upotrebu u stanja koja dodajete u prikazu vremenskih crta.

Za izradu vremenske crte za drugo stanje:

1. Idite na Timeline > Timeline Settings.
2. Odaberite za izradu još jedne vremenske crte.
3. U tablici ispod kartice Animation Settings postavite vremensku crtu za stanje u kojem je želite koristiti.

   

Povežite vremensku crtu s svojstvom

Kada povežete vremensku crtu s svojstvom komponente, trenutni kadar animacije kontrolira se vrijednošću tog svojstva.

U ovom primjeru povezujete vremensku crtu s komponentom klizača.

Nakon što je timeline stvoren i vrijednosti ključnih sličica postavljene:

1. Iz prozora Components povucite klizač u prikaz 2D ili Navigator.
2. U Navigator odaberite slider, a u Properties postavite To na 1000.

   Napomena: Vrijednosti klizača za From i To trebale bi odgovarati vrijednostima Start Frame i End Frame na vremenskoj crti ako želite potpuno kontrolirati animaciju pomoću klizača.

3. U dijalogu Timeline Settings odaberite pokraj kartice Animation Settings kako biste izbrisali animaciju. Ako imate više animacija, izbrišite ih sve.
4. U dijalogu Expression binding unesite slider.value.

   

Povežite animacije s stanjima

Povežite animacije s stanjima kako bi se pokrenule pri ulasku u stanje.

U tablici na dnu dijaloga Timeline Settings:

1. Dvaput kliknite vrijednost u Timeline i odaberite vremensku crtu s animacijom koju želite povezati sa stanjem.
2. Dvaput kliknite vrijednost u polju Animation i odaberite animaciju koju želite povezati sa stanjem.

   

Da biste vezali stanje za određeni ključni kadar u animaciji bez pokretanja animacije, postavite ključni kadar u Fixed Frame.

Upravljanje ključnim okvirima

Uređivanje ključnih sličica

Da biste uklonili sve promjene koje ste snimili za svojstvo, kliknite desnom tipkom miša na naziv svojstva na vremenskoj crti i odaberite Remove Property.

Da biste dodali ključne okvire na stazu ključnih okvira komponente na trenutnoj poziciji glave za reprodukciju, kliknite desnom tipkom miša na naziv komponente na vremenskoj crti i odaberite Add Keyframes at Current Frame.

Ključne okvire na vremenskoj crti označavate pomoću markera različitih boja i oblika, ovisno o tome jesu li aktivni ili neaktivni ili jeste li na njih primijenili krivulje ublažavanja.

Uređivanje vrijednosti ključnih sličica

Za precizno podešavanje vrijednosti ključne slike dvaput kliknite na marker ključne slike ili kliknite desnom tipkom miša na njega i u kontekstnom izborniku odaberite Edit Keyframe.

U dijalogu Edit Keyframe prikazuje se naziv svojstva koje animirate i njegova trenutačna vrijednost u kadru koji je naveden u Frame. Možete promijeniti i ključni kadar i njegovu vrijednost.

Kopiraj ključne okvire

Možete kopirati ključne okvire s trake ključnih okvira jedne komponente i zalijepiti ih na traku ključnih okvira druge komponente.

Za kopiranje svih ključnih okvira s jedne staze na drugu:

1. Desnom tipkom miša kliknite ID komponente i u kontekstnom izborniku odaberite Copy All Keyframes.
2. Desnom tipkom miša kliknite ID druge komponente i u kontekstnom izborniku odaberite Paste Keyframes.

Izbrisanje ključnih okvira

Za brisanje ključne slike, kliknite desnom tipkom miša na nju i u kontekstnom izborniku odaberite Delete Keyframe.

Za brisanje svih ključnih okvira iz odabrane komponente, kliknite desnom tipkom miša na naziv komponente u Timeline i u kontekstnom izborniku odaberite Delete All Keyframes.

Kretanje po vremenskoj crti

Možete se kretati vremenskom crtom na sljedeće načine:

• Povucite glavač (1) na kadar.
• Kliknite na ravnalo (2) za premještanje na kadar.
• Odaberite gumbe Start Frame (Home), Previous Frame (,), NextFrame (.) ili End Frame (End) (3) ili upotrijebite prečace na tipkovnici za prelazak na prvi, prethodni, sljedeći ili zadnji kadar na vremenskoj crti.
• Unesite broj okvira u polje za trenutni ključni okvir (4) kako biste prešli na taj okvir.
• Odaberite gumbe Previous i Next pored naziva svojstva na vremenskoj crti (5) za prelazak na prethodni ili sljedeći ključni kadar tog svojstva.

Zumirajte vremensku crtu

Koristite klizač na alatnoj traci za postavljanje razine zumiranja u Timeline u. Odaberite gumbe i za udaljavanje ili približavanje prikaza.

Postavite boju staze ključnih okvira

Za promjenu boje staze ključnih sličica odaberite Override Color u kontekstnom izborniku, a zatim odaberite boju u odabiraču boja. Za vraćanje boje odaberite Reset Color.

Pregledajte animaciju

Za pretpregled animacije učinite jedno od sljedećeg u prikazu Timeline:

• Povucite glavu za reprodukciju duž vremenske crte.
• Odaberite (Play) ili tipku Space.

Live PreviewZa pretpregled cijelog korisničkog sučelja odaberite padajući izbornik Pokreni s gornje alatne trake, a zatim odaberite Animacija u stvarnom vremenu ili pritisnite Alt + P.

Animacija rotacije

Za animiranje komponenti koje se rotiraju oko središnje točke možete koristiti komponentu Item kao roditeljsku komponentu za komponentu koja se rotira. Zatim kreirajte vremensku crtu za Item i postavite svojstvo rotacije za početni i završni ključni kadar.

Animacija oblika

Možete koristiti Qt Quick Shapes Design Helpers za animiranje sljedećih oblika:

• EllipseShape
• RectangleShape
• RegularPolygonShape
• StarShape