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

#wpdev_jp #win8dev_jp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

生成されるコードはこんな感じ。回転かくの変化は、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>