Использование Expression Blend с Silverlight 2

Использование Blend для создания анимаций

Подробно создание анимаций будет рассмотрено в "Трансформация и анимация в XAML" , но если говорить кратко, анимация создается в Silverlight за счет изменения свойства объекта во времени. Анимации такого типа можно без труда создавать визуально, используя Blend и редактор временной шкалы.

Одна из форм анимации, поддерживаемых Silverlight, - DoubleAnimation (Анимация свойств типа Double ), которая используется для изменения числовых свойств, таких как, например, ширина визуального элемента Ellipse. Другой тип, ColorAnimation (Цветовая анимация), используется для изменения цвета свойства Brush.

Например, рассмотрим Ellipse, представленный на рис. 2.21 (который выглядит кругом, потому что его высота и ширина равны). Чтобы визуальными средствами анимировать изменение ширины элемента Ellipse, необходимо добавить новый элемент Storyboard, содержащий эту анимацию.

Рис. 2.21. Рисование круга.

В представлении Objects And Timeline выберите Ellipse и нажмите кнопку + рядом со списком Storyboard в верхней части панели. После принятия в диалоговом окне Create Storyboard (Создание раскадровки) настроек по умолчанию появится редактор временной шкалы. Также вверху окна Blend будет выведено сообщение Timeline Recording Is On (Ведется запись временной шкалы). Нажмите клавишу F6 для реорганизации рабочего пространства, что упростит работу над анимацией. Экран должен выглядеть примерно так, как показано на рис. 2.22.

Найдите на временной шкале желтую линию. Она обозначает текущее положение курсора воспроизведения на временной шкале. Перетащите его на отметку 2 секунды и щелкните инструмент Record Keyframe (Запись ключевых кадров), располагающийся в верхней части временной шкалы. Он выглядит как шарик с небольшим зеленым знаком плюс (+) снизу справа. На временной шкале на отметке 2 секунды появится маленький овал, как показано на рис. 2.23.

После того, как определен ключевой кадр, любые вносимые изменения в свойства объекта будут записываться в этот ключевой кадр. Продолжим и изменим ширину Ellipse, в то время как желтая линия остается на отметке 2 секунды, обозначая текущее положение на временной шкале. Например, зададим для ширины значение 200 и для свойства Fill значение Red (Красный).

Теперь подвигаем курсор воспроизведения (верхушка вертикально желтой линии на временной шкале) влево-вправо и увидим изменение ширины и цвета круга во времени.

Рис. 2.22. Редактирование временной шкалы.

Рис. 2.23. Добавление ключевого кадра.

А вот XAML-код, сформированный в результате создания анимации визуальными средствами:

<UserControl.Resources>
  <Storyboard x:Name="Storyboard1">
    <DoubleAnimation Using="" KeyFrames="" Storyboard.TargetName="ellipse" Story="" 
                     board.TargetProperty="(FrameworkElement.Width)" 
                     BeginTime="00:00:00">
      <SplineDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
    </DoubleAnimationUsingKey Frames>
    <ColorAnimation Using="" Key="" Frames="" Story="" board.TargetName="ellipse" 
                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                    BeginTime="00:00:00">
      <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFF2200"/>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
  <Ellipse Height="100" Width="100" Fill="#FFFFF500" Stroke="#FF000000" 
           x:Name="ellipse"/>
</Grid>

Намного более подробно структура этого XAML будет рассмотрена в "Трансформация и анимация в XAML" , но важно обратить внимание на экземпляр элемента Storyboard.TargetName, обозначающий, для какого элемента определена анимация, и экземпляр элемента Storyboard.TargetProperty, обозначающий изменяемое свойство. Как видим, в данном XAML присутствует две анимации: изменяющая ширину целевого объекта и изменяющая его цвет. Во время формирования визуального представления анимации Silverlight использует это описание для вычисления значений свойств в каждом кадре.

Заключение

В данной лекции были рассмотрены основы работы с Expression Blend и проведен краткий обзор возможностей, которые он предлагает дизайнеру или разработчику, создающему и реализующему собственные приложения Silverlight. Было показано, как можно использовать Blend для разработки решений и проектов Silverlight, и какие инструменты предлагает Blend IDE для создания и управления визуальными элементами, компоновкой, элементами управления и анимациями в приложении.

Данная лекция лишь поверхностно знакомит с тем, что можно делать с помощью Blend, но, возможно, полученные сведения вдохновят читателей на более глубокое его изучение.

Вторая часть набора инструментов взаимодействия дизайнера и разработчика находится в Visual Studio. В "Использование Visual Studio с Silverlight 2" будет рассмотрено, как можно использовать этот инструмент, что общего у него с Blend, и какие мощные возможности он обеспечивает разработчикам. Будет показано, как можно создать свое первое Silverlight-приложение - головоломку с перемещением фрагментов.