EasingFunction

애니메이션에 다양한 효과를 주기 위해 사용하는 프로퍼티. 아래 11가지 종류가 있다.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

ShinEase

EasingMode

EaseOut : 기본 그래프, default value

Easeln : EaseOut을 반대로 바꾼 그래프

EaselnOut : 위 두가지를 혼합한 그래프

EasingMode = EaseOut

<UserControl.Resources>
 <Storyboard x:Name="MyStoryboard">
  <DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" To="270" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
   <DoubleAnimation.EasingFunction>
    <BounceEase Bounces="6" />
   </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
 </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot">
 <Ellipse x:Name="ellipse" Height="100" VerticalAlignment="Top" Width="100" Canvas.Left="150" Canvas.Top="30" RenderTransformOrigin="0.5,0.5">
  <Ellipse.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform />
    <TranslateTransform/>
   </TransformGroup>
  </Ellipse.RenderTransform>
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF0100FF" Offset="0"/>
    <GradientStop Color="#FF908FFF" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>

View : http://myifu.com/_study/silverlight/template_animation_11_easingfunction01/ 

EasingMode = EaseIn

<UserControl.Resources>
 <Storyboard x:Name="MyStoryboard">
  <DoubleAnimation BeginTime="00:00:00" Duration="00:00:05" To="270" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
   <DoubleAnimation.EasingFunction>
    <BounceEase Bounces="6" EasingMode="EaseIn" />
   </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
 </Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot">
 <Ellipse x:Name="ellipse" Height="100" VerticalAlignment="Top" Width="100" Canvas.Left="150" Canvas.Top="30" RenderTransformOrigin="0.5,0.5">
  <Ellipse.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform />
    <TranslateTransform/>
   </TransformGroup>
  </Ellipse.RenderTransform>
  <Ellipse.Fill>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF0100FF" Offset="0"/>
    <GradientStop Color="#FF908FFF" Offset="1"/>
   </LinearGradientBrush>
  </Ellipse.Fill>
 </Ellipse>
</Canvas>