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

Введение и цель 

Это FAQ полностью посвящено анимации и трансформациям с помощью SilverLight. Руководство начинается с таких основ анимации, как временные шкалы и раскадровка. Позже в статье описываются различные поддерживаемые анимационные эффекты, и в конце руководства мы создаем простую анимацию в виде прямоугольника.

Некоторые новости о Silverlight

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

• 300 миллионов установленных копий SilverLight - не так плохо по сравнению с флэш, существующим уже долгие годы. Мы не пытаемся недооценить флэш, но начало существования флэш точно не было очень хорошим.
• По Silverlight транслировались последние Олимпийские игры и NBC.
• 3000 разработчиков и верстальщиков участвовали в этой инициативе.
• Netfix CEO redhastings присоединились к совету директоров Microsoft.

Как определяется анимация с точки зрения Silver light?

Анимация – это изменение значения в течение периода времени. Из-за изменения значения в течение периода времени создается иллюзия анимации. Например, вы можете нарисовать окружность и изменять свойство ‘Canvas.Right’, чтобы создать анимацию, в которой окружность движется вправо.

Рисунок 1: - Правое направление холста

Что представляет собой временная шкала в Silver light?

Время представляет собой интервал / единицу времени, в течение которого анимация будет двигаться. Единицей времени могут быть секунды, минуты или часы. Единица зависит от типа анимации. Класс ‘System.Windows.Media.Animation.Timeline’ представляет собой временную шкалу.

Какие различные виды анимации поддерживаются Silverlight?

Как было сказано выше, анимация связана с начальным значением и с его поступательным изменением по направлению к какому-то новому значению, чтобы создать иллюзию движения. Silver light использует для этого три свойства ‘From’, ‘To’ и ‘By’. ‘From’ задает начало анимации, ‘To’ задает точку, до которой анимация должна двигаться. ‘By’ – это условная (относительная) анимация. Когда мы определяем свойства ‘From’ и “By’, анимация движется вперед, начиная от значения, указанного в свойстве ‘From’, к значению, заданному суммой свойств ‘From’ и ‘By’.

Рисунок 2 :- Различные виды анимации
 

Используя свойства ‘From’, ‘By’ и ‘To’, вы можете получить линейную или нелинейную анимацию. В линейной анимации все движется прямо вперед, в то время как в нелинейной анимации все изменяется в соответствии с потребностями анимации.

Рисунок  3 :- Линейная и нелинейная анимация

Объяснение doubleanimation , coloranimation и pointanimation

Как сказано ранее, анимация silverlight связана с заданием значений ‘From’ ,’To’ и ‘By’ для свойства. Свойство может быть простым вещественным значением, может быть цветом или точкой. Silverlight распределил эти свойства по трем категориям, как описано ниже.

‘DoubleAnimation’ использует свойства с вещественным значением, например, Rectangle.Height (высота) или ширина. Вы можете задать вещественные значения, используя 'From','To' и 'By'.

‘PointAnimation’ использует значение точки, то есть значения X, Y для отрезков линии и для кривых.

‘ColorAnimation’ помогает изменить значение цвета объекта.

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

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

Например, ниже вы можете видеть 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> 

Какими различными способами Silverlight выполняет трансформацию?

Иногда вам нужно преобразовать ваш объект различными способами. Например, вы можете захотеть наклонить ваш объект на 45 градусов; вы можете захотеть исказить или вращать объект. Ниже приведены несколько важных примеров трансформации, которые вы можете выполнить с помощью Silverlight.

<TextBlock HorizontalAlignment="Center" 
Text="Text 
rotated by 45 degree">
<TextBlock.RenderTransform>
<RotateTransform Angle="45" />
</TextBlock.RenderTransform>
</TextBlock>

<TextBlock VerticalAlignment="Center"
 HorizontalAlignment="Center" 
Text="Text scaled with 2">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="2"/> 
</TextBlock.RenderTransform>
</TextBlock>

<TextBlock VerticalAlignment="Center" 
HorizontalAlignment="Center" Text="Text 
with X/Y values">
<TextBlock.RenderTransform>
<TranslateTransform X="-100" Y="-100"/>
</TextBlock.RenderTransform>
</TextBlock>

<Rectangle Fill="Chocolate" 
Stroke="Black" Width="100" Height="100">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>

<Rectangle Fill="Chocolate" 
Stroke="Black" Width="100" Height="100">
<Rectangle.RenderTransform>
<TransformGroup>

<SkewTransform AngleX="45"/>
<RotateTransform Angle="45"/>

</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>

Автор: Shivprasad Koirala