WPFでアニメーション

WPFでアニメーションをやってみたー
基本、初音ミク(はちゅねミク)がネギを振り回すだけだけど...

WPFでアニメーションを行うには、VisualTarget.Renderingなどで自分で描画する以外にStoryboardを使う方法があるので、今回はStoryboardを使ってみるー

いろいろ実験してみた結果、DoubleAnimationかDoubleAnimationUsingKeyFramesが使いやすい気がする。

では最初に、DoubleAnimation。
カメラを回してみる。

<Viewport3D.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="cameraRotation" Storyboard.TargetProperty="Angle" Duration="0:0:10" From="0" To="360" RepeatBehavior="Forever" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Viewport3D.Triggers>

回転にかかる時間を指定するには、Duration属性を追加するだけ。

次に、DoubleAnimationUsingKeyFrames。初音ミクにネギを振り回させてみる。
DoubleAnimationUsingKeyFramesは名前の通り、時間軸上にKeyFrameを追加してアニメーションを作成していく感じ。
下のXAMLは、DoubleAnimationUsingKeyFramesにLinearDoubleKeyFrameを追加してるけど、他にもSplineDoubleKeyFrameとかもあるよ。

<Viewport3D.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard>
      <Storyboard Duration="Forever" FillBehavior="HoldEnd" BeginTime="0:0:0">
        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0" Storyboard.TargetName="modelMikuRightArm" Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)">
          <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
          <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="100" />
          <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0" Storyboard.TargetName="modelMikuRightArm" Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[3].(TranslateTransform3D.OffsetY)">
          <LinearDoubleKeyFrame KeyTime="0:0:0" Value="26.616" />
          <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="22" />
          <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="26.61" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Viewport3D.Triggers>