본문 바로가기

   
Programming/WPF

Animation

반응형

Width늘어나기 

<!--

       애니메이션(Animation) : 객체의 상태(속성)값을 A=>B로 서서히 변화를 주는 작업

                                     : 원하는 시간, 원하는 변화값 제어

                                        : 스토리보드(Storyboard), 애니메이션(Timeline)

-->

<Window x:Class="WPFEx.Animation"

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

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

        Title="Animation" Height="300" Width="300">

       <Button FontSize="13" Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center">

             <Button.Triggers>

                    <!--속성 트리거 : 특정 속성값이 만족하면 실행 = 조건을 만족하면 속성을 적용-->

                    <!--이벤트 트리거 : C# 이벤트와 동일 => 이벤트가 발생하면 스토리보드를 실행-->

                    <EventTrigger RoutedEvent="Button.Click">

                           <!--호출명령-->

                           <BeginStoryboard>

                                 <!--

                                 스토리보드 : 공통된 목적을 가지는 애니메이션들을 관리하는 집합

                                 -->

                                 <Storyboard>

                                        <!--

                                        DoubleAnimation : 애니메이션(Timeline)

                                                                : 1개의 속성값에 대해서만 변화

                                        -->

                                        <DoubleAnimation

                                               From="13" To="100"

                                               Duration="0:0:2"

                                               Storyboard.TargetProperty="FontSize"

                                               />

                                 </Storyboard>

                           </BeginStoryboard>

                    </EventTrigger>

             </Button.Triggers>

       </Button>

</Window>

 

 Width Height 각각 다른 곳에서 타겟형태로 늘리기


<Window x:Class="WPFEx.Animation03"

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

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

        Title="Animation03" Height="300" Width="300">

       <StackPanel HorizontalAlignment="Center">

             <StackPanel Orientation="Horizontal" Margin="5">

                    <Button Content="너비">

                           <Button.Triggers>

                                 <EventTrigger RoutedEvent="Button.Click">

                                        <BeginStoryboard>

                                              <Storyboard>

                                                     <DoubleAnimation

                                                            From="50"

                                                            To="250"

                                                            Duration="0:0:1"

                                                            Storyboard.TargetName="btn"

                                                            Storyboard.TargetProperty="Width"

                                                            />

                                              </Storyboard>

                                        </BeginStoryboard>

                                 </EventTrigger>

                           </Button.Triggers>

                    </Button>

                    <Button Content="높이">

                           <Button.Triggers>

                                 <EventTrigger RoutedEvent="Button.Click">

                                        <BeginStoryboard>

                                              <Storyboard>

                                                     <DoubleAnimation

                                                            From="50"

                                                            To="250"

                                                            Duration="0:0:1"

                                                            Storyboard.TargetName="btn"

                                                            Storyboard.TargetProperty="Height"

                                                            />

                                              </Storyboard>

                                        </BeginStoryboard>

                                 </EventTrigger>

                           </Button.Triggers>

                    </Button>

             </StackPanel>

             <Button Name="btn" Content="대상" Width="50" Height="50">

                   

             </Button>

       </StackPanel>

</Window>





 
DoubleAnimation 각종 속성 형태 List, 반복, 무한반복, 리턴등..
 

 <Window x:Class="WPFEx.Animation04"

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

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

        Title="Animation04" Height="300" Width="300">

       <Button Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12">

             <Button.Triggers>

                    <EventTrigger RoutedEvent="Button.Click">

                           <BeginStoryboard>

                                 <Storyboard>

                                        <!--

                                              From : 초기값

                                              To : 최종값

                                              Duration : 소요시간

                                              Storyboard.TargetProperty : 대상속성

                                              Storyboard.TargetName : 대상객체(생략하면 본인)

                                        -->

                                       

                                        <!--<DoubleAnimation

                                              From="12" To="100"

                                              Duration="0:0:1"

                                              Storyboard.TargetProperty="FontSize"

                                              />-->

                                        <!--

                                        From은 생략 가능 : 현재값이 From으로 사용

                                                               : 다시 누르면 변화없음(From=100)

                                        -->

                                       

                                        <!--<DoubleAnimation

                                              To="100"

                                              Duration="0:0:1"

                                              Storyboard.TargetProperty="FontSize"

                                              />-->

                                        <!--By : 누적(상대값) FontSize += 10;-->

                                       

                                        <!--<DoubleAnimation

                                              By="10"

                                              Duration="0:0:1"

                                              Storyboard.TargetProperty="FontSize"

                                              />-->

                                       

                                        <!--

                                              FillBehavior : 애니메이션이 끝나고 난뒤의 행동

                                        -->

                                        <!--<DoubleAnimation

                                              From="12" To="100"

                                              Duration="0:0:1"

                                              Storyboard.TargetProperty="FontSize" FillBehavior="Stop"

                                              />-->

 

                                        <!--AutoReverse : 자동 역재생, 애니메이션을 실행 후 반대로 실행-->

                                        <!--<DoubleAnimation

                                              From="12" To="100"

                                              Duration="0:0:3"

                                              Storyboard.TargetProperty="FontSize" AutoReverse="True"

                                              />-->

                                       

                                        <!--

                                        RepeatBehavior : 반복 횟수(nx), Forever(무한 반복)

                                        AutoReverse = RepeatBehavior X 2

                                       

                                        -->

                                        <DoubleAnimation

                                               From="12" To="100"

                                               Duration="0:0:0.5"

                                               AutoReverse="True"

                                               Storyboard.TargetProperty="FontSize" RepeatBehavior="Forever"

                                               />

 

                                 </Storyboard>

                           </BeginStoryboard>

                    </EventTrigger>

             </Button.Triggers>

       </Button>

