Ez a 11. bemutató a Windows Phone bemutatósorozat részeként. Ebben a feladatban létrehozhat egy storyboardot a Expression Blend-ben, hogy animálja a szöveget a bannerben, amikor megnyomja a gombot.
1. Nyissa meg az aktív munkaterületet az animációs munkaterülethez. Ban,-ben Ablak menüt, mutasson munkaterületek és válasszuk ki Élénkség. Vegye figyelembe, hogy ez átrendezi az ablakokat annak érdekében, hogy maximalizálja az idővonal szerkesztéséhez rendelkezésre álló helyet.
2. Ha szükséges, lépjen ki a gombvezérlő sablon szerkesztési területéből. Ehhez kattintson a Hatálya felfelé gombot a FancyButton (gomb sablon) elem a Tárgyak és idővonal panel megjelenítéséhez az oldal elemfáját.
3. Most a Tárgyak és idővonal panel, kattintson Új létrehozni egy forgatókönyvet. Ez a gomb jelöli a + jelet, és a panel jobb felső sarkában található.
4. A Storyboard erőforrás létrehozása párbeszédablakban állítsa be a Név nak nek AnimateBanner és kattintson a gombra rendben.
5. Az animáció kulcskereteinek létrehozásához kattintson a BannerTextBlock elem az elemfában a Tárgyak és idővonal panel kiválasztásához.
6. Most kattintson és húzza az idővonal lejátszási fejének aktuális pozícióját az eltoláshoz 1 második.
7. Ezután váltson a Tulajdonságok panel, bontsa ki a átalakít kategóriát, és válassza ki a Skála átalakítani. x ingatlan értéke -1. Ez a transzformáció tükrözi az elemet vízszintes tengelye mentén.
9. Most változtassa meg az időzített lejátszási fejét az eltoláshoz 2 másodperc.
10. Váltson a Tulajdonságok panel, bontsa ki a átalakít kategóriát, és válassza ki a Skála átalakítani. Módosítsa a x tulajdonság vissza 1 hogy visszaállítsa az elem eredeti állapotát. Vegyük észre, hogy a változás miatt egy másik kulcskeret jelent meg a storyboard timeline-ban.
11. A tervező animációjának teszteléséhez hozzá kell adnia a szöveget a szalaghirdetéshez. Először kattintson a piros körre a AnimateBanner a panel bal felső sarkában a storyboard neve, hogy ideiglenesen kikapcsolja a felvételt - nem szeretné, hogy a hozzáadott szöveg részese legyen az animációnak.
12. Most kattintson a jobb gombbal a BannerTextBlock elemet a tervezőfelületen és válassza ki Szöveg szerkesztése. Adjon meg egy megfelelő szöveget a bannerhez és nyomja meg a gombot BELÉP.
13. Az animáció teszteléséhez nyomja meg a gombot Játék gombot az idővonal felett. Figyeljük meg, hogy a szalag szövege vízszintesen forog-e a középső tengelye körül, és hogyan mozog a mozgás az animációs ciklus során.
14. Válassza ki az első kulcskeretet az idővonalon lévő szürke kör ikonra kattintva. Vegye figyelembe, hogy amikor kiválasztja a keretet, a tervezőnézet frissítésekor megjeleníti az UI elemek állapotát, ahogyan azok a keretben jelennek meg, ebben az esetben a banner szöveg tükröződik. Most a Tulajdonságok panel, a lazítás kategória, gondoskodjon arról EasingFunction ki van választva, bontsa ki a legördülő listát a rendelkezésre álló funkciók listájának megjelenítéséhez, majd válassza a Cubic Out funkció. Ez a különösen enyhítő funkció az átmenetet csökkenti, mivel közeledik a kulcskerethez.
15. Ismételje meg az előző lépésben leírt eljárást a második kulcskeret enyhítési funkciójának konfigurálásához. Ezúttal válassza ki a Cubic InOut hogy az átmenet lassú ütemben induljon el, fokozatosan felgyorsuljon és végül csökkentse a sebességét, amikor közeledik a végső kerethez.
16. A lenyíló funkciók animációra gyakorolt hatásának teszteléséhez nyomja meg a gombot Játék az idővonal fölött.Nézze meg, hogy a szalag nagy sebességgel elindítja a forgatást, majd lassítja a tükrözött szöveget, majd újra felveszi a sebességet, és végül lassul, hogy visszatérjen az eredeti helyzetébe.
17.Az felhasználói felület befejezése után a következő lépés a frissített XAML visszaállítása a főprojektbe.
- Először az Expression Blendben kattintson az XAML fülre az ablak jobb szélén vagy a Kilátás menü
- Vmerre mutat Aktív dokumentum nézet és válasszuk ki XAML nézetEz eléri a XAML nézetét MainPage.xaml dokumentum.
- Ezután válassza ki és másolja a gyökér gyermekét UserControl elemet a vágólapra. Ez magában foglalja a UserControl.Resources szakasz és a Rács elem neveLayoutRoot de nem az UserControl elemet.
18. Most a Visual Studio programban nyissa meg a MainPage.xaml dokumentumot a XAML nézetben és cserélje ki a gyökér teljes gyermektartalmát navigáció: PhoneApplicationPage elemet a vágólapon lévő szöveggel, biztosítva, hogy a gyökér elem maga változatlan maradjon.
19. Utolsó lépésként a MainPage.xaml fájl, keresse meg a UserControl.Resources indítsa el és zárja le a címkéket, és cserélje ki őket navigáció: PhoneApplicationPage.Resources címkéket.
20. Nyomja meg a gombot CTRL + S menteni a MainPage.xaml fájlba.
21. Eddig létrehoztál egy animációs storyboardot a banner szövegéhez, de egyszerűen csak a felhasználatlan erőforrásként létezik a projektben.Az animáció lejátszásához ki kell kapcsolnia a storyboardot egy eseményre válaszolva, ebben az esetben, amikor a Kattints ide gombot megnyomja. A Kattints eseménykezelő erre a gombra:
- Menjen a Tervezés kilátás a MainPage.xaml fájl
- Kattintson duplán a tervezőfelületen lévő gombra a kód mögötti fájl megnyitásához
- Állítsa a kurzort az eseménykezelőre
22. Az eseménykezelő frissítéséhez az animáció lejátszásához helyezze be a következő kódrészletet a "merész" helyre közvetlenül a záró zárójel előtt.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
