XAML で簡単心地よいアニメーション その1


#wpdev_jp #win8dev_jp

初音さんのエントリーを見て、初めのCSSのネタを見たときに「イージング使えば簡単そうだ」と思ってたので、ちょっとやってみました。

その2の記事はこちら → XAML で簡単心地よいアニメーション その2

さぁ Blend を起動してみましょう。

まずは丸を作ります。そう、エクセレント!

image

さぁアニメーションを作りましょう。オブジェクトとタイムライン下の右端の+を押してストーリーボードを作成します。

image

名前は適当に。でもちゃんと作る時はちゃんと名前をつけましょう。

image

初めにタイムライン(黄色い線)を0.5秒まで動かして、そこでキーフレームを打ち込みます。最終的に元のサイズに戻るアニメーションの場合、このように初めに最終地点のキーフレームを作っておいたほうが簡単にできます。

image

次にタイムラインを0秒に移動して、変換プロパティの拡大縮小を X=0.4, Y=0.4 にします。こんなに小さくなっちゃって。

image

次にまたオブジェクトタイムラインで、初めに作ったキーフレームをクリック。

image

プロパティのイージングファンクションで、BackOut を選択して、Amplitude を1.2にします。

image

つくりおわったら、オブジェクトとタイムラインの再生ボタンで確認、アニメーションの作成終了はその隣の×ボタンです。

image

 

生成されるコードはこんな感じ。拡大縮小で変化させているので、TargetNameで対象を変更すれば他のオブジェクトにも適応できますね。

<Storyboard x:Name="Storyboard3"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= "(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ellipse"> <EasingDoubleKeyFrame KeyTime="0" Value="0.4"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <BackEase Amplitude="1.2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= "(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ellipse"> <EasingDoubleKeyFrame KeyTime="0" Value="0.4"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <BackEase Amplitude="1.2"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard>

その2はこちら → http://blogs.msdn.com/b/shintak/archive/2013/03/29/10406216.aspx

Comments (0)

Skip to main content