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


#wpdev_jp #win8dev_jp

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

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

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

まずはふきだしを作ります。

小さい丸を2つ描いてかさねます。そして2つを選択。その際には削る方(左上)残る方(右下)の順でShiftキーを押しながら選択すること。そして、オブジェクトメニューから結合>減算で

image image

続けて大きな丸を書いて重ねます。同じように2つの図形を選択して、オブジェクト>結合>合算でまとめます。

image image

選択すると、中心に小さい白丸がありますね。これが回転移動するときの中心点なので、吹き出しの髭の先に移動しておきましょう。これ重要。

image image

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

image_thumb[4]

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

image_thumb[2]

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

image

次にタイムラインを0秒に移動して、変換プロパティの回転の角度を6°に変更します。髭の先を中心にして回転していることを確認。

image

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

image_thumb[11]

プロパティのイージングファンクションで、Elastic Out を選択します。パラメーターはお好きに。

image

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

image_thumb[15]

 

生成されるコードはこんな感じ。回転かくの変化は、TargetNameで対象を変更すれば他のオブジェクトにも適応できますね。

<Storyboard x:Name="Storyboard4"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= "(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse_Copy"> <EasingDoubleKeyFrame KeyTime="0" Value="6"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <ElasticEase/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard>
Comments (0)

Skip to main content