A InfoWiki wikiből

A lap 2008. december 28., 11:41-kori változata

XAML Alapok

Windows Presentation Foundation

Windows Forms Reloaded

Hernyák Zoltán

Animációk

Az animációk teszik lehetővé az igazi dinamikus viselkedésű felhasználói felület tervezését. Gyakori effetkusok amikor egy gomb fölé húzott egér hatására a gomb háttere felfénylik, az ikonok nagyobbak lesznek, stb.

Az animációk kezelése a WPF részét képezi, ezért nem kell kódot írni, időzítőket használni, stb. E helyett be kell konfigurálni, megadni mennyi idő alatt milyen változások történjenek. Az animációk ideje alatt a vezérlők megmaradnak vezérlőkenk, tehát amíg pl egy nyomógomb (button) animálódik, addig is megmarad nyomógomb marad, vagyis rá lehet klikkelni, eseményeket vált ki, stb.

A rendszer alapötlete az jellemző-alapú animáció (property-based animation). Ennek során adott idő alatt egy dependecy-property értéke változik meg egy kezdőértékről egy végértékre, folyamatos átmenet során. Pl. egy gomb háttérszínét is egy ilyen dep prop írja le, melynek értéke #f981a0-ről #9b0028-re változik 1 másodperc alatt. Ekkor azt fogjuk látni, hogy a gomb színe fokozatosan világos vörösről sötét vörösre vált. A gomb szélességét is egy dep prop írja le, amely 20-ról 40-re vált, akkor azt fogjuk látni, hogy a gomb szélessége folyamatosan megnő. Az animálás során egy időben több dep prop is változhat, illetve megoldható, hogy a különböző dep prop értékek más-más időintervallum alatt érjék el a végértéket.

A rossz hír az, hogy ha olyan animációt szeretnénk elvégezni, amely nem írható le dependency property változtatással, akkor a baj elég nagy. Ugyanis ezen rendszerrel egyszerűen csakis ezek oldhatók meg. Tehát a DOOM IV megírására ez nem feltétlenül alkalmas.

Triggerek

Az animációkat el is kell indítani. Ehhez triggerek alkalmasak. Trigger lehet pl "ha föléhúzzák az egeret", vagy "ha kattintanak" stb. Általában olyanok lehetnek triggerek, amelyek eseményeket váltanak ki, tehát másképp fogalmazva egy esemény jelentkezése indíthat el egy animációt. Az esemény és az animáció ugyanazon a vezérlőn van jelen, tehát "ha erre a gombra kattintanak, akkor ugyanezen a gomb sötétjen el" jellegű dologra lehet gondolni. Az "ha a betöltés gombra kattintanak, akkor a mentés gomb sötétedjen el" dolog már kicsit bonyolultabb eset.

Másik mód, amikor kódból direkt kényszerítjük ki egy animáció indítását. Így lehet egyszerűen elérni, hogy egy gombra kattintás hatására egy másik vezérlőn induljon el egy animáció.

Animációs osztály

Amikor egy dependency property értékét kell egy kezdőértéktől egy végértékig módosítani, amely mondjuk double típusú érték, akkor szükség van egy olyan animációs osztályra (animation class), amely képes double típusú értéket adott időintervallumban eltolni ezen intervallumban. Ha a típus ennél bonyolultabb (pl dátum típusú érték), akkor ehhez a típushoz illő animációs osztályt kell alkalmazni. Ha az adott típushoz nincs ilyen osztály, akkor azt a dependecy property értéket a rendszer nem tudja animálni.

Pl. a Button.Padding property Thickness típusú. Ennek animálásához létezik a ThicknessAnimation osztály (szerencsére).

Amennyiben egy típushoz nem létezne animációs osztály, készíthetünk egyet. A rendszerbe eleve elkészített animációs osztályok a System.Windows.Media.Animation névtérben vannak (szerencsére elég szép számban).

Sok olyan típus van, amelyhez nincs értelme animációs osztályt készíteni. Tipikus példa erre a felsorolás típusok (enum). Egy panel ahol felsorolás írja le a tartalmazott elemek elhelyezkedését (HorizontalAlignment), ott ezen érték animációja nem vezethet semmi látványos effektushoz, ezért nincs kidolgozva.

Hasonlóképp referencia-típusokat nem lehet animálni (bár azok al-jellemzőit (sub-properties) igen. Egy Brush objektum animációja értelmetlen, de a Brush objektum Color propertyjének animációja már igen.

Amikor egy adott értéket viszünk át adott idő alatt egy kezdőértékből egy végértékig, több módon is megtehetjük azt:

• lineáris átmenet (linear interpolation)
• kulcsérték-átmenet (key frame animation)
• ösvény-alapú átmenet (path-based animation)

Az utóbbi esetben adott időpillanatokhoz rögzítjük az adott értéket. Tehát például 0.1 másodperces időpontokhoz (key frame) megadjuk hogy ezen az időpillanatban mi legyen az éppen aktuális érték. Ha ezt elég kis időközönként megadjuk, akkor akár folyamatosnak tűnő animációt is leírhatunk vele, bár így ritkán használjuk. Ugyanakkor egy string esetén, ahol a lineáris átmenetet nem lehet értelmezni, a kulcsérték-átmenetet minden további nélkül. Sőt. Előzőekben indokoltuk, miért nem létezik minden típus esetén lineáris átmenet, vagy nem megvalósítható, de szögezzük le, hogy kulcsérték-átmenet minden típus esetén megvalósítható!

A lineáris átmenetet leíró animációs osztályok neve jellemzően <típusnévAnimation>, vagyis pl. DoubleAnimation. A kulcsérték-átmenetet megvalósító osztályok nevének végén a ...UsingKeyFrames áll, vagyis van például StringAnimationUsingKeyFrames osztály.

Az ösvény-alapú átmenet nagyon kifinomult technológia. Segítségével megadhatjuk hogy a változás milyen dinamikájú legyen. Pl. egy kontroll mozogjon át a képernyő bal felső sarkából a jobb alsó sarkába úgy, hogy közben két kunkort írjon le. Ezt a lineáris átmenettel nem lehet leírni, akkor egy egyenes mentén mozogna a vezérlő. A kulcsérték-átmenettel le lehetne írni, de nagyon sok kulcsértéket kellene megadni, hogy a mozgás a köriveken folyamatosnak tűnjön, ne legyen szögletes. Egy PathGeometry osztálybeli példányban megvalósított alak (shape) segítségével le lehet írni az ösvényt, amelyet a kontrollnak követnie kell. Ezen példány le fogja generálni a szükséges kulcsértékeket (key frames), amely leírja a mozgást.

Az ösvény alapú animációt támogató osztályok nevének vége ...UsingPath, vagyis létezik DoubleAnimationUsingPath osztály.

Természetesen a fenti három animációs technika mellett megvalósíthatunk saját technikákat is, tehát a rendszer bővíthető. A saját technikáink azonban ugyanazon az elven kell működjenek: értéket kell változtatni az idő előrehaladásának függvényében.

A rendszerbeli osztályok (és a saját osztályaink is) a <típusNévAnimationBase> osztály leszármazottja kell legyen.

Animációk a kódban

Párhuzamos animációk

Animációs életciklus

A TimeLine osztály