如何：播放带有动画的媒体
更新：2007 年 11 月
此示例演示如何通过在同一 Storyboard 中使用 MediaTimeline 和 DoubleAnimationUsingKeyFrames 类同时播放媒体和动画。
示例
您可以将 Storyboard 中的一个或多个 MediaTimeline 对象与其他 Timeline 对象（如动画）结合使用。
下面的示例将 Storyboard 的 SlipBehavior 属性设置为值 Slip，该值指定：在媒体（本例中为视频）播放之前，动画将不会播放。如果媒体播放由于加载时间的原因而延迟，则可能需要此功能。
<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>
有关完整示例，请参见 媒体库。