</Window>

 

 



 <Window x:Class="WPFEx.Animation05"

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

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

        Title="Animation05" Height="300" Width="500">

       <Canvas>

             <Ellipse Width="50" Height="50" Stroke="Gray" StrokeThickness="5" Fill="Yellow" Canvas.Left="0" Canvas.Top="0">

                    <Ellipse.Triggers>

                           <EventTrigger RoutedEvent="Ellipse.MouseDown">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <!--스토리보드안에는 모든 애니메이션들은 스토리보드가 시작하는 순간 동시에 모두 실행 된다.-->

                                              <!--<DoubleAnimation

                                                     Storyboard.TargetProperty="Width"

                                                     From="50" To="250"

                                                     Duration="0:0:1"

                                                     AutoReverse="True"

                                                     RepeatBehavior="5x"

                                                     />

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Height"

                                                     From="50" To="250"

                                                     Duration="0:0:0.5"

                                                     AutoReverse="True"

                                                     RepeatBehavior="Forever"

                                                     />-->

 

                                              <!--AccelerationRatio : 가속도(0~1)-->

                                              <!--<DoubleAnimation

                                                     Storyboard.TargetProperty="Width"

                                                     From="50" To="250"

                                                     Duration="0:0:1"

                                                     AutoReverse="True"

                                                     RepeatBehavior="Forever"

                                                     AccelerationRatio="0.5"

                                                     />-->

                                             

                                              <!--DecelerationRatio : 감속도(0~1)-->

                                              <!--<DoubleAnimation

                                                     Storyboard.TargetProperty="Width"

                                                     From="50" To="250"

                                                     Duration="0:0:1"

                                                     AutoReverse="True"

                                                     RepeatBehavior="Forever"

                                                     DecelerationRatio="1"

                                                     />

                                             

                                              <DoubleAnimation

                                                      Storyboard.TargetProperty="StrokeThickness"

                                                     From="5" To="15"

                                                     Duration="0:0:1"

                                                     AutoReverse="True"

                                                     RepeatBehavior="Forever"

                                                     DecelerationRatio="1"

                                                     />-->

                                             

                                              <!--복합속성 애니메이션-->

                                              <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="430" Duration="0:0:3.3"

                                                                          AutoReverse="True"

                                                                          RepeatBehavior="Forever"

                                                                          DecelerationRatio="1"

                                                                          />

                                             

                                              <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="210" Duration="0:0:1"

                                                                          AutoReverse="True"

                                                                          RepeatBehavior="Forever"

                                                                          AccelerationRatio="0.8"

                                                                          DecelerationRatio="0.2"

                                                                          />

 

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Ellipse.Triggers>

             </Ellipse>

       </Canvas>

</Window>

 

  Int32형 애니메이션 



 
<Window x:Class="WPFEx.Animation06"

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

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

        Title="Animation06" Height="300" Width="300">

       <!--<Grid>

             <Button Content="버튼" Width="50" Height="50">

                    <Button.Triggers>

                           <EventTrigger RoutedEvent="Button.Click">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <Int32Animation

                                        Storyboard.TargetProperty="Width"

                                                     From="50" To="250"

                                                     Duration="0:0:5"

                                                     AutoReverse="True"                                                                                       

                                                     />

                                

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                                               

                    </Button.Triggers>

             </Button>

       </Grid>-->

       <Grid ShowGridLines="True">

             <Grid.RowDefinitions>

                    <RowDefinition />

                    <RowDefinition />

                    <RowDefinition />

                    <RowDefinition />

             </Grid.RowDefinitions>

             <Grid.ColumnDefinitions>

                    <ColumnDefinition/>

                    <ColumnDefinition/>

                    <ColumnDefinition/>

                    <ColumnDefinition/>

                    <ColumnDefinition/>

             </Grid.ColumnDefinitions>

             <Grid.Children>

                    <Button Content="버튼" Grid.Row="0" Grid.Column="0" Background="Yellow">

                           <Button.Triggers>

                                 <EventTrigger RoutedEvent="Button.Click">

                                        <BeginStoryboard>

                                              <Storyboard>

                                                     <Int32Animation

                                                            Storyboard.TargetProperty="(Grid.Row)"

                                                            From="0" To="3" Duration="0:0:3"

                                                            RepeatBehavior="Forever"

                                                            />

                                                     <Int32Animation

                                                            Storyboard.TargetProperty="(Grid.Column)"

                                                            From="0" To="4" Duration="0:0:4"

                                                            RepeatBehavior="Forever"

                                                            />

                                              </Storyboard>

                                        </BeginStoryboard>

                                 </EventTrigger>

                           </Button.Triggers>

                    </Button>

             </Grid.Children>

       </Grid>

