69.SilverLight3 - DoubleAnimation

DoubleAnimation
- 숫자를 변경하는 애니메이션을 정의

---

Storyboard 클래스 : Timeline 클래스를 상속되며 애니메이션 실행 할 때 사용되는 중요한 역활
Storyboard 속성
- TargetName : 애니메이션이 실행될 대상의 객체 이름을 가져옴 ( x:Name )
- TargetProperty : 애니메이션의 실행 대상이 될 객체의 요소의 변화시킬 속성 지정
- Duration : 애니메이션 실행될 총 시간 (10초 : 0:0:10 ) [ 일:시:분:초:밀리초 - 1초 : 0:0:0:1.0 ]
- From : 애니메이션 시작 시간 지정
- To : 애니메이션 종료때 속성의 최종값 지정

MainPage.xaml [ DoubleAnimation ]

[그림 69-1] <Grid x:Name="LayoutRoot" Background="White">     <Rectangle x:Name="myRect" Fill="DodgerBlue" Stroke="Silver" StrokeThickness="3"                Width="100" Height="100">         <Rectangle.Triggers>             <EventTrigger RoutedEvent="Rectangle.Loaded">                 <BeginStoryboard>                     <Storyboard>                         <DoubleAnimation                             Storyboard.TargetName="myRect"                             Storyboard.TargetProperty="Opacity"                             Duration="0:0:10"                             From="0.1"                             To="1.0">                         </DoubleAnimation>                     </Storyboard>                 </BeginStoryboard>             </EventTrigger>         </Rectangle.Triggers>     </Rectangle> </Grid> 결과화면 : 한 번만 실행 [그림 69-2] MainPage.xaml MainPage.xaml.cs

---

이미지 패이드인 효과 주기
AutoReverse : 애니메이션 실행 완료후 다시 역 방향으로 재실행하는지 설정
RepeatBehavior : 애니메이션 반복 설정 ( 1:한번, Forver:반복 )

MainPage.xaml [ 이미지 패이드인 효과 주기 ]

[그림 69-3] <Grid x:Name="LayoutRoot" Background="White">     <Rectangle x:Name="myRect" Fill="DodgerBlue" Stroke="Silver" StrokeThickness="3"                Width="100" Height="100">         <Rectangle.Triggers>             <EventTrigger RoutedEvent="Rectangle.Loaded">                 <BeginStoryboard>                     <Storyboard>                         <DoubleAnimation                             Storyboard.TargetName="myRect"                             Storyboard.TargetProperty="Opacity"                             Duration="0:0:10"                             From="0.1"                             To="1.0"                                                             AutoReverse="True"                             RepeatBehavior="Forever">                         </DoubleAnimation>                     </Storyboard>                 </BeginStoryboard>             </EventTrigger>         </Rectangle.Triggers>     </Rectangle> </Grid> 결과화면 : 반복 실행 [그림 69-4] MainPage.xaml MainPage.xaml.cs

---

마우스 포인트 위치가 해당 객체 안에 들어오면 실행 / 밖으로 나가면 실행 멈춤

MainPage.xaml [ 마우스 이벤트 ]

[그림 69-5] <Grid x:Name="LayoutRoot" Background="White">     <!--[1] 스토리보드 정의-->     <Grid.Resources>         <Storyboard x:Name="mySb1">             <DoubleAnimation                 Storyboard.TargetName="myRect"                 Storyboard.TargetProperty="Opacity"                 Duration="0.0:0:5.0"                 From="0.0"                 To="1.0"                 AutoReverse="True"                 RepeatBehavior="Forever"></DoubleAnimation>         </Storyboard>     </Grid.Resources>     <!--[2] 애니메이션 사용-->     <Rectangle x:Name="myRect" Fill="DodgerBlue" Stroke="Silver" StrokeThickness="1"                RadiusX="10" RadiusY="10" Width="100" Height="100"></Rectangle> </Grid>

---

MainPage.xaml.cs [ 마우스 이벤트 ]

namespace DoubleAnimation {     public partial class MainPage : UserControl     {         public MainPage()         {             InitializeComponent();             this.MouseEnter += new MouseEventHandler(MainPage_MouseEnter);             this.MouseLeave += new MouseEventHandler(MainPage_MouseLeave);         }           void MainPage_MouseLeave(object sender, MouseEventArgs e)         {             this.mySb1.Stop(); //멈춤         }           void MainPage_MouseEnter(object sender, MouseEventArgs e)         {             this.mySb1.Begin(); //실행         }     } }

---

결과화면

[그림 69-6]

DoubleAnimation.zip