WPF と Expression Blend を使ってプログラムを起動した直後からゆらゆらと動いている TextBlock を作ります。画面のラベルなどとして使うことを想定しています。
開発環境：
・ Expression Blend 4
目次：
１．新規プロジェクト作成
２．TextBlock を貼り付ける
３．トリガー（E) 設定
４．ストーリーボード
４．１．TextBlock を４秒でぐるっと一回転移動
４．２．無限に動作を続ける
４．３．TextBlock の移動を「ひし形」から「円形」へ変える
５．おしまい
Expression Blend で新規プロジェクトを作成します。ここでは「WPF アプリケーション」として作成します。
TextBlock をアプリケーションに貼り付け、適当な文字列へ変更します。
ここでは"Wavering
TextBlock"という文字列に変えました。合わせてフォントサイズやフォントなどを適当に変更します。
トリガー(E)のタブを選択し、「＋イベント」を押下します。
「「Window」．「Loaded」の発生時」 の右側にある「＋」を押下します。
すると下図のようなストーリーボード追加の確認メッセージが出るので、「OK」を押します。
すると下図のようなストーリーボード作成の画面になります。
続けて今回のメインテーマであるストーリーボードの設定を行います。
まずストーリーボードの編集を行いやすくするために「F6」を押します。すると次のような画面になります。
まず、0秒の場所に「キーフレーム」を作成します。
同様に反復し、1,2,3,4 秒の場所でTextBlockをそれぞれ移動し、それぞれのキーフレームを記録します。0秒と4秒は同じ場所になるようにします。
これでプログラムを起動すると TextBlock
がひし形に移動します。「F5」を押して確認してください。
おや、一回転移動すると動作を停止してしまいます。次はこれを修正しましょう。
ここまでの設定では、TextBlockはぐるっと一回転移動すると動作を停止してしまいます。
ここではこの動作を無限に反復するように修せします。
まず、ストーリーボードのストーリー名称（ここでは OnLoaded1）を選択してください。すると画面右側の「プロパティ」表示外貨のようになります。
RepeatBehaviorの設定を「１×」を「Forever」へ変更します。
では確認します。「F5」を押下して動作を確認してください。これで無限に反復するようになったはずです。
４．３．TextBlock の移動を「ひし形」から「円形」へ変える
TextBlock が無事に無限動作するようになりましたが、ひし形の移動は角があって美しくありません。円形に滑らかに移動するようにしたいと思います。
まず最初に「textBlock」の左側にある▶を押して、textBlockを展開してください。下図のように ｘ、ｙ が展開されます。
この後、この X,Y
に対してそれぞれ設定を加えていきます。
まず１秒の部分の設定を行います。１秒のところの X
の◯をマウスクリックしてください。画面右側のプロパティが下図のようになります。
「EasingFunction」をクリックすると様々な関数が表示されますが、ここでは下図の通り「Sine In」を選択します。
同様に反復して下の表に従って設定を行います。
| Time (s) | Element name | Easing Function name |
| 0 | x y |
なし なし |
| 1 | x y |
Sine In Sine Out |
| 2 | x y |
Sine Out Sine In |
| 3 | x y |
Sine In Sine Out |
| 4 | x y |
Sine Out Sine In |
以上で完成です。「F5」を押して動作確認しましょう。
Easing Function には他にも様々なものがあります。また今回は TextBlock のロケーションのみを変えましたが、拡大/縮小、回転、など様々なプロパティを動的に変更できます。いろいろと試してみてください。
サンプルプログラム ダウンロード ： 開発環境 「Expression Blend 4」
記載： 2012年12月2日 木下英俊