Создание анимации

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

Для начала создадим приложение с видео. И так возьмем видео файл, в нашем случае itsyoudad.wmv. Добавим на страницу нашего приложения, и попробуем запустить.

Код XAML:
<UserControl
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication2.Page"
Width="800" Height="600" xmlns:SilverlightApplication2="clr-namespace:SilverlightApplication2" >
<Canvas x:Name="LayoutRoot" Background="White" >
<MediaElement Height="240" x:Name="itsyoudad " Width="320" Canvas.Left="84" Canvas.Top="182" Source="itsyoudad.wmv" Stretch="Fill" />
</Canvas>
</UserControl>

Убедились, что все работаем теперь создадим простейшую анимацию.
Добавим у нашего Canvas-а раздел ресурсов, в котором создадим нашу анимацию, вы можете создать любую анимацию, чтобы вам был легче это сделать используйте Blend Studio, дополнительно включив панель анимации. В нашем случае я использовал анимацию, с применением ключевых точек(Key Frames). Назовем нашу анимацию “MoveVideo”, чтобы запустить анимацию, мы будем, потом к ней обращаться по этому имени. А у MediaElement.RenderTransform добавить раздел MediaElement.RenderTransform у которого создаем TransformGroup с соответствующим набор трансформаций. У Вас должно получится что-то в этом роде.

Код XAML:

<Canvas x:Name="LayoutRoot" Background="White" >
<Canvas.Resources>
<Storyboard x:Name="MoveVideo">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="itsyoudad_wmv" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="294"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="itsyoudad_wmv" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="13"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<MediaElement Height="240" x:Name="itsyoudad_wmv" Width="320" Canvas.Left="84" Canvas.Top="182" Source="itsyoudad.wmv" Stretch="UniformToFill" >
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
</Canvas>

Теперь, чтобы активировать нашу анимацию используем событие какого-нибудь контрола, для этого добавим кнопку и пропишем у нее событие Click, в котором будем запускать нашу анимацию.

Код XAML:

<Button Click="Button_Click" Content="Go" Width="100" Height="50" Canvas.Left="50" Canvas.Top="50" />

А в коде файла Page.xaml.cs напишем обработчик события, который запустит нашу анимацию.

Код С#:

private void Button_Click(object sender, RoutedEventArgs e)
{
this.MoveVideo.Begin();
}

Запускаем наше приложение и смотрим, что у нас получилось. По нажатию кнопки видео начинает смещаться, пока не достигает конечной точки, и так будет происходить всегда, когда мы будем нажимать кнопку. Как видите, видео файл продолжает, проигрываться даже во время смещения. Опять повторюсь, используя, любую другую анимацию, можно вращать, трансформировать, перемещать видео файл. Можно добиться 3Д эффектов, но это оставим уже на ваше самостоятельное изучение.

Наложение

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

Видите какого необычного эффекта можно добиться. А делается это очень просто.

1) Создаем приложение с видео.
2) Создаем какую-нибудь фигуру используя инструмент Pen, либо берем Ellipse.

3) И накладываем его поверх нашего видео.

4) Теперь необходимо выделить видео элемент и нашу фигуру, используя клавишу «shift». Теперь идем в меню Object->Path->Make Clipping Path либо, используя сочетание клавиш Ctrl+7.

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

Приведу несколько примеров, самый интересный из них это пазл, у которого каждый пазл, это видео:

Видео текст:

Popularity: 14% [?]