Dodavanje animacije

Kako: Dodati animaciju

Qt Quick Alat Designer podržava sljedeće vrste animacijskih tehnika koje su pogodne za različite svrhe:

• Uobičajene tehnike dizajna pokreta za 2D
• Animacije iz stanja u stanje
• Animacije UI logike vođene podacima

Uobičajene tehnike dizajna pokreta

Sljedeća tablica sažima uobičajene tehnike dizajna pokreta za 2D i njihove tipične slučajeve upotrebe.

Animacija temeljena na vremenskoj crti i ključnim okvirima

Animacija na vremenskoj crti temelji se na ključnim okvirima. U uređivaču Qt Quick, ključni okviri određuju vrijednost svojstva komponente u određenom trenutku. Animiranje svojstava omogućuje da njihove vrijednosti prolaze kroz međuvrijednosti umjesto da se odmah promijene u ciljanu vrijednost.

Na primjer, svojstvo položaja y pravokutnika možete postaviti na 0 na početku animacije i na 100 na kraju animacije. Kada se animacija pokrene, pravokutnik se pomiče s položaja 0 na 100 na y-osi. Na sredini animacije, svojstvo y ima vrijednost 50 jer se ključne slike prema zadanim postavkama linearno interpoliraju.

Krivulje ublažavanja

Ponekad ne želite linearan pokret, već biste radije da se pravokutnik kreće brže na početku i sporije na kraju animacije. Da biste postigli taj učinak, mogli biste umetnuti velik broj ključnih sličica između početne i završne sličice. Kako biste izbjegli taj napor, možete odrediti krivulje ublažavanja za nelinearnu interpolaciju između ključnih sličica. Krivulje ublažavanja mogu učiniti da se komponente čine kao da ubrzavaju, usporavaju ili se odbijaju na kraju animacije.

Krivulje animacije

Iako krivulje ublažavanja dobro funkcioniraju za većinu jednostavnih animacija korisničkog sučelja, složenije animacije zahtijevaju nekoliko ključnih sličica, pa postaje nužno istovremeno vizualizirati vrijednost i interpolaciju ključne sličice. Prikaz " Curves " istovremeno vizualizira cijelu animaciju svojstva i prikazuje efektivne vrijednosti ključne slike zajedno s interpolacijom između ključnih slika. Također može istovremeno prikazivati animacije različitih svojstava kako biste mogli vidjeti animaciju za položaj x i animaciju za položaj y jedna uz drugu.

Animacije iz stanja u stanje

Za navigaciju između stanja korisničkog sučelja (UI) koristite prijelaze između različitih stanja sučelja koristeći vremensku crtu prijelaza koja se temelji na ključnim okvirima. Na ključne okvire možete primijeniti krivulje ublažavanja.

Prelazi između stanja

Korisnički su sučelja dizajnirana tako da u različitim scenarijima prikazuju različite konfiguracije ili da mijenjaju svoj izgled kao odgovor na interakciju korisnika. Često se nekoliko promjena događa istovremeno, tako da se može vidjeti kako se sučelje iznutra mijenja iz jednog stanja u drugo.

Ovo se općenito odnosi na korisničke sučelje bez obzira na njihovu složenost. Preglednik fotografija može u početku prikazivati slike u mreži, a kada se klikne na sliku, prijeći u detaljno stanje u kojem je pojedinačna slika proširena i sučelje se mijenja kako bi prikazalo nove opcije za uređivanje slike. S druge strane, kada se pritisne gumb, on se može promijeniti u stanje pritisnutosti u kojem se mijenjaju njegova boja i položaj tako da izgleda kao da je pritisnut.

Bilo koja komponenta može se mijenjati između različitih stanja kako bi primijenila skupove promjena koje mijenjaju svojstva relevantnih komponenti. Svako stanje može predstaviti različitu konfiguraciju koja može, na primjer:

• Prikazati neke UI komponente, a sakriti druge.
• Prikazati korisniku različite dostupne radnje.
• Pokrenuti, zaustaviti ili pauzirati animacije.
• Izvršiti neki skript potreban u novom stanju.
• Promijeniti vrijednost svojstva za određenu komponentu.
• Prikaži drugačiji prikaz.

Promjene stanja uvode nagle pokrete koje možete učiniti vizualno privlačnima koristeći prijelaze. Prijelazi su vrste animacija koje interpoliraju promjene svojstava uzrokovane promjenama stanja.

U prikazu Transitions možete postaviti početni kadar, završni kadar i trajanje prijelaza za svaku svojstvo. Također možete postaviti krivulju ublažavanja za svaku animaciju i maksimalno trajanje cijelog prijelaza.

Animacije UI logike vođene podacima

Sljedeća tablica sažima tehnike koje se koriste za animiranje logike korisničkog sučelja pomoću stvarnih ili lažnih podataka iz pozadinskog sustava.

Animacija vremenske crte vođena podacima

Možete povezati vrijednosti svojstava s pozadinskim servisima podataka kako biste pokretali animaciju na vremenskoj crti. Podatke možete dohvatiti iz različitih izvora, kao što su modeli podataka, JavaScript datoteke i pozadinski servisi.

Možete povezati te izvore podataka s trenutnim okvirom vremenske crte, stvarajući animaciju kada pozadinski sustav promijeni svojstvo trenutnog okvira.

Na primjer, mogli biste povezati vrijednost brzine iz pozadinskog sustava s brojčanikom tahometra u klasteru. Kako se vrijednost brzine povećava ili smanjuje iz pozadinskog sustava, animacija kazaljke pomiče se s jednog kraja vremenske crte na drugi.

Programska animacija

Animaciju svojstava možete programski kontrolirati. Animacije svojstava stvaraju se povezivanjem komponenti Animation s vrijednostima svojstava instanci komponenti kako bi se vrijednosti svojstava postupno mijenjale tijekom vremena. Animacije svojstava primjenjuju glatko kretanje interpoliranjem vrijednosti između promjena vrijednosti svojstava. Pružaju kontrole vremenskog trajanja i omogućuju različite interpolacije pomoću krivulja ublažavanja.

Programeri mogu kontrolirati izvođenje animacija svojstava koristeći funkcije start(), stop(), resume(), pause(), restart() i complete().

Možete stvoriti instance unaprijed pripremljenih komponenti animacije dostupnih u Components > Default Components > Animation kako biste stvorili animacije ovisno o vrsti svojstva i ponašanju koje želite.

Za više informacija o komponentama Animation i njihovim svojstvima pogledajte Animate property changes.