PathListBoxを使った画像の移動

2010年6月18日(金)
PROJECT KySS

アニメーションの作成

次に、アニメーションを設定していきます。「Objects and Timeline」から「+」アイコンをクリックして、新規ストーリ・ボードを作成します。Name(Key)はデフォルトの「Stroryboard1」としておきます(図5)。

図5: 新規Storyboardを作成する

アート・ボードが赤い枠線で囲まれ、「Storyboard1 timeline recording is on」となり、アニメーションを記録可能な状態になります(図6)。

図6: 記録モード インジケータがオンの状態となり、新しいタイムラインが表示される(クリックで拡大)

「Objects and Timeline」からEllipse1を選択し、黄色い再生ヘッドを「8」の位置までドラッグします(図7)。Ellipse1のPropertiesから「Transform」タブを展開し、「RenderTransform」の「Rotate」を選択し、「Angle」に360と指定します(図8)。これで、8秒をかけて、楕円が360度回転するようになります。

図7: 黄色の再生ヘッドを「8」までドラッグする

図8: 「RenderTransform」の「Rotate」を選択し、「Angle」に360と指定する

ここで一度、動作を確認しておきましょう。「Objects and Timeline」の「Go to first frame」アイコンをクリックして0秒時点に巻き戻し(図9上図)、「Play」アイコンをクリックして(図9中図)、ストーリ・ボードの動きを確認します(図9下図)。

図9: 0秒時点に巻き戻して再生し、作成途中のアニメーションの動作を確認する(クリックで拡大)

次に、「Objects and Timeline」の下に表示されているStoryboard1を選択します。右側に、Storyboard1のPropertiesが表示されます。「RepeatBehavior」に「Forever」を選択して、アニメーションを繰り返すように指定しておきます(図10)。以上の作業を終えたら、ストーリ・ボードを閉じます(図11)。

図10: 「RepeatBehavior」に「Forever」を指定する

図11: 作成したストーリ・ボードを閉じる

[File/Save]で、これまでの作業を保存してBlendを閉じます。VS 2010に戻るとメッセージが表示されますので「Yes」を選択します。書き出されるXAMLコードは省略します。

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています