Como: Play Media with Animations
Este exemplo mostra como reproduzir mídia e animações ao mesmo tempo usando as classes MediaTimeline e DoubleAnimationUsingKeyFrames no mesmo Storyboard.
Exemplo
Você pode usar um ou mais objetos MediaTimeline em um Storyboard junto com outros objetos Timeline, como animações.
O exemplo a seguir define a propriedade SlipBehavior do Storyboard com o valor Slip, que especifica que a animação não progride até que a mídia (vídeo nesse exemplo) ande. Essa funcionalidade pode ser necessária se a reprodução de mídia é atrasada devido ao tempo de carregamento.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas>
<!-- Upper right hand Canvas contains the animations. -->
<Border BorderBrush="Black" BorderThickness="1" Canvas.Left="250">
<Canvas Width="250" Height="250" Background="White" >
<!-- The two Path elements below create the purple and gold rings
which are animated while the media is played. -->
<Path Stroke="Purple" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="125,125" RadiusX="15" RadiusY="10" />
</Path.Data>
</Path>
<Path Stroke="Gold" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry2"
Center="125,125" RadiusX="10" RadiusY="15" />
</Path.Data>
</Path>
</Canvas>
</Border>
<!-- Upper left hand Canvas contains the video. -->
<Canvas Width="250" Height="250" Background="Green">
<MediaElement Name="myvideo" Width="250" Height="250"
Canvas.Left="0" Canvas.Top="0">
<MediaElement.Triggers>
<EventTrigger RoutedEvent="MediaElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<!-- This Storyboard contains both media (video in this example) and animations. Note
the SlipBehavior value of "Slip" specifies that the animation does not progress
until the media progresses. This might be desirable if media playback is delayed
because of loading time. -->
<Storyboard SlipBehavior="Slip">
<!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.
For example, although the video clip (numbers.wmv) lasts longer, playback ends after six
seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
<MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>
<!-- The animations below animate the ellipses in the right hand pane. These animations are
timed to correspond to the counting in the video. -->
<!-- Animate the RadiusY property of the purple ellipse. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
RepeatBehavior="10x">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
<!-- Animate the RadiusX property of the gold ellipse. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyEllipseGeometry2"
Storyboard.TargetProperty="RadiusX"
RepeatBehavior="10x">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</MediaElement.Triggers>
</MediaElement>
</Canvas>
</Canvas>
</Page>
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas>
<!-- Upper right hand Canvas contains the animations. -->
<Border BorderBrush="Black" BorderThickness="1" Canvas.Left="250">
<Canvas Width="250" Height="250" Background="White" >
<!-- The two Path elements below create the purple and gold rings
which are animated while the media is played. -->
<Path Stroke="Purple" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry"
Center="125,125" RadiusX="15" RadiusY="10" />
</Path.Data>
</Path>
<Path Stroke="Gold" StrokeThickness="5">
<Path.Data>
<EllipseGeometry x:Name="MyEllipseGeometry2"
Center="125,125" RadiusX="10" RadiusY="15" />
</Path.Data>
</Path>
</Canvas>
</Border>
<!-- Upper left hand Canvas contains the video. -->
<Canvas Width="250" Height="250" Background="Green">
<MediaElement Name="myvideo" Width="250" Height="250"
Canvas.Left="0" Canvas.Top="0">
<MediaElement.Triggers>
<EventTrigger RoutedEvent="MediaElement.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<!-- This Storyboard contains both media (video in this example) and animations. Note
the SlipBehavior value of "Slip" specifies that the animation does not progress
until the media progresses. This might be desirable if media playback is delayed
because of loading time. -->
<Storyboard SlipBehavior="Slip">
<!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.
For example, although the video clip (numbers.wmv) lasts longer, playback ends after six
seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
<MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>
<!-- The animations below animate the ellipses in the right hand pane. These animations are
timed to correspond to the counting in the video. -->
<!-- Animate the RadiusY property of the purple ellipse. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
RepeatBehavior="10x">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
<!-- Animate the RadiusX property of the gold ellipse. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyEllipseGeometry2"
Storyboard.TargetProperty="RadiusX"
RepeatBehavior="10x">
<DoubleAnimationUsingKeyFrames.KeyFrames>
<LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
<SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
</DoubleAnimationUsingKeyFrames.KeyFrames>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</MediaElement.Triggers>
</MediaElement>
</Canvas>
</Canvas>
</Page>
For the complete sample, see Mídia Gallery.
Consulte também
Tarefas
Conceitos
Visão geral de animações de Quadro-Chave
Visão Geral de elementos gráficos, animação e media do WPF