How to: Animate Camera Position and Direction Using Key Frames

  • Article

In the following example, Point3DAnimationUsingKeyFrames is used to animate the position of a PerspectiveCamera in a 3D scene. In addition, Vector3DAnimationUsingKeyFrames is used to animate the direction the camera is pointing in the 3D scene. Both of these animations use several key frames which create a series of animation effects:

  1. LinearPoint3DKeyFrame and LinearVector3DKeyFrame are used to create a smooth, linear interpolation between values.

  2. DiscretePoint3DKeyFrame and DiscreteVector3DKeyFrame are used to create sudden "jumps" between values (no interpolation).

  3. SplinePoint3DKeyFrame and SplineVector3DKeyFrame are used to create a variable transition between values depending on the KeySpline property. In the example below, the animation starts off slow but toward the end of the time segment, speeds up exponentially.

Example

<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>

See Also

Tasks

How to: Animate Camera Position and Direction in a 3D Scene

Concepts

3-D Graphics Overview