방법: 애니메이션이 있는 미디어 재생
업데이트: 2007년 11월
이 예제에서는 MediaTimeline 및 DoubleAnimationUsingKeyFrames 클래스를 같은 Storyboard에 사용하여 미디어와 애니메이션을 동시에 재생하는 방법을 보여 줍니다.
예제
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>
전체 샘플을 보려면 미디어 갤러리를 참조하십시오.