[C#/WPF] Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기

■ Ellipse 엘리먼트를 사용해 커졌다 사라지는 동심원 애니메이션을 만드는 방법을 보여준다.

▶ 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="Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="Ellipse">
            <Setter Property="VerticalAlignment"   Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Width"               Value="0"      />
            <Setter Property="Height"              Value="0"      />
            <Setter Property="StrokeThickness"     Value="2"      />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard >
                        <Storyboard
                            FillBehavior="Stop"
                            RepeatBehavior="Forever">
                            <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Height"
                                Duration="0:0:5"
                                To="300" />
                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                Duration="0:0:5"
                                From="1"
                                To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Ellipse Margin="20  0  0  0" Stroke="Red"      />
        <Ellipse Margin=" 0 10  0  0" Stroke="Orange"   />
        <Ellipse Margin=" 0  0 20  0" Stroke="Yellow"   />
        <Ellipse Margin=" 0  0  0 30" Stroke="Green"    />
        <Ellipse Margin=" 0  0  0  0" Stroke="Blue"     />
        <Ellipse Margin=" 0 30 10  0" Stroke="DarkBlue" />
        <Ellipse Margin="30  0  0 10" Stroke="Purple"   />
    </Grid>
</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="Ellipse 엘리먼트 : 커졌다 사라지는 동심원 애니메이션 설정하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Style.Triggers>

<Storyboard

FillBehavior="Stop"

RepeatBehavior="Forever">

<DoubleAnimation

Storyboard.TargetProperty="Width"

Duration="0:0:5"

To="300" />

<DoubleAnimation

Storyboard.TargetProperty="Height"

Duration="0:0:5"

To="300" />

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="0:0:5"

From="1"

To="0" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

</Grid>

</Window>

TestProject.zip