Cómo: Animar la posición y la dirección de una cámara mediante fotogramas clave
En el ejemplo siguiente, se utiliza Point3DAnimationUsingKeyFrames para animar la posición de PerspectiveCamera en una escena 3D. Además, se utiliza Vector3DAnimationUsingKeyFrames para animar la dirección en que apunta la cámara en la escena 3D. En ambas animaciones se utilizan varios fotogramas clave que crean una serie de efectos de animación:
LinearPoint3DKeyFrame y LinearVector3DKeyFrame se utilizan para crear una interpolación suavizada y lineal entre valores.
DiscretePoint3DKeyFrame y DiscreteVector3DKeyFrame se utilizan para crear "saltos" súbitos entre valores (sin interpolación).
SplineVector3DKeyFrame y KeySpline se utilizan para crear una transición variable entre valores en función de la propiedad SplinePoint3DKeyFrame. En el ejemplo siguiente, la animación se inicia lentamente, pero se va acelerando de forma exponencial a medida que avanza hacia el final del segmento temporal.
Ejemplo
<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>
Vea también
Tareas
Cómo: Animar la posición y la dirección de una cámara en una escena 3D