Windows Phone Tutorial 11: Vytvorenie animácie pre bannerový text

Windows Phone Tutorial 11: Vytvorenie animácie pre bannerový text
Windows Phone Tutorial 11: Vytvorenie animácie pre bannerový text
Anonim

Toto je 11. tutoriál ako súčasť série Windows Phone tutorial. V tejto úlohe vytvoríte storyboard v Expression Blend, aby ste animovali text v banneru pri každom stlačení tlačidla.

1. Otvorte aktívny pracovný priestor do animačného pracovného priestoru. V okno menu, prejdite na pracovnej plochy a vyberte položku animácie, Všimnite si, že toto upravuje okná s cieľom maximalizovať priestor, ktorý je k dispozícii na úpravu časovej osi.

2. V prípade potreby opustite editačnú oblasť šablóny ovládania tlačidiel. Ak to chcete urobiť, kliknite na tlačidlo Rozsah hore vedľa tlačidla FancyButton (šablóna tlačidiel) prvok v Objekty a časová os panel pre zobrazenie stromu prvkov stránky.

3. Teraz, v Objekty a časová os panel, kliknite na tlačidlo Nový vytvoriť storyboard. Toto tlačidlo je označené značkou + a nachádza sa v pravom hornom rohu panelu.

4. V Vytvorte zdroj Storyboard dialóg, nastavte názov na AnimateBanner a kliknite na tlačidlo OK.

5. Ak chcete vytvoriť kľúčové snímky v animácii, kliknite na tlačidlo BannerTextBlock prvok v prvku stromu Objekty a časová os vyberte ho.

6. Teraz kliknite a presuňte aktuálnu pozíciu hrací hlavy časovej osi na posun 1 na druhom mieste.

Image
Image

7. Ďalej prepnite na položku vlastnosti panel, rozbaľte premeniť a vyberte položku mierka transformácie. X hodnota nehnuteľnosti je -1, Táto transformácia zrkadlí prvok pozdĺž svojej vodorovnej osi.

8. Prepnite sa na panel časovej osi. Skontrolujte, či obsahuje nový rámček kľúča pri zvolenom časovom posune, ktorý je výsledkom meniacich sa prvkov v stromovej štruktúre, zatiaľ čo nahrávanie časovej osi je aktívne
8. Prepnite sa na panel časovej osi. Skontrolujte, či obsahuje nový rámček kľúča pri zvolenom časovom posune, ktorý je výsledkom meniacich sa prvkov v stromovej štruktúre, zatiaľ čo nahrávanie časovej osi je aktívne

9. Teraz môžete zmeniť časovú hlavu playhead na offset z 2 sekúnd.

10. Prepnite na položku vlastnosti panel, rozbaľte premeniť a vyberte položku mierka transformácie. Zmeňte hodnotu X majetok späť na 1 obnoviť prvok do jeho pôvodného stavu. Všimnite si, že druhý kľúčový rámec sa objavil v časovej osi storyboard kvôli tejto zmene.

11. Ak chcete otestovať animáciu v návrhárovi, musíte do banneru pridať nejaký text. Najskôr kliknite na červený kruh vľavo od AnimateBanner názov scenára v ľavom hornom rohu panelu, ktorý dočasne vypne nahrávanie - nechcete, aby sa pridaný text stal súčasťou animácie.

Image
Image

12. Teraz kliknite pravým tlačidlom na BannerTextBlock prvku na povrchu návrhu a vyberte Upraviť text, Zadajte vhodný text pre banner a stlačte ENTER.

13. Ak chcete otestovať animáciu, stlačte tlačidlo hrať nad časovú os. Všimnite si, ako sa text v paneli otáča horizontálne okolo svojej strednej osi a ako je pohyb jednotný počas animačného cyklu.

Image
Image

14. Kliknutím na ikonu šedého kruhu v časovej osi vyberte prvý rámček. Všimnite si, že keď vyberiete rámček, návrhár zobrazuje aktualizácie, aby sa zobrazil stav prvkov používateľského rozhrania tak, ako sa zobrazujú v danom rámci. V takomto prípade sa text bannera zobrazí zrkadlené. Teraz, v vlastnosti panel, pod zmiernenie kategórie, zaistiť, že EasingFunction, rozbaľte rozbaľovací zoznam a zobrazte zoznam dostupných funkcií a potom zvoľte položku Cubic Out Funkcie. Táto konkrétna funkcia uvoľnenia spôsobí prechod, aby sa znížila rýchlosť pri približovaní k kľúčovému rámcu.

Image
Image

15. Opakujte postup v predchádzajúcom kroku a nakonfigurujte funkciu uvoľnenia pre druhý kľúčový rámček. Tentoraz si vyberte Cubic InOut funkciu, aby sa prechod spustil pomalou rýchlosťou, postupne zrýchlil a nakoniec znížil jeho rýchlosť pri približovaní sa k koncovému rámcu.

16. Ak chcete otestovať účinok funkcií uvoľnenia animácie, stlačte tlačidlo hrať nad časovou osou. Zistíte, ako sa banner začne otáčať vysokou rýchlosťou, potom sa spomalí, keď sa text zobrazí zrkadlovo, potom znova nasníma rýchlosť a nakoniec opäť spomalí, aby sa vrátil do svojej pôvodnej pozície.

17.Ak je návrh používateľského rozhrania úplný, ďalším krokom je kopírovanie aktualizovaného XAML späť do hlavného projektu.

  • Najprv v zložke Expression Blend kliknite na kartu XAML na pravej strane okna alebo v okne vyhliadka Ponuka
  • Ukázať na Zobrazenie aktívneho dokumentu a vyberte položku Zobrazenie XAMLTým sa dostaneme do pohľadu XAML MainPage.xaml Dokument.
  • Ďalej vyberte a skopírujte deti koreňa UserControl prvku do schránky. Zahŕňa to UserControl.Resources a sekcia mriežka názov prvkuLayoutRoot ale nie UserControl samotný prvok.

18. Teraz v aplikácii Visual Studio otvorte MainPage.xaml dokument v zobrazení XAML a nahradiť celý obsah dieťaťa koreňa Navigácia: PhoneApplicationPage prvok s textom v schránke, čím sa zabezpečí, že samotný koreňový prvok zostane nezmenený.

19. Ako posledný krok, v MainPage.xaml súbor, nájdite súbor UserControl.Resources štart a koniec značky a nahraďte ich Navigácia: PhoneApplicationPage.Resources tagy.

20. Stlačte CTRL + S uložiť MainPage.xaml súboru.

21. Doteraz ste vytvorili animačný scenár pre bannerový text, ale jednoducho existuje ako nepoužitý zdroj v projekte.Ak chcete prehrať animáciu, musíte spúšťať storyboard ako odpoveď na udalosť, v tomto prípade, kedykoľvek Klikni na mňa tlačidlo stlačené. Otvoriť kliknite obsluha udalosti pre toto tlačidlo:

  • Prejdite na stránku dizajn pohľad na MainPage.xaml súbor
  • Dvakrát kliknite na tlačidlo na povrchu návrhára a otvoríte súbor s kódom za sebou
  • Umiestnite kurzor na obsluhu udalosti

22. Ak chcete aktualizovať obslužný program udalostí na prehrávanie animácie, vložte nasledujúci úryvok kódu do "tučného" priestoru bezprostredne pred koncovou vzperou.

private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }

Odporúča: