Delen via

Procedure: Een 3D-draaiing animeren met behulp van sleutelframes (QuaternionAnimatieMetSleutelframes)

  • Artikel

In het volgende voorbeeld wordt QuaternionAnimationUsingKeyFrames gebruikt om een 3D-object te draaien. Deze animatie maakt gebruik van de volgende sleutelframes:

  1. LinearRotation3DKeyFrame wordt gebruikt om een vloeiende, lineaire interpolatie tussen waarden te maken.

  2. DiscreteRotation3DKeyFrame wordt gebruikt om plotselinge "sprongen" tussen waarden te maken (geen interpolatie).

  3. SplineRotation3DKeyFrame wordt gebruikt om een variabeleovergang tussen waarden te maken, afhankelijk van de eigenschap KeySpline. In het onderstaande voorbeeld begint dit deel van de animatie langzaam, maar naar het einde van het tijdsegment loopt exponentieel toe.

Voorbeeld

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

        <!-- The Viewport3D provides a rendering surface for 3-D visual content. -->
        <Viewport3D ClipToBounds="True" Width="150" Height="150"
          Canvas.Left="0" Canvas.Top="10">

          <!-- Defines the camera used to view the 3D object. -->
          <Viewport3D.Camera>
            <PerspectiveCamera x:Name="myPerspectiveCamera" Position="0,0,2" LookDirection="0,0,-1" 
             FieldOfView="60" />
          </Viewport3D.Camera>

          <!-- The ModelVisual3D children contain the 3D models -->
          <Viewport3D.Children>

            <!-- This ModelVisual3D defines the lights cast in the scene. Without light, the
                 3D object cannot be seen. Also, the direction of the lights affect shadowing. -->
            <ModelVisual3D>
              <ModelVisual3D.Content>
                <DirectionalLight Color="#FFFFFF" Direction="-0.612372,-0.5,-0.612372" />
              </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
              <ModelVisual3D.Content>
                <GeometryModel3D>

                  <!-- The geometry specifes the shape of the 3D plane. In this case, a flat sheet is created. -->
                  <GeometryModel3D.Geometry>
                    <MeshGeometry3D
                     TriangleIndices="0,1,2 3,4,5 "
                     Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
                     TextureCoordinates="0,0 1,0 1,1 1,1 0,1 0,0 "
                     Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 " />
                  </GeometryModel3D.Geometry>

                  <!-- The material specifies the material applied to the plane. In this case it is a linear gradient.-->
                  <GeometryModel3D.Material>
                    <MaterialGroup>
                      <DiffuseMaterial>
                        <DiffuseMaterial.Brush>
                          <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                            <LinearGradientBrush.GradientStops>
                              <GradientStop Color="Yellow" Offset="0" />
                              <GradientStop Color="Red" Offset="0.25" />
                              <GradientStop Color="Blue" Offset="0.75" />
                              <GradientStop Color="LimeGreen" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                          </LinearGradientBrush>
                        </DiffuseMaterial.Brush>
                      </DiffuseMaterial>
                    </MaterialGroup>
                  </GeometryModel3D.Material>
                  
                  <!-- The Transform specifies how to transform the 3D object. The rotation
                       is animated using the Storyboard below. -->
                  <GeometryModel3D.Transform>
                    <RotateTransform3D>
                      <RotateTransform3D.Rotation>
                        <QuaternionRotation3D x:Name="myQuaternionRotation3D" />
                      </RotateTransform3D.Rotation>
                    </RotateTransform3D>
                  </GeometryModel3D.Transform>
                </GeometryModel3D>
              </ModelVisual3D.Content>
            </ModelVisual3D>
          </Viewport3D.Children>

          <!-- Trigger the rotation animation when the 3D object loads. -->
          <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
              <BeginStoryboard>
                <Storyboard>

                  <!-- This animation animates the Rotation property of the RotateTransform
                       causing the 3D shape to rotate and wobble as the rotation angle and 
                       axis are animated. -->
                  <QuaternionAnimationUsingKeyFrames
                   Storyboard.TargetName="myQuaternionRotation3D" 
                   Storyboard.TargetProperty="Quaternion" >
                    <QuaternionAnimationUsingKeyFrames.KeyFrames>

                      <!-- Using a LinearQuaternionKeyFrame, the 3D object gradually rotates from an askew 
                           position to a flat position. -->
                      <LinearQuaternionKeyFrame KeyTime="0:0:1" Value="0,0,1,0"  />

                      <!-- Using a DiscreteQuaternionKeyFrame, the object suddenly rotates to an askew  
                           position. This happens immdeiately after the first 1 and a half seconds of the animation. -->
                      <DiscreteQuaternionKeyFrame KeyTime="0:0:1.5" Value="0.3, 0.3, 1, 0" />

                      <!-- Using a SplineQuaternionKeyFrame, the object rotates back to a flat position. 
                           The animation starts out slowly at first and then speeds up. This KeyFrame ends 
                           after the fourth second. -->
                      <SplineQuaternionKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:4" Value="0,0,1,0" />

                    </QuaternionAnimationUsingKeyFrames.KeyFrames>
                  </QuaternionAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Viewport3D.Triggers>
        </Viewport3D>
      </Canvas>
    </Viewbox>
  </DockPanel>
</Page>

Zie ook