Tai yra 11 pamoka kaip "Windows Phone" vadovėlių serijos dalis. Šioje užduotyje sukursite "Expression Blend" siužetinę skiltį, kad animuotų tekstą reklamjuoste, kai tik paspausite mygtuką.
1. Atidarykite aktyvią darbo vietą animacijos darbo sričiai. Viduje konors Langas meniu, nukreipkite į Darbo vietos ir pasirinkite Animacija. Atkreipkite dėmesį, kad tai pakeičia langus, kad maksimaliai padidintų vietos, kuriomis galima redaguoti laiko juostą.
2. Jei reikia, išeikite iš mygtuko valdymo šablono redagavimo srities. Norėdami tai padaryti, spustelėkite mygtuką Apimtis aukštyn mygtukas šalia FancyButton (mygtuko šablonas) elementas Objektai ir laiko juostos skydelis, rodantis puslapio elemento medį.
3. Dabar Objektai ir laiko juostos skydas spustelėkite Naujas sukurti siužetinę plokštę. Tai mygtukas, pažymėtas + ženklu ir esantis viršutiniame dešiniajame skydelio kampe.
4. Į Sukurti istorijos išteklių Dialogas, nustatykite vardas į AnimateBanner ir spustelėkite Gerai.
5. Norėdami sukurti raktinius elementus animacijoje, spustelėkite mygtuką BannerTextBlock Elementas elemento medyje Objektai ir laiko juostos skydelis jį parinkti.
6. Dabar spragtelėkite ir vilkite dabartinę laiko juostos atkūrimo poziciją iki nusileidimo 1 antra
7. Tada pereikite prie Savybės skydelis, išplėskite Transformuoti kategorija ir pasirinkite Skalė paversti X turto vertė yra -1. Šis pertvaras atspindi elementą išilgai jo horizontalios ašies.
9. Dabar pakeiskite laiko juostos atkūrimo galą iki "offset" 2 sekundes.
10. Perjunkite prie Savybės skydelis, išplėskite Transformuoti kategorija ir pasirinkite Skalė paversti Pakeiskite vertę X nuosavybė atgal į 1 atkurti elementą į pradinę būseną. Atkreipkite dėmesį, kad dėl šio pakeitimo antrojo pagrindinio rėmo pasirodė siužetinių skydų laiko juostoje.
11. Norėdami išbandyti animaciją dizainerio, turite pridėti tam tikrą tekstą į reklamjuostę. Pirmiausia spustelėkite raudoną apskritimą kairėje AnimateBanner siužetinės plokštės pavadinimą viršutiniame kairiajame skydelio kampe, kad laikinai išjungtumėte įrašymą - nenorite, kad pridėtas tekstas taptų animacijos dalimi.
12. Dabar dešiniuoju pelės mygtuku spustelėkite BannerTextBlock elementas ant dizaino paviršiaus ir pasirinkite Redaguoti tekstą. Įveskite tinkamą banerio tekstą ir paspauskite ENTER.
13. Norėdami patikrinti animaciją, paspauskite žaisti virš laiko taško. Atkreipkite dėmesį, kaip žymeklio tekstas sukasi horizontaliai apie jo vidurinę ašį ir kaip judėjimas yra vienodas visame animacijos ciklui.
14. Pasirinkite pirmąjį raktų rėmelį, spustelėkite viduje pilkosios apskritimo piktogramą laiko juostoje. Atkreipkite dėmesį, kad pasirinkus rėmelį, dizaino rodinys atnaujinamas, kad būtų rodoma naudotojo sąsajos elementų būklė, nes jie rodomi toje rėme, šiuo atveju reklamjuosčio tekstas bus atspindėtas. Dabar, Savybės skydas, po Lengvinimas kategorija, įsitikinkite, kad EasingFunction yra pasirinktas, išplėskite išskleidžiamąjį sąrašą, kad būtų rodomas galimų funkcijų sąrašas, tada pasirinkite Cubic Out funkcija. Tai ypač sumažina funkciją, todėl perėjimas sumažina jo greitį, kai jis artėja prie pagrindinio rėmo.
15. Kartokite ankstesnio veiksmo procedūrą, kad sukonfigūruotumėte antrojo raktų ramybės sumažinimo funkciją. Šį kartą pasirinkite Cubic InOut funkcija, kad perėjimas prasidėtų lėtu greičiu, palaipsniui paspartėtų ir galiausiai sumažintų jo greitį, kai jis artėja prie pabaigos rėmo.
16. Norėdami išbandyti animacinių funkcijų palengvinimo efektą, paspauskite žaisti virš laiko skalės. Pasakyk, kaip reklamjuostė pradeda savo sukimosi greitį, tada sulėtėja, kai tekstas atsiranda veidrodyje, tada vėl pakelia greitį ir vėl vėl lėtėja, kad sugrįžtų į pradinę padėtį.
17. Dabar, kad vartotojo sąsajos dizainas yra baigtas, kitas žingsnis yra atnaujinti XAML kopijuoti į pagrindinį projektą.
- Pirmiausia Expression Blend spustelėkite skirtuką XAML dešiniojo lango krašte arba Vaizdas Meniu
- Rodyti Aktyvus dokumentų vaizdas ir pasirinkite XAML vaizdasTai parodo jums XAML vaizdą MainPage.xaml dokumentas.
- Tada pasirinkite ir nukopijuokite šaknies vaikus UserControl elementą į mainų sritį. Tai apima UserControl.Resources skyriuje ir Tinklelis elementas pavadintasLayoutRoot bet ne UserControl pats elementas.
18. Dabar "Visual Studio" atidarykite MainPage.xaml dokumentas XAML rodinyje ir pakeičia visą šaknies turinį vaikui navigacija: PhoneApplicationPage elementą su tekstu į iškarpinę, užtikrinant, kad pats pagrindinis elementas lieka nepakitęs.
19. Kaip paskutinį žingsnį MainPage.xaml failas, suraskite UserControl.Resources pradėkite ir pabaigkite žymas ir pakeiskite jas navigacija: PhoneApplicationPage.Resources žymos
20. Paspauskite CTRL + S išsaugoti MainPage.xaml failas
21. Iki šiol sukūrėte animacijos siužetinę juostelę, tačiau ji tiesiog egzistuoja kaip nepanaudotas projekto šaltinis.Norėdami žaisti animaciją, jums reikia aktyvuoti storyboard, atsakant į įvykį, šiuo atveju, kai Paspausk mane mygtukas. Norėdami atidaryti Spustelėkite šio mygtuko įvykio tvarkytojas:
- Eikite į Dizainas žvilgsnis į MainPage.xaml failas
- Dukart spustelėkite ant dizainerio paviršiaus esantį mygtuką, kad atidarytumėte failo kodą
- Padėkite žymeklį ant įvykio tvarkyklės
22. Jei norite atnaujinti įvykio tvarkytoją, kad galėtumėte žaisti animaciją, įterpkite šį kodo fragmentą į "tuščią" vietą prieš pat pabaigos petį.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
