はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

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

前回、Blendを使ってストーリーボードでKeyFrameを1つ1つ作成していきましたが、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>

動作確認
XAML StoryBoard EasingFunction Sample

 

EasingFunctionはMSDNのWebサイト上でパラメタをいろいろ変化させて確認することができます。

http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

ぜひこちらも活用してかっこいい動作をいろいろ定義してみましょう。