Kezdőoldal > .NET, Windows Phone 7 > Animáció létrehozása – Expression Blend

Animáció létrehozása – Expression Blend

2012. április 25. szerda Hozzászólás Go to comments

Ahhoz, hogy látványos alkalmazásokat készítsünk, az animáció nagyon fontos. Az Expression Blend elsősorban dizájnereknek készített eszköz, amellyel mind a dizájn, mind az animációk készítése nagyon egyszerű feladat. Mivel animációt legtöbbször Expression Blend-ben készítünk, így a tutorialban is ezt az eszközt fogjuk használni XAML gépelése helyett. Ebben a feladatban egy kört fogunk mozgatni a telefon képernyőjén. Nagyon egyszerű feladat, mégis az animáció készítés alapjait el tudjuk sajátítani a segítségével.

1. Indítsuk el az Expression Blend-et, és hozzunk létre egy új Windows Phone 7 alkalmazást! A neve legyen mondjuk a Wp7AnimDemo!

image

2. A felhasználói felületre dobjunk fel egy gombot, ez a gomb fogja az animációt elindítani. A Content tulajdonságának adjuk meg az „Animáció indítása” szöveget, és méretezzük a szövegnek megfelelően (gombot feldobni az oldalsó toolbar-ról tudunk, bal oldalon van)!

image

3. Dobjunk fel a felhasználói felületre egy ellipszist is, ezt szintén az oldalsó Toolbar-ról tehetjük meg.

image

4. Jelöljük ki az ellipszist, és Properties ablakban a háttérszínét állítsuk át valamilyen színátmenetre (Gradient brush)!

image

5. Az alkalmazás felülete most kb. így néz ki:

image

6. Nyomjuk meg az F6-ot! Ilyenkor az Expression Blend átvált animációs módba, ebben az elrendezésben könnyebb animációkat készíteni: nagyobb a Timeline stb.

7. Az Objects and Timeline-on kattintsunk a plusz (+) jelre, és hozzunk létre egy új Storyboardot (a neve legyen sbAnim)!

image

8. Ezt követően megjelenik a Timeline, és a tervezői nézet körül is lesz egy piros keret. Az Objects and Timeline-on jelöljük ki az Ellipse-et!

image

9. A Timelin-on a sárga vonalat mozgassuk el, és állítsuk be 1 másodpercre az értékét, eközben természetesen az Ellipse maradjon kijelölve!

image

10. Az ellipszist mozgassuk át jobb oldalra!

11. A Timeline sárga vonalkáját most állítsuk 2 másodpercre, az ellipszist pedig mozgassuk lefelé, a jobb alsó sarok felé!

12. Nyomjuk meg a play gombot, és látni fogjuk, hogy az animáció 2 másodperc alatt végbemegy, és az ellipszis megérkezik a jobb alsó sarokba.

13. Ha viszont most elindítjuk az alkalmazást, nem fog történni semmi, nem fut le az animáció. Jelöljük ki az „Animáció indítása” gombot, a Properties ablakban váltsunk át az eseményekhez (Villám jel), és kattintsunk kétszer a Klikkbe! Ekkorra betöltődik az Expression Blend kódszerkesztője. Itt is lehet C# kódot írni, igaz, ez közel se olyan okos, mint a Visual Studio-é, de egy animáció elindításához, valamint kisebb műveletekhez tökéletesen elég. Az esemény törzsébe írjuk a következőt:

sbAnim.Begin();

14. Indítsuk el az alkalmazást: kattinsunk az Animáció indítása gombra! Ekkor az ellipszis 2 másodperc alatt a jobb alsó sarokba érkezik.

image

Látható, hogy animációt nagyon egyszerű létrehozni Expression Blend segítségével. Természetesen nemcsak mozgatást tudunk végrehajtani, és nemcsak egyszerű alakzatokon.

Advertisements
Kategóriák:.NET, Windows Phone 7 Címke: , ,
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: