Cómo: Reproducir medios con animaciones
Actualización: noviembre 2007
En este ejemplo se muestra cómo reproducir al mismo tiempo medios y animación mediante las clases MediaTimeline y DoubleAnimationUsingKeyFrames en el mismo Storyboard.
Ejemplo
Puede usar uno o más objetos MediaTimeline en un Storyboard junto con otros objetos Timeline, como animaciones.
En el ejemplo siguiente se establece la propiedad SlipBehavior de Storyboard en un valor de Slip, que especifica que la animación no avanza hasta que avanzan los medios (vídeo, en este ejemplo). Esta funcionalidad podría ser necesaria si la reproducción multimedia se retrasase debido al tiempo de carga.
<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>
Para obtener el ejemplo completo, vea Ejemplo Media Gallery.
Vea también
Tareas
Conceptos
Información general sobre objetos Storyboard
Información general sobre animaciones de fotogramas clave
Información general sobre animaciones
Información general sobre características de gráficos, animación y multimedia en WPF