65장 에니메이션 TimeLine (EasingFunction)

EasingFunction - 프로퍼티를 이용하면 애니메이션에 다양한 효과를 부여할 수 있습니다 - 'EasingFunction'은 애니메이션의 수행에 수학적인 연산을 추가해 애니메이션이 역동적으로 표현될    수 있도록 도와줍니다.

EasingFunction.Xamls <UserControl x:Class="BounceEaseTest.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">     <UserControl.Resources>         <!-- 떨어지는 애니메이션 -->         <Storyboard x:Name="MyStoryboard">             <!-- 5초 동안의 를 애니메이션 270으로 변경-->             <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 저기용 -->                     <BounceEase Bounces="6" EasingMode="EaseIn"/>                                         <!-- EasingMode에 'EaseIn' 사용 -->                     <!--<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> </UserControl>