マウスクリックによるRippleEffect特殊効果

Blend4でのRipple特殊効果の設定

Blend4の[アセット(T)]パネルをクリックし、「コントロール」からRippleを検索して表示させます。「検索」欄に「Ripp」と入力すると、Rippleが表示されます（図3）。

表示されたRippleを「オブジェクトとタイムライン(B)」内のLayoutRoot要素上にドラッグ&ドロップします（図4）。

追加したRippleEffectを選択して表示されるプロパティの、「名前」にmyRippleEffectと指定し、Frequencyに0、 Magnitudeに0、 Phaseに0と指定しておきます（図5）。Frequencyにはシェーダー内の周波数の値を指定します。Magnitudeにはシェーダー内の振幅の値を指定します。Phaseにはシェーダー内のフェーズ値を指定します。

Storyboardの作成

「オブジェクトとタイムライン(B)」の下にあるストーリーボードの「新規作成」アイコン(＋)をクリックし、RippleEffectStoryboardというストーリーボードを作成します（図6）。

アートボード上の画面全体が赤の枠線で囲まれ、「●RippleEffectStoryboardタイムライン記録オン」に変わります。この状態でタイムラインの記録が可能になります。

これから以下の作業は、再生ヘッドの位置に応じて、各プロパティの値を設定する作業となります。これらのプロパティ値は、後ほど紹介する、表1にまとめていますので、そちらを参考に値を設定してもかまいません。

「タイムラインとオブジェクト(B)」内のRippleEffectを選択し、タイムラインの黄色い再生ヘッドを0秒に合わせます。RippleEffectのプロパティ「Frequency」に30と指定します。「Magnitude」には0、Phaseには0と指定します。既に0が初期値として入力されている場合も、上書きで0と入力してください。Centerの値はデフォルトの0.5のままです。

「オブジェクトとタイムライン(B)」内のRippleEffectのEffect内に、いま設定したプロパティが追加されます（図7）。

次に再生ヘッドを0.3秒の位置に移動し、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した状態で、「Magnitude」に0.04と指定します。「Frequency」と「Phase」には何もしないでおきます。

次に再生ヘッドを0.6秒の位置に移動し、「Frequency」に0、「Magnitude」に0、「Phase」に0と指定します。既に、0が入力されていても上書きで再入力してください。必ず、「オブジェクトとタイムライン(B)」内の、RippleEffectを選択した状態で表示される[共通プロパティ]で値を入力してください。

何も入力しなかったプロパティにも楕円のマークが追加されます（図8）。

上記でも問題はないのですが、アニメーションがぎこちなくなりますので、0.3秒時点（3つある楕円のマークの真ん中）の「Frequency」と「Phase」の楕円のマークを削除します。楕円のマーク上でマウスの右クリックで表示されるメニューから「削除」を選択します（図9）。

「Frequency」、「Magnitude」、「Phase」を選択して表示されるプロパティのEasingFunctionに、CubicInOutを選択します（図10）。「Frequency」、「Magnitude」、「Phase」すべてに対して設定してください。

ここまでの手順をまとめると、表1のようになります。

表1 RippleEffectStoryboard

「●RippleEffectStoryboardタイムライン記録オン」の●をクリックしてオフとし、Blend4を終了してVS2010に戻ります。

ソリューションエクスプローラー内のMainPage.xamlを展開して表示されるMainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します。