FireMonkey - Animace

vložil Radek Červinka 11. září 2011 00:22

Nemá cenu popisovat podobné věci jako jsou ve VCL - zaměříme se na zásadní odlišnosti.

FireMonkey přináší zásadní rozšíření uživatelského rozhraní. Ať se nám to líbí nebo ne, dnešní BFU už např. dle mobilů očekává různé animace a přechody a myslím si, že to samé očekává i na PC nebo kioskových aplikacích (nehledě na to, že FireMonkey JE koncipován i pro mobily). A FireMonkey obsahuje opravdu výraznou podporu pro animace. Ale je mi jasné, že se pouštím na tenkou půdu - ne vše mi je jasné jak funguje - resp. ne vše jsem zkusil.

Kromě jiného je mezi demy na disku i "Animation Demo HD", kde se hýbe snad úplně vše, ale já se pokusím ukázat základ.

Velká většina property u komponent může být animována (např. barva, výplň, pozice, rotace, šířka, výška, průhlednost, padding, margin, scale atd.). Property, která může být animována systémem má u hodnoty ikonu filmu. Jen ještě upozorním, že některé property animace mohou být také animovány - viz. dále.

Firemonkey animation

Na screenshotu je vidět možná animace u Position.X, Position.Y a RotationAngle (kde je jedna skutečně použita). Ostatní jako např. u Padding nejsou vidět.

Tedy pro RotationAngle je definována FloatAnimation (definice a editace je přes combo box).

Jaké jsou vlastně možností animace? Animace existují i jako samostatné komponenty, ale to Vás moc nemusí zajímat - definicí u property FireMonkey zajistí vše potřebné. Jo a animace jsou plynulé.

Firemonkey animation

Nejčastěji používaná bude asi FloatAnimation - animace pozice, rotace - prostě jednoho reálného čísla (připomínám, že i pozice je ve FMX reálné číslo).

Animace je ve formuláři (ve structure view) uvedena pod komponentou, kterou animuje. Rozkliknutím získáme parametry animace.

Firemonkey animation

Cílem této animace navázané na tlačítko je vytvořit tlačítko, kterou se při mouseover rozklepe (tj. rotuje +-3 stupně).

Po nastavení vlastností vše pěkně funguje a při opuštění tlačítka se ale animace zastaví v pozici, v které byla. Menší úprava způsobí na konci nastavení zpět.

procedure TForm6.FloatAnimation1Finish(Sender: TObject);
begin
  Button1.RotationAngle := 0;
end;

Jako další ukázku ukáži TGradientAnimation. Při najetí myší na rectangle se pomalu změní jeho gradient. Firemonkey animation

U rectangle lze definovat jeho "extra" vlastnosti - jako je typ rohů, které boky se mají kreslit nebo výplň. V našem případě u dvou rohů nastavím jiný formát (jen pro ukázku flexibilnosti) a jako výplň nastavím gradient.

Firemonkey animation

Vytvoření nové animace přes combobox.

Firemonkey animation

Parametry GradientAnimace - vybere se kromě jiného počáteční a koncový gradient.

Firemonkey animation

Dialog pro výběr gradientu.

Tagy: , ,

FireMonkey

Komentování ukončeno

Naše nabídka

MVP
Ing. Radek Červinka - Embarcadero MVP
profil na linkedin, Twitter:@delphicz

Nabízím placené poradenství a konzultace v oblasti programování a vývoje SW.
Dále nabízíme i vývoj speciálního software na zakázku.

Neváhejte nás kontaktovat (i ohledně reklamy).

love Delphi

O Delphi.cz

Delphi je moderní RAD nástroj podporující tvorbu nativních aplikací pro platformu Win32, Win64, Mac OSX, Linux a na iPhone a Android.

Delphi.cz je nezávislý portál pro uživatele Delphi. Portál není koncipován pro úplné začátečníky, i když i ti se zde nebudou nudit, ale spíše na programátory, kteří již něco znají a chtějí své znalosti dále rozvíjet a sledovat novinky.

Poslední komentáře

Comment RSS

Dle měsíců