前回、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>
動作確認
XAML StoryBoard EasingFunction Sample
EasingFunctionはMSDNのWebサイト上でパラメタをいろいろ変化させて確認することができます。
http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html
ぜひこちらも活用してかっこいい動作をいろいろ定義してみましょう。