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

#wpdev_jp #win8dev_jp

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

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

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

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

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

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

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

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

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

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

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

 

生成されるコードはこんな感じ。拡大縮小で変化させているので、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>

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