「CSS3アニメーションで心地良いモーションを作る」というブログエントリを読んでいるとCSSでアニメーションをしようという話でした。
これ何を調べていてヒットしたんだろう。。。
で、ここで取り上げられていたアニメーションは基礎中の基礎なのですがタイトル通り心地よい動きをしてくれるのです。
そこで、XAMLのストーリーボードを使ってWindowsストアアプリでも同じことをやってみたいと思います。
題して「XAMLアニメーションで心地よいモーションを作る」
まずはBlendを立ち上げて新規プロジェクトを作成したら、ellipseで円、pathで吹き出しをつくります。
ポヨン！プルン！という動き
まずは円に対して、元ネタブログでいうところの「ポヨン！プルン！という動き」を定義します。
地道ーに、0.1秒づつ HeightとWidthの値を変化させます。
出来上がったストーリボードがこれです。
<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> <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" 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>
プルンとオブジェクトがバネのように震える動き
つぎに吹き出しがプルンと震える動きを定義しましょう。これも地味ーにローテーションを小刻みに動かします。
<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>
参考になりましたでしょうか？
こういったパーツ集が充実してくるとWindowsストアアプリ全体の表現力も向上しそうですね。