</Window>

 

      

Color 애니메이션 


<Window x:Class="WPFEx.AnimationRectangle"

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

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

        Title="AnimationRectangle" Height="300" Width="300">

    <Grid>

             <Rectangle Width="200" Height="200" Fill="Yellow">

                    <Rectangle.Triggers>

                           <EventTrigger RoutedEvent="Rectangle.MouseDown">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <ColorAnimation

                                                     From="Yellow" To="Red"

                                                     Duration="0:0:0.01"

                                                     AutoReverse="True"

                                                     RepeatBehavior="Forever"

                                                     Storyboard.TargetProperty="Fill.Color"

                                                     />

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Rectangle.Triggers>

             </Rectangle>

       </Grid>

</Window>

 

 

 

 <Window x:Class="WPFEx.Animation07"

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

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

        Title="Animation07" Height="300" Width="300">

       <UniformGrid>

             <Rectangle Fill="White" Stroke="Black" StrokeThickness="1">

                    <Rectangle.Triggers>

                           <EventTrigger RoutedEvent="Rectangle.MouseEnter">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <ColorAnimation

                                                     Storyboard.TargetProperty="Fill.Color"

                                                     From="White" To="Red"

                                                     Duration="0:0:1"

                                                     RepeatBehavior="Forever"

                                                     />

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Rectangle.Triggers>

             </Rectangle>

       </UniformGrid>

</Window>

 이구문 x100 개 만든것
 



디자인 코드와 비즈니스 코드 분류
 

      

 <!--

       버튼의 트리거를 다른곳에서 코딩 목적 : 가독성(코드를 보기 용이하게 하기 위해서)

       리소스 관리와 유사하게 관리할수 있다.

      

       1. 현재 이벤트가 누구의 소유인지?

       2. 애니메이션이 누구를 대상?(속성의 소유주?)

-->

<Window x:Class="WPFEx.Animation08"

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

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

        Title="Animation08" Height="300" Width="300">

       <Window.Triggers>

             <EventTrigger RoutedEvent="Button.Click" SourceName="btn">

                    <BeginStoryboard>

                           <Storyboard>

                                 <DoubleAnimation

                                        Storyboard.TargetProperty="FontSize"

                                        Storyboard.TargetName="btn"

                                        From="12" To="100" Duration="0:0:1"

                                        />

                           </Storyboard>

                    </BeginStoryboard>

             </EventTrigger>

       </Window.Triggers>

      

       <Button Name="btn" FontSize="12" Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center" />

            

</Window>

 

 

  Style, 클릭이벤트를 스타일로 지정하여 중복 작업을 방지



<Window x:Class="WPFEx.Animation09"

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

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

        Title="Animation09" Height="300" Width="300">

       <Window.Resources>

             <Style x:Key="btnStyle" TargetType="{x:Type Button}">

                    <Setter Property="Width" Value="50" />

                    <Setter Property="Height" Value="50" />

                    <Setter Property="Margin" Value="5" />

                    <!--<Style.Triggers>

                           <Trigger Property="IsMouseOver" Value="True">

                                 <Setter Property="Width" Value="100" />

                           </Trigger>

                    </Style.Triggers>-->

                    <Style.Triggers>

                           <EventTrigger RoutedEvent="Button.Click">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Width" From="50" To="250" Duration="0:0:1"

                                                     />

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Height" From="50" To="250" Duration="0:0:1"

                                                     />

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Style.Triggers>

                   

             </Style>

       </Window.Resources>

      

       <StackPanel>

             <Button Content="버튼1" Style="{StaticResource btnStyle}" />

             <Button Content="버튼2" Style="{StaticResource btnStyle}" />

             <Button Content="버튼3" Style="{StaticResource btnStyle}" />

            

       </StackPanel>

</Window>

 

 

  x100개 만든것 코드 단축(스타일 트리거)


