Kinectで手の動きに合わせて波紋を発生させるサンプル

Storyboardの作成

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

図5：RippleEffectStoryboardという名前のストーリーボードを作成する（クリックで拡大）

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

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

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

図6：各プロパティが追加された（クリックで拡大）

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

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

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

図7：何も指定しなかったプロパティにも楕円のマークが追加されている（クリックで拡大）

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

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

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

イージング関数を使用すると、例えば、物体が自然にバウンドしたり、スプリングからつり下げられているような動きを与えることができます。

図9：EasingFunctionプロパティにCubicInOutを指定する（クリックで拡大）

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

表1：RippleEffectStoryboard

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

再度、VS2010を起動し、KINECT_RippleEffectプロジェクトを開きます。
MainWidows.xaml内にストーリーボードのコードが記述されています。その中から下記のリスト2のコードを削除します。このコードを残したままにしておくと、ウィンドウが表示されるやいなや、すぐに、RippleEffectStoryboardが実行されてしまいます。

リスト2　 MainWindows.xaml内から削除するコード

    <Window.Triggers>
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource RippleEffectStoryboard}"/>
      </EventTrigger>
    </Window.Triggers>

このコードを削除したXAMLがリスト3になります。

リスト3　RippleEffectStoryboardの設定されたXAMLコード(MainWindow.xaml)

（１）プロパティ要素内にRippleEffectStoryboardというKeyのStoryboardが定義されている。
（２）プロパティ要素が追加され、その中に要素が追加され、各プロパティ値が指定されている。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
   Width="799" Height="676" xmlns:my="clr-namespace:Microsoft.Samples.Kinect.WpfViewers;assembly=Microsoft.Samples.Kinect.WpfViewers">
    <Window.Resources>　■（１）
      <Storyboard x:Key="RippleEffectStoryboard">　■（１）
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Frequency)" Storyboard.TargetName="LayoutRoot">
          <EasingDoubleKeyFrame KeyTime="0" Value="30">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
          <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Magnitude)" Storyboard.TargetName="LayoutRoot">
          <EasingDoubleKeyFrame KeyTime="0" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
          <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.04">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
          <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(ee:RippleEffect.Phase)" Storyboard.TargetName="LayoutRoot">
          <EasingDoubleKeyFrame KeyTime="0" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
          <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
              <CircleEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
          </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>　■（１）
    </Window.Resources>　■（１）
  
    <Grid x:Name="LayoutRoot">
      <Grid.Effect>　■（２）
        <ee:RippleEffect x:Name="myRippleEffect" Frequency="0" Magnitude="0" Phase="0"/>
      </Grid.Effect>　■（２）
      <Image Margin="49,50,101,97" Width="640" Height="480" Name="SourceImage"/>
    <my:KinectSensorChooser Height="201" HorizontalAlignment="Left" Margin="360,295,0,0" Name="KinectSensorChooser1" VerticalAlignment="Top" Width="306" />
  </Grid>
</Window>