Это 11-й учебник в рамках серии обучающих программ для Windows Phone. В этой задаче вы создадите раскадровку в Expression Blend для анимации текста в баннере всякий раз, когда нажимается кнопка.
1. Откройте активное рабочее пространство в рабочей области анимации. в Окно меню, укажите Workspaces и выберите Анимация, Обратите внимание, что это упорядочивает окна, чтобы максимизировать пространство, доступное для редактирования временной шкалы.
2. При необходимости выйдите из области редактирования шаблона управления кнопкой. Для этого нажмите Сфера действия рядом с FancyButton (шаблон кнопки) элемент в Объекты и временная шкала чтобы отобразить дерево элементов страницы.
3. Теперь, в Объекты и временная шкала панель, нажмите новый для создания раскадровки. Это кнопка с надписью + и расположена в правом верхнем углу панели.
4. В Создать ресурс раскадровки диалога, установите название в AnimateBanner и нажмите Хорошо.
5. Чтобы создать ключевые кадры в анимации, нажмите BannerTextBlock элемент в дереве элементов Объекты и временная шкала чтобы выбрать его.
6. Теперь нажмите и перетащите текущую позицию точки воспроизведения временной шкалы на смещение 1 второй.
7. Затем переключитесь на свойства панели, разверните преобразование категории и выберите Масштаб преобразования. Икс значение свойства -1, Это преобразование отражает элемент вдоль его горизонтальной оси.
9. Теперь измените точку воспроизведения временной шкалы на смещение 2 секунд.
10. Переключитесь на свойства панели, разверните преобразование категории и выберите Масштаб преобразования. Измените значение Икс собственность обратно 1 для восстановления элемента в исходное состояние. Обратите внимание, что второй ключевой кадр появился на временной шкале раскадровки из-за этого изменения.
11. Чтобы протестировать анимацию в дизайнере, вам нужно добавить текст в баннер. Сначала нажмите красный круг слева от AnimateBanner имя раскадровки в верхнем левом углу панели, чтобы временно отключить запись - вы не хотите, чтобы добавленный текст стал частью анимации.
12. Теперь щелкните правой кнопкой мыши BannerTextBlock элемент на поверхности дизайнера и выберите Редактировать текст, Введите подходящий текст для баннера и нажмите ВОЙТИ.
13. Чтобы проверить анимацию, нажмите Играть над шкалой времени. Обратите внимание, как текст в баннере вращается горизонтально относительно его средней оси и как движение равномерно во время цикла анимации.
14. Выберите первый ключевой кадр, щелкнув значок серого круга на временной шкале. Обратите внимание, что при выборе кадра просмотр конструктора обновляется, чтобы отображать состояние элементов пользовательского интерфейса, как они появляются в этом фрейме, в этом случае текст баннера отображается зеркально. Теперь, в свойства панели под смягчение категории, убедитесь, что EasingFunction, разверните раскрывающийся список, чтобы отобразить список доступных функций, а затем выберите Cubic Out функция. Эта особая функция ослабления приводит к тому, что переход уменьшает ее скорость по мере приближения к ключевому кадру.
15. Повторите процедуру на предыдущем шаге, чтобы настроить функцию ослабления для второго ключевого кадра. На этот раз выберите Cubic InOut чтобы начать переход с небольшой скоростью, постепенно ускоряться и, наконец, уменьшать свою скорость по мере приближения к завершающему кадру.
16. Чтобы проверить влияние функций ослабления на анимацию, нажмите Играть над шкалой времени. Обратите внимание на то, как баннер начинает свое вращение с высокой скоростью, а затем замедляется по мере того, как текст отображается зеркально, затем он снова поднимает скорость и, наконец, замедляется снова, чтобы вернуться в исходное положение.
17. Теперь, когда дизайн пользовательского интерфейса завершен, следующий шаг - копирование обновленного XAML обратно в основной проект.
- Во-первых, в Expression Blend щелкните вкладку XAML в правой части окна или в Посмотреть меню
- Указать на Просмотр активного документа и выберите Просмотр XAML Это приведет вас к виду 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(); }
