PR

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

2011年5月10日(火)
PROJECT KySS

Blend4でのRipple特殊効果の設定

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

図3:「検索」欄に「Ripp」と入力して、Rippleが表示された

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

図4:RippleをLayoutRoot上にドラッグ&ドロップした

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

図5:RippleEffectのプロパティを設定する

Storyboardの作成

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

図6:RippleEffectStoryboardという名前のストーリーボードを作成する(クリックで拡大)

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

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

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

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

図7:各プロパティが追加された(クリックで拡大)

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

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

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

図8:何も指定しなかったプロパティにも楕円のマークが追加されている

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

図9:0.3秒時点(3つある楕円のマークの真ん中)の「Frequency」と「Phase」の楕円のマークを削除する(クリックで拡大)

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

図10:EasingFunctionプロパティにCubicInOutを指定する

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

表1 RippleEffectStoryboard

プロパティ名 再生ヘッドの位置(秒) EasingFunction
0 0.3 0.6
Frequency 30 記録なし 0 CubicInOut
Magnitude 0 0.04 0 CubicInOut
Phase 0 記録なし 0 CubicInOut

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

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

Think IT会員限定特典
  • 「マウスクリックによるRippleEffect特殊効果」サンプルプログラム

四国の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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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