Главная » Silverlight » Определение анимации в коде

0

Иногда возникает необходимость определить каждый параметр анимации программ­но. Фактически такой сценарий реализуется довольно часто, например, когда нужно создать несколько анимаций и заранее неизвестно, сколько их нужно и как они долж­ны быть сконфигурированы (см. пример игры с бомбами). Программное определение объектов анимации полезно также, когда нужно применить одну и ту же анимацию на разных страницах или необходима дополнительная гибкость для удаления параметров анимационных объектов из разметки с целью их повторного использования (этот сце­нарий используется для перехода между страницами; см. далее).

Программно создать, сконфигурировать и запустить анимацию несложно. Нужно всего лишь создать объекты раскадровки и анимации, добавить анимации в раскадров­ку и запустить раскадровку. По завершении анимации ее легко очистить, определив ре­акцию на событие Storyboard. Completed.

Рассмотрим определение анимации в коде на примере игры с бомбами (рис. 10.12). Бомбы падают с увеличивающейся скоростью. Игрок должен щелкнуть на каждой бом­бе, чтобы уничтожить ее. После падения определенного количества бомб (по умолчанию пять штук) игра завершается.

Рис. 10.12. Игра с бомбами

Каждая сброшенная бомба обладает собственной раскадровкой с двумя анимация­ми. Первая анимация сбрасывает бомбу (изменяя свойство Canvas . Тор), а вторая — не­много покачивает ее для создания более реалистичного эффекта. Когда пользователь щелкает на бомбе, обе анимации останавливаются и запускаются две другие, которые плавно перемещают бомбу в сторону и удаляют ее с экрана. При каждом завершении анимации приложение проверяет, что произошло, — бомба упала или была уничтожена пользователем. Соответственно результату проверки обновляется счет игры, т.е. коли­чество упавших и уничтоженных бомб.

В следующих разделах подробно рассматривается каждый компонент приложения.

Главная страница

Главная страница приложения BombDropper довольно простая. Она содержит кон­тейнер Grid с двумя столбцами. В левую ячейку вложен контейнер Canvas, представля­ющий поле игры.

<Border BorderBrush="SteelBlue" BorderThickness="l" Margin="5"> <Grid>

<Canvas x:Name="canvasBackground" SizeChanged="canvasBackground_SizeChanged" MinWidth="5 0"> <Canvas.Background> <RadialGradientBrush> <GradientStop Color="AliceBlue" 0ffset="0"> </GradientStop>

<GradientStop Color="White" Offset="0.7"> </GradientStop> </RadialGradientBrush> </Canvas.Background> </Canvas> </Grid> </Border>

Когда размеры контейнера Canvas устанавливаются в первый раз или изменяются (при изменении размеров окна браузера пользователем), выполняется приведенный ниже код, который создает область отсечения.

private void canvasBackground_SizeChanged(object sender,

SizeChangedEventArgs e)

{

// Установка области отсечения, совпадающей //с областью вывода контейнера Canvas. RectangleGeometry rect = new RectangleGeometry (); rect.Rect = new Rect(0, 0, canvasBackground.ActualWidth, canvasBackground.ActualHeight); canvasBackground.Clip = rect;

}

Необходимость установки области отсечения обусловлена тем, что в противном слу­чае контейнер Canvas будет прорисовывать дочерние элементы, даже если они находят­ся за пределами области вывода. В результате бомбы будут выходить за пределы прямо­угольника, обозначающего рамку контейнера.

Примечание. Элемент UserControl определен без явного задания размеров, поэтому его размеры могут изменяться при перетаскивании рамки окна браузера пользователем. Код игры использует текущие размеры окна, не пытаясь выяснять, как они установлены. Следовательно, при очень широком окне бомбы после уничтожения будут "уходить" далеко в сторону, что затрудняет игру. Аналогично при очень высоком окне бомбы будут перемещаться слишком быстро, чтобы уложиться в заданный интервал времени. Вы можете исправить эти недостатки, применив фиксированную область и центрировав ее в элементе UserControl. Однако изменяемые размеры окна делают игру более гибкой и интересной.

С правой стороны главного окна расположена панель с фиксированной шириной, на которой находится кнопка запуска игры и приводится счет игры — количество упавших и уничтоженных бомб.

<Border Grid.Column="2" BorderBrush="SteelBlue" BorderThickness="l" Margin="5"> <Border.Background> <RadialGradientBrush GradientOrigin="1,0.7" Center="l,0.7" RadiusX="l" RadiusY="l"> <GradientStop Color="Orange" 0ffset="0"> </GradientStop>

<GradientStop Color="White" Offset="l"> </GradientStop> </RadialGradientBrush> </Border.Background>

<StackPanel Margin="15" VerticalAlignment="Center" HorizontalAlignment="Center"> <bomb: Title></bomb: Title>

<TextBlock x:Name="lblRate" Margin="0,30,0,0" TextWrapping="Wrap"

FontFamily="Georgia" FontSize="14"></TextBlock> <TextBlock x:Name="lblSpeed" Margin="0,30" TextWrapping="Wrap"

FontFamily="Georgia" FontSize="14"></TextBlock> <TextBlock x:Name="lblStatus" TextWrapping="Wrap" FontFamily="Georgla" FontSize="20">

Ни одна бомба еще не сброшена</TextBlock> <Button х:Name="cmdStart" Padding="5" Margin="0,30" Width="80" Content="Пуск" Click="cmdStart_Click"> </Button> </StackPanel>

</Border>

Правый столбец содержит необычный компонент — элемент Title. Это пользова­тельский элемент управления, выводящий стилизованное название игры. Он был соз­дан как векторный рисунок в Microsoft Word с помощью утилиты WordArt, сохранен как файл XPS и экспортирован в XAML способом, описанным в главе 8. Разметка надписи Bomb Dropper вставлена непосредственно на главную страницу, но надпись определена как отдельный пользовательский элемент управления, чтобы изолировать ее от осталь­ных компонентов пользовательского интерфейса.

Чтобы применить пользовательский элемент управления Title, нужно сделать его видимым в разметке. Для этого пространство имен проекта BombDropper добавлено в пространство имен XML (см. главу 2).

<UserControl х:Class="BombDropper.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:bamb=

"clr-namespace:BombDropper;assembly=BombDropper">

После этого префикс bomb можно использовать для вставки пользовательского эле­мента Title в приложение.

<bomb: Titlex/bomb: Title>

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии