How to: Animate Camera Position and Direction Using Key Frames
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:
LinearPoint3DKeyFrame and LinearVector3DKeyFrame are used to create a smooth, linear interpolation between values.
DiscretePoint3DKeyFrame and DiscreteVector3DKeyFrame are used to create sudden "jumps" between values (no interpolation).
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