<!--스타일은 트리거라는 것도 똑같이 적용할수 있어 동일한 이벤트에 애니메이션을 적용할수 있는것도 모든 객체에 적용할수 있다.-->

       <Window x:Class="WPFEx.Animation10"

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

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

        Title="Animation10" Height="300" Width="300">

       <Window.Resources>

             <Style x:Key="rectStyle" TargetType="{x:Type Rectangle}">

                    <Setter Property="Fill" Value="White" />

                    <Setter Property="Stroke" Value="Black" />

                    <Setter Property="StrokeThickness" Value="1" />

                    <Style.Triggers>

                           <EventTrigger RoutedEvent="Rectangle.MouseEnter">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <ColorAnimation

                           Storyboard.TargetProperty="Fill.Color"

                           From="White" To="Red"

                           Duration="0:0:3"

                                                     />

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Style.Triggers>

             </Style>

       </Window.Resources>

 

       <UniformGrid>

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

             <Rectangle Style="{StaticResource rectStyle}" />

       </UniformGrid>

 

</Window>

 

      


<Window x:Class="WPFEx.Animation11"

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

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

        Title="Animation11" Height="300" Width="300">

      

       <Window.Resources>

             <Style x:Key="circle" TargetType="{x:Type Ellipse}">

                    <Setter Property="StrokeThickness" Value="5" />

                    <Setter Property="Width" Value="0" />

                    <Setter Property="Height" Value="0" />

                   

                    <Style.Triggers>

                           <EventTrigger RoutedEvent="Window.Loaded">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Width"

                                                     From="0" To="600" Duration="0:0:5"

                                                     RepeatBehavior="Forever"

                                                     AutoReverse="True"

                                                     />

                                             

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Height"

                                                     From="0" To="600" Duration="0:0:5"

                                                     RepeatBehavior="Forever"

                                                     AutoReverse="True"

                                                     />

 

                                              <DoubleAnimation

                                                     Storyboard.TargetProperty="Opacity"

                                                     From="1" To="0" Duration="0:0:5"

                                                     RepeatBehavior="Forever"

                                                     AutoReverse="True"

                                                     />

                                             

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Style.Triggers>

             </Style>

       </Window.Resources>

      

    <Grid>

             <Ellipse Style="{StaticResource circle}" Stroke="Red" Margin="20,0,0,0" />

             <Ellipse Style="{StaticResource circle}" Stroke="Orange" Margin="0,10,0,0" />

             <Ellipse Style="{StaticResource circle}" Stroke="Yellow" Margin="0,0,20,0" />

             <Ellipse Style="{StaticResource circle}" Stroke="Green" Margin="0,0,0,30" />

             <Ellipse Style="{StaticResource circle}" Stroke="Blue" Margin="0,0,0,0" />

             <Ellipse Style="{StaticResource circle}" Stroke="Indigo" Margin="0,30,10,0" />

             <Ellipse Style="{StaticResource circle}" Stroke="Violet" Margin="30,0,0,10" />

       </Grid>

</Window>

 
 

 
 C#파일 + Xaml 파일 
 


Xaml 파일
 
 <Window x:Class="WPFEx.Animation12"

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

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

        Title="Animation12" Height="300" Width="800" Loaded="Window_Loaded">

 

       <Window.Resources>

             <Style TargetType="{x:Type Rectangle}">

                    <Setter Property="Width" Value="50" />

                    <Setter Property="Height" Value="50" />

                    <Setter Property="Fill" Value="White" />

                    <Setter Property="StrokeThickness" Value="10" />

                    <Style.Triggers>

                           <EventTrigger RoutedEvent="Rectangle.MouseDown">

                                 <BeginStoryboard>

                                        <Storyboard>

                                               <DoubleAnimation

                           Storyboard.TargetProperty="(Canvas.Left)"

                           From="0" To="750" Duration="0:0:3.2"

                           AutoReverse="True"

                           RepeatBehavior="Forever"

                                                     />

                                              <DoubleAnimation

                           Storyboard.TargetProperty="(Canvas.Top)"

                           From="0" To="218" Duration="0:0:1"

                           AutoReverse="True"

                           RepeatBehavior="Forever"

                                                     />

                                        </Storyboard>

                                 </BeginStoryboard>

                           </EventTrigger>

                    </Style.Triggers>

             </Style>

 

             <Style TargetType="{x:Type Ellipse}">

                    <Setter Property="Width" Value="50" />

                    <Setter Property="Height" Value="50" />

                    <Setter Property="Fill" Value="White" />

                    <Setter Property="StrokeThickness" Value="10" />

                    <Style.Triggers>

                           <EventTrigger RoutedEvent="Ellipse.MouseDown">

                                 <BeginStoryboard>

                                        <Storyboard>

                                              <