方法 : キー フレームを使用してカメラの位置および方向をアニメーション化する

更新 : 2007 年 11 月

次の例では、3D シーンでの PerspectiveCamera の位置をアニメーション化するために Point3DAnimationUsingKeyFrames を使用しています。また、3D シーンでカメラが向いている方向をアニメーション化するために Vector3DAnimationUsingKeyFrames を使用しています。どちらのアニメーションでも、一連のアニメーション効果を作成する複数のキー フレームを使用しています。

1. LinearPoint3DKeyFrame および LinearVector3DKeyFrame は、値間の滑らかな線形補間を作成するために使用します。

2. DiscretePoint3DKeyFrame および DiscreteVector3DKeyFrame は、値間での突然の "ジャンプ" (補間なし) を作成するために使用します。

3. SplinePoint3DKeyFrame および SplineVector3DKeyFrame は、KeySpline プロパティに従って、値間の可変遷移を作成するために使用します。次の例では、アニメーションはゆっくりと始まりますが、時間セグメントの終点に向かって急激に速くなります。

使用例

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <DockPanel>
    <Viewbox>
      <Canvas Width="321" Height="201">

        <Viewport3D Name="MyAnimatedObject"
          ClipToBounds="True" Width="150" Height="150"
          Canvas.Left="0" Canvas.Top="10">

          <!-- Defines the camera used to view the 3D object. The position and direction of this 
               camera is animated in the Storyboard below. -->
          <Viewport3D.Camera>
            <PerspectiveCamera x:Name="myPerspectiveCamera" Position="0,0,2" LookDirection="0,0,-1" 
             FieldOfView="45" />
          </Viewport3D.Camera>
          <Viewport3D.Children>
            <ModelVisual3D>
              <ModelVisual3D.Children>

                <!-- This resource defines the 3D cube that is used in this example.-->
                <StaticResource ResourceKey="PictureCubeModelVisual3DResource" />
              </ModelVisual3D.Children>

            </ModelVisual3D>
          </Viewport3D.Children>
          <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
              <BeginStoryboard>
                <Storyboard>

                  <!-- This animation moves the camera around the object. The object is not
                       changing position or rotating but moving the camera makes it appear that
                       it is.-->
                  <Point3DAnimationUsingKeyFrames
                   Storyboard.TargetName="myPerspectiveCamera" 
                   Storyboard.TargetProperty="Position" >
                    <Point3DAnimationUsingKeyFrames.KeyFrames>

                      <!-- Using a LinearPoint3DKeyFrame, the camera moves steadily from its
                           starting position to a new position that is to the upper right and a 
                           little farther away. This happens over the first second of the animation. -->
                      <LinearPoint3DKeyFrame Value="1,2,3" KeyTime="0:0:1" />

                      <!-- Using a DiscretePoint3DKeyFrame, the camera suddenly moves farther away
                           from the object. This happens immdeiately after the first 1 and a half second
                           of the animation. -->
                      <DiscretePoint3DKeyFrame Value="1,2,5" KeyTime="0:0:1.5" />

                      <!-- Using a SplinePoint3DKeyFrame, the camera moves back to its starting point. The
                           animation starts out slowly at first and then speeds up. This KeyFrame ends 
                           after the fourth second. -->
                      <SplinePoint3DKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0,0,2" KeyTime="0:0:4" />
                    </Point3DAnimationUsingKeyFrames.KeyFrames>
                  </Point3DAnimationUsingKeyFrames>


                  <!-- As the position of the camera changes using the Point3DAnimation
                       above, the direction the camera is pointing swivels to keep the object
                       within the view of the camera. -->
                  <Vector3DAnimationUsingKeyFrames
                   Storyboard.TargetName="myPerspectiveCamera" 
                   Storyboard.TargetProperty="LookDirection" >
                    <Vector3DAnimationUsingKeyFrames.KeyFrames>

                      <!-- Using a LinearVector3DKeyFrame, the camera swivels steadily from its
                           starting position down and to the left. This happens over the 
                           first second of the animation. -->
                      <LinearVector3DKeyFrame Value="-1,-2,-3" KeyTime="0:0:1" />

                      <!-- Using a DiscreteVector3DKeyFrame, the camera suddenly swivels up. This happens  
                           immdeiately after the first 1 and a half second of the animation. -->
                      <DiscreteVector3DKeyFrame Value="-1,-1,-3" KeyTime="0:0:1.5" />

                      <!-- Using a SplineVector3DKeyFrame, the camera swivels back to its starting point. 
                           The animation starts out slowly at first and then speeds up. This KeyFrame ends 
                           after the fourth second. -->
                      <SplineVector3DKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0,0,-1" KeyTime="0:0:4" />

                    </Vector3DAnimationUsingKeyFrames.KeyFrames>
                  </Vector3DAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Viewport3D.Triggers>
        </Viewport3D>
      </Canvas>

    </Viewbox>
  </DockPanel>
</Page>

参照

処理手順

方法 : 3D シーンでカメラの位置および方向をアニメーション化する

概念

3-D グラフィックスの概要