ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その8:アニメーションを作成してみよう

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月13日 from Atelier:Mitsuba

はじめに

ビヘイビアを紹介したところで、アニメーションをやってみましょう。

まずは、Rectangleを置いてみます。
f:id:c-mitsuba:20110425163104p:image

今回はこのRectangleにアニメをつけてみます。

コントロールに名前を付ける

アニメを付けたいコントロールには名前が付いている必要があります。

なので、オブジェクトパネルの[Rectangle]をダブルクリックして、Rectangle1としました。
f:id:c-mitsuba:20110425163408p:image

ちなみに、自分でつけなくても、アニメを付ければ勝手に付けてくれます。

Storyboardを作成する

SilverlightやWPFではアニメーションのことをStoryboardといいます。

このボタンをクリックして新規にStoryboardを作成します。
f:id:c-mitsuba:20110425163546p:image

Storyboardのなまえを決めます。
f:id:c-mitsuba:20110425163545p:image

するとオブジェクトパネルがタイムラインに変化します。
f:id:c-mitsuba:20110425163651p:image

これでは見にくいので、上のメニューのWindows>Workspace>Animationを選択するか、F6キーを押してください。

操作のしやすい画面になりました。
f:id:c-mitsuba:20110425163807p:image

キーフレームを記録する

Rectangle1を選択して、Storyboardの0秒にキーを打ちましょう。

クリックすると
f:id:c-mitsuba:20110425164045p:image

こんなふうにキーが打てます。
f:id:c-mitsuba:20110425164044p:image

2秒のところにもキーを打ってみましょう。
f:id:c-mitsuba:20110425164043p:image

すると、白い帯ができます。これがアニメーションされている間ということですね。
f:id:c-mitsuba:20110425164042p:image

2秒のキーフレームのところで、Rectangle1の青色を変えてみましょう。
f:id:c-mitsuba:20110425164353p:image

すると、白から青に変化しているのがわかりますね。再生ボタンでアニメが再生されます。
f:id:c-mitsuba:20110425164352p:image

また、一度とじたStoryboardはここをクリックして、もう一度編集することができます。
f:id:c-mitsuba:20110425165001p:image

さいごに

Storyboardで出来るアニメーションはほとんどのプロパティを操作することができます。

たとえば、回転させてみたり、大きさを変えてみたり、z軸に回したり、エフェクトをつけたり、透明度をかけたりなどなど、いろいろ遊んでみましょう。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