Това е 11-ти урок, като част от настолната серия на Windows Phone. В тази задача ще създадете разказвач в Expression Blend, за да анимирате текста в банера при натискане на бутона.
1. Отворете активното работно пространство в анимационното работно пространство. В прозорец меню, посочете работни плотове и изберете Анимация, Забележете, че това пренарежда прозорците, за да се увеличи максимално пространството за редактиране на времевата линия.
2. Ако е необходимо, излезте от областта за редактиране на шаблона за управление на бутоните. За целта кликнете върху Обхват нагоре бутона до FancyButton (Бутон Шаблон) елемент в Обекти и времева линия за показване на дървото на елементите на страницата.
3. Сега, в Обекти и времева линия панел, щракнете върху нов за да създадете разказ. Това е бутонът, означен със знак + и разположен в горния десен ъгъл на панела.
4. В Създайте ресурс за статиите диалоговия прозорец, задайте име да се AnimateBanner и кликнете Добре.
5. За да създадете ключовите кадри в анимацията, щракнете върху BannerTextBlock елемент в дървото на елементите на Обекти и времева линия панел, за да го изберете.
6. Сега кликнете и преместете текущата позиция на плейър-хронологията на времевата линия до отместване на 1 секунда.
7. След това преминете към Имоти панел, разгънете Трансформирайте категория и изберете мащаб трансформира. х стойността на имота е -1, Тази трансформация отразява елемента по хоризонталната му ос.
9. Сега променете плейейзъра на хронологията до офсет на 2 секунди.
10. Преминете към Имоти панел, разгънете Трансформирайте категория и изберете мащаб трансформира. Променете стойността на х собственост обратно към 1 за възстановяване на елемента в първоначалното му състояние. Забележете, че втората ключова рамка се появи в хронологията на сценария, поради тази промяна.
11. За да тествате анимация в дизайнера, трябва да добавите текст към банера. Първо кликнете върху червения кръг отляво на AnimateBanner име на сценария в горния ляв ъгъл на панела, за да изключите временно записа - не искате добавеният текст да стане част от анимацията.
12. Сега щракнете с десния бутон върху BannerTextBlock елемент върху дизайнерската повърхност и изберете Редактиране на текст, Въведете подходящ текст за банера и натиснете ENTER.
13. За да тествате анимацията, натиснете бутона играя над времевата линия. Забележете как текстът в банера се върти хоризонтално около средната му ос и как движението е равномерно по време на анимационния цикъл.
14. Изберете първата клавишна комбинация, като кликнете върху иконата на сивия кръг в хронологията. Забележете, че когато изберете кадър, дизайнерът преглежда актуализациите, за да покаже състоянието на елементите на потребителския интерфейс, както се показват в този кадър, в този случай текстът на банера се показва огледално. Сега, в Имоти панел под Облекчаване категория, гарантира, че EasingFunction е избрано, разгънете падащия списък, за да се покаже списък с наличните функции и след това изберете Извънредно куче функция. Тази специфична функция за облекчаване причинява прехода, за да намали скоростта си, когато стигне до ключовата рамка.
15. Повторете процедурата в предишната стъпка, за да конфигурирате функцията за отпускане на втория ключ. Този път изберете Кубичен инут за да стартира преходът при бавна скорост, да ускорява постепенно и най-накрая да намали скоростта си, когато се приближава към крайната рамка.
16. За да тествате ефекта от функциите за облекчаване върху анимацията, натиснете играя над времевата линия. Забележете как банерът започва въртенето си с висока скорост, след това се забавя, когато текстът се появи огледално, след това отново вдига скоростта и накрая отново се забавя, за да се върне в първоначалната си позиция.
17.След като проектът на потребителския интерфейс е завършен, следващата стъпка е копирането на актуализирания XAML обратно в основния проект.
- Първо, в Expression Blend, кликнете върху раздела XAML в десния ръб на прозореца или в изглед меню
- Посочете до Активен преглед на документи и изберете XAML View Това ви препраща към изгледа XAML на MainPage.xaml документ.
- След това изберете и копирайте децата на корена UserControl елемент в клипборда. Това включва UserControl.Resources раздел и решетка елемент имеLayoutRoot но не и UserControl елемент.
18. Сега, в Visual Studio, отворете MainPage.xaml документ в XAML изглед и да замени цялото съдържание на детето на корена навигация: PhoneApplicationPage елемент с текста в клипборда, като се гарантира, че самият корен елемент остава непроменен.
19. Като последна стъпка, в MainPage.xaml файл, намерете UserControl.Resources маркери за начало и край и ги заменете навигация: PhoneApplicationPage.Resources тагове.
20. Натиснете CTRL + S за да запазите MainPage.xaml файл.
21. Досега сте създали анимираща сценария за банерния текст, но тя просто съществува като неизползван ресурс в проекта.За да възпроизведете анимацията, трябва да задействате сценария в отговор на събитие, в този случай, когато Кликнете върху мен бутон е натиснат. За да отворите Кликнете манипулатор за събития за този бутон:
- Отидете на Дизайн гледка към MainPage.xaml досие
- Щракнете двукратно върху бутона на дизайнерската повърхност, за да отворите файла с код-зад
- Поставете курсора върху манипулатора на събития
22. За да актуализирате инструмента за обработка на събития, за да възпроизведете анимацията, поставете следния кодов фрагмент в "удебеното" място непосредствено преди крайната скоба.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
