XAMLアニメーションで心地よいモーションを作る(EasingFunction編)

前回、Blendを使ってストーリーボードでKeyFrameを１つ１つ作成していきましたが、XAMLにはEasingFunctionといって、ある値からある値に変化を自動的にバウンドしながらアニメーションさせる機能があります。

それがEasingFunctionです。

ポヨン！プルン！という動き

まずはおさらいとして前回のストーリーボードを確認してみましょう。

        <Storyboard x:Name="SymbolStoryBoard">
             <DoubleAnimationUsingKeyFrames
                 EnableDependentAnimation="True"
                 Storyboard.TargetProperty="(FrameworkElement.Width)"
                 Storyboard.TargetName="ellipse">
                 <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="100"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="40"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="120"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="100"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="110"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
             DoubleAnimationUsingKeyFrames>
         Storyboard> それでは同じような動きになる設定をEasingFunctionで定義してみましょう。EasingFunctioは今回のように最初と最後に同じ値を指定しても全然アニメーションしてくれないので、100→40の部分まではKeyFrameで指定して40→100のところでバウンドしながら収束する動きにつかいます。        <Storyboard x:Name="Symbol2StoryBoard">
             <DoubleAnimationUsingKeyFrames
                 EnableDependentAnimation="True"
                 Storyboard.TargetProperty="(FrameworkElement.Width)"
                Storyboard.TargetName="ellipse">
                 <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="100"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="40"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100">
                     <EasingDoubleKeyFrame.EasingFunction>
                         <ElasticEase Oscillations="1" EasingMode="EaseOut" Springiness="1" />
                     EasingDoubleKeyFrame.EasingFunction>
                 EasingDoubleKeyFrame>
             DoubleAnimationUsingKeyFrames>
         Storyboard>

プルンとオブジェクトがバネのように震える動き

同様に前回のストーリーボードは

        <Storyboard x:Name="BalloonStoryBoard">
             <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                 Storyboard.TargetName="path">
                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-6"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="7"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-3"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="3"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-1"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
             DoubleAnimationUsingKeyFrames>
         Storyboard> それでは同じような動きになる設定をEasingFunctionで定義してみましょう。こちらも同様に最初のぐにゅっとなるところまではKeyFrameで指定してそこから元に戻るところにEasingFunctionを適用します。        <Storyboard x:Name="Balloon2StoryBoard">
             <DoubleAnimationUsingKeyFrames
                 EnableDependentAnimation="True"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                Storyboard.TargetName="path">
                 <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-6"/>
                 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0">
                     <EasingDoubleKeyFrame.EasingFunction>
                         <ElasticEase Oscillations="3" EasingMode="EaseOut" Springiness="1" />
                     EasingDoubleKeyFrame.EasingFunction>
                 EasingDoubleKeyFrame>
             DoubleAnimationUsingKeyFrames>
         Storyboard>