PR

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

2012年7月25日(水)
薬師寺 国安

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

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

「●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)

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

<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> ■(1)
      <Storyboard x:Key="RippleEffectStoryboard"> ■(1)
        <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> ■(1)
    </Window.Resources> ■(1)
  
    <Grid x:Name="LayoutRoot">
      <Grid.Effect> ■(2)
        <ee:RippleEffect x:Name="myRippleEffect" Frequency="0" Magnitude="0" Phase="0"/>
      </Grid.Effect> ■(2)
      <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>
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

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

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