[C#/WPF] MediaElement 엘리먼트 : 애니메이션과 함께 미디어 재생하기

■ MediaElement 엘리먼트에서 애니메이션과 함께 미디어를 재생하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <MediaElement Name="mediaElement"
            Width="250"
            Height="250">
            <MediaElement.Triggers>
                <EventTrigger RoutedEvent="MediaElement.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard SlipBehavior="Slip">
                                <MediaTimeline
                                    Source="MEDIA\sample.avi"
                                    BeginTime="00:00:00"
                                    Duration="00:00:30" />
                                <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetName="ellipseGeometry1"
                                    Storyboard.TargetProperty="RadiusY"
                                    RepeatBehavior="10x">
                                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                                        <LinearDoubleKeyFrame KeyTime="00:00:00.4" Value="80" />
                                        <SplineDoubleKeyFrame KeyTime="00:00:01"   Value="0"  KeySpline="0.6 0.0 0.9 0.0" />
                                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetName="ellipseGeometry2"
                                    Storyboard.TargetProperty="RadiusX"
                                    RepeatBehavior="10x">
                                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                                        <LinearDoubleKeyFrame KeyTime="00:00:00.4" Value="80" />
                                        <SplineDoubleKeyFrame KeyTime="00:00:01"   Value="0" KeySpline="0.6 0.0 0.9 0.0" />
                                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </MediaElement.Triggers>
        </MediaElement>
        <Border
            Margin="10 0 0 0"
            BorderThickness="1"
            BorderBrush="Black">
            <Canvas
                Width="250"
                Height="250"
                Background="White">
                <Path
                    StrokeThickness="5"
                    Stroke="Purple">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry1"
                            Center="125 125"
                            RadiusX="15"
                            RadiusY="10" />
                    </Path.Data>
                </Path>
                <Path
                    StrokeThickness="5"
                    Stroke="Gold">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry2"
                            Center="125 125"
                            RadiusX="10"
                            RadiusY="15" />
                    </Path.Data>
                </Path>
            </Canvas>
        </Border>
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

Background="Black"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<MediaElement Name="mediaElement"

Width="250"

Height="250">

<MediaElement.Triggers>

<EventTrigger.Actions>

<MediaTimeline

Source="MEDIA\sample.avi"

BeginTime="00:00:00"

Duration="00:00:30" />

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="ellipseGeometry1"

Storyboard.TargetProperty="RadiusY"

RepeatBehavior="10x">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="ellipseGeometry2"

Storyboard.TargetProperty="RadiusX"

RepeatBehavior="10x">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</MediaElement.Triggers>

</MediaElement>

<Border

Margin="10 0 0 0"

BorderThickness="1"

BorderBrush="Black">

<Canvas

Width="250"

Height="250"

Background="White">

<Path

StrokeThickness="5"

Stroke="Purple">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry1"

Center="125 125"

RadiusX="15"

RadiusY="10" />

</Path.Data>

</Path>

<Path

StrokeThickness="5"

Stroke="Gold">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry2"

Center="125 125"

RadiusX="10"

RadiusY="15" />

</Path.Data>

</Path>

</Canvas>

</Border>

</StackPanel>

</Window>

TestProject.zip