Часто задаваемые вопросы по SilverLight: анимация и трансформации - Что такое раскадровка?

Что такое раскадровка?

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

Например, ниже вы можете видеть 4 эскиза, использованные в анимации, изображающей столкновение двух стрел со взрывом в конце. По существу, раскадровка будет содержать набор 4-х объектов анимации, которые будут быстро показаны в течение периода времени.

Рисунок 4 : - Эскизы стрел

Можем ли мы увидеть простую анимацию Silverlight?

Давайте создадим простую анимацию, показанную ниже. Мы создадим объект прямоугольника, увеличение высоты которого будет создавать эффект анимации. Вы можете увидеть на рисунке ниже, как будет выглядеть анимация. Мы выполним эту анимацию, используя объект ‘DoubleAnimation’.

Рисунок 5:- Анимация с помощью высоты прямоугольника

Первым шагом будет определение объекта прямоугольника. Ниже приведен фрагмент кода XAML, в котором определяется объект прямоугольника с высотой и шириной, равными 100, и с фоном шоколадного цвета.

<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">

</Rectangle>
</Grid> 

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

<Grid x:Name="LayoutRoot" Background="White"> 
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>

</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>

Наконец, мы помещаем в ‘DoubleAnimation’ объект, который использует ‘Height’ (высоту) как целевое свойство, которое будет анимировано от значения ‘100’ до значения ‘300’ в течение 5 секунд. Заметьте, что целевое имя – это объект прямоугольника ‘RectAnimated’. Мы также устанавливаем ‘AutoReverse’ в ‘истину’, что означает, что как только свойство достигнет значения ‘300’, анимация перезапустится, начиная со ‘100’.

<Grid x:Name="LayoutRoot" Background="White"> 
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="RectAnimated"
Storyboard.TargetProperty="Height"
From="100" By="300" Duration="0:0:5" 
AutoReverse="True" 
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>