Windows Phone Tutorial 11: Создание анимации для текста баннера

Учебники

Это 11-й учебник из серии руководств по Windows Phone. В этом задании вы создадите раскадровку в Expression Blend, чтобы анимировать текст в баннере при каждом нажатии кнопки.

1. Откройте активное рабочее пространство для рабочего пространства анимации. В меню Окно укажите Рабочие пространства и выберите Анимация . Обратите внимание, что это переставляет окна, чтобы максимизировать пространство, доступное для редактирования временной шкалы.

2. При необходимости выйдите из области редактирования шаблона кнопки управления. Для этого нажмите кнопку Scope Up рядом с элементом FancyButton (Button Template) на панели Объекты и временная шкала , чтобы отобразить дерево элементов. страницы.

3. Теперь на панели Объекты и временная шкала нажмите Создать , чтобы создать раскадровку. Это кнопка со знаком +, расположенная в верхнем правом углу панели.

4. В диалоговом окне Создать ресурс раскадровки установите для Имя значение AnimateBanner и нажмите ОК .

5. Чтобы создать ключевые кадры в анимации, выберите элемент BannerTextBlock в дереве элементов на панели Объекты и временная шкала , чтобы выбрать его.

6. Теперь щелкните и перетащите текущую позицию точки воспроизведения временной шкалы со смещением 1 секунды.

7. Затем перейдите на панель Свойства , разверните категорию Преобразование и выберите преобразование Масштаб . Значение свойства X равно -1 . Это преобразование отражает элемент вдоль его горизонтальной оси.

8. Вернитесь на панель временной шкалы. Убедитесь, что он содержит новый ключевой кадр с выбранным временным сдвигом, который является результатом изменения элементов в дереве, когда активна запись временной шкалы.

9. Теперь измените точку воспроизведения временной шкалы на смещение 2 секунд.

10. Перейдите на панель Свойства , разверните категорию Преобразование и выберите преобразование Масштаб . Измените значение свойства X обратно на 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 и элемент Grid с именем LayoutRoot , но не сам элемент UserControl .

18. Теперь в Visual Studio откройте документ MainPage.xaml в представлении XAML и замените все дочернее содержимое корневого элемента navigation: PhoneApplicationPage текстом в буфере обмена, гарантируя, что сам корневой элемент остается неизменным.

19. В качестве последнего шага в файле MainPage.xaml найдите начальный и конечный теги UserControl.Resources и замените их на navigation: PhoneApplicationPage.Resources теги.

20. Нажмите CTRL + S , чтобы сохранить файл MainPage.xaml .

21. Пока что вы создали анимационную раскадровку для текста баннера, но он просто существует как неиспользуемый ресурс в проекте. Чтобы воспроизвести анимацию, вам нужно вызвать раскадровку в ответ на событие, в этом случае при каждом нажатии кнопки Click Me . Чтобы открыть обработчик событий Нажмите для этой кнопки:

  • Перейдите в представление Дизайн файла MainPage.xaml .
  • Дважды щелкните кнопку на поверхности конструктора, чтобы открыть файл с выделенным кодом
  • Поместите курсор на обработчик событий

22. Чтобы обновить обработчик событий для воспроизведения анимации, вставьте следующий фрагмент кода в «жирный» пробел непосредственно перед конечной скобкой.

 private void ClickMeButton_Click (отправитель объекта, RoutedEventArgs e)
{
BannerTextBlock.Text = MessageTextBox.Text;
 MessageTextBox.Text = String.Empty; 
 this.AnimateBanner.Begin (); 
} 

Оцените статью
TechArks.Ru
Добавить комментарий