75.SilverLight3 - SplineKeyFrame

SplineKeyFrame
- 비 선형 애니메이션을 실행, 애니메이션의 속도 조절

---

MainPage.xaml

[그림 75-1] <Canvas x:Name="LayoutRoot" Background="White">     <Canvas.Resources>         <Storyboard x:Name="mySb">             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myRect"                 Storyboard.TargetProperty="(Canvas.Top)">                 <DoubleAnimationUsingKeyFrames.KeyFrames>                     <SplineDoubleKeyFrame KeyTime="0:0:5" Value="110"                         KeySpline="0.0,1.0,1.0,1.0"></SplineDoubleKeyFrame>                                         <SplineDoubleKeyFrame KeyTime="0:0:5" Value="220"                         KeySpline="1.0,0.0,1.0,1.0"></SplineDoubleKeyFrame>                     </DoubleAnimationUsingKeyFrames.KeyFrames>                 </DoubleAnimationUsingKeyFrames>         </Storyboard>     </Canvas.Resources>     <Rectangle x:Name="myRect" Width="50" Height="50" Canvas.Left="10"         Canvas.Top="10" Fill="DodgerBlue"></Rectangle> </Canvas>

---

MainPage.xaml.cs

public partial class MainPage : UserControl {     public MainPage()     {         InitializeComponent();         this.Loaded += new RoutedEventHandler(MainPage_Loaded);     }       void MainPage_Loaded(object sender, RoutedEventArgs e)     {         this.mySb.Begin();     } }

---

결과화면

[그림 75-2]

SplineKeyFrame.zip