Gewusst wie: Animieren von Kameraposition und -richtung mithilfe von Keyframes

  • Artikel

Im folgenden Beispiel wird Point3DAnimationUsingKeyFrames verwendet, um die Position von PerspectiveCamera in einer 3D-Szene zu animieren. Darüber hinaus wird Vector3DAnimationUsingKeyFrames verwendet, um die Richtung, in die die Kamera in der 3D-Szene zeigt, zu animieren. Beide Animationen verwenden mehrere Keyframes, die eine Reihe von Animationseffekten erstellen:

  1. LinearPoint3DKeyFrame und LinearVector3DKeyFrame werden verwendet, um eine glatte, lineare Interpolation zwischen Werten zu erstellen.

  2. DiscretePoint3DKeyFrame und DiscreteVector3DKeyFrame werden verwendet, um plötzliche "Sprünge" zwischen Werten (keine Interpolation) zu erstellen.

  3. SplinePoint3DKeyFrame und SplineVector3DKeyFrame werden verwendet, um einen Variablenübergang zwischen Werten abhängig von der KeySpline Eigenschaft zu erstellen. Im folgenden Beispiel beginnt die Animation langsam, aber am Ende des Zeitsegments, beschleunigt exponentiell.

Beispiel

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Weitere Informationen