Partager via

Guide pratique pour animer une rotation 3D à l’aide d’images clés

  • Article

Dans l’exemple suivant, Rotation3DAnimationUsingKeyFrames est utilisé pour faire pivoter un objet 3D tandis que son axe de rotation anime un « wobble ». Cette animation utilise les images clés suivantes :

  1. LinearRotation3DKeyFrame est utilisé pour créer une interpolation lisse et linéaire entre les valeurs.

  2. DiscreteRotation3DKeyFrame est utilisé pour créer des « sauts » soudains entre les valeurs (aucune interpolation).

  3. SplineRotation3DKeyFrame est utilisé pour créer une transition de variable entre les valeurs en fonction de la KeySpline propriété. Dans l’exemple ci-dessous, cette partie de l’animation démarre lentement, mais vers la fin du segment de temps, accélère de façon exponentielle.

Exemple

<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 Name="MyAnimatedObject"
          ClipToBounds="True" Width="150" Height="150"
          Canvas.Left="0" Canvas.Top="10">

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

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

            <!-- Two ModelVisual3D define 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>
                <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 properties of the
                        Rotation object are animated causing the 3D object to rotate and "wobble" (see Storyboard below).-->
                  <GeometryModel3D.Transform>
                    <RotateTransform3D x:Name="myRotateTransform3D" >
                      <RotateTransform3D.Rotation>
                        <AxisAngleRotation3D Axis="0,3,0" Angle="40" />
                      </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. -->
                  <Rotation3DAnimationUsingKeyFrames
                   Storyboard.TargetName="myRotateTransform3D" 
                   Storyboard.TargetProperty="Rotation" >
                    <Rotation3DAnimationUsingKeyFrames.KeyFrames>

                      <!-- Using a LinearRotation3DKeyFrame, the object gradually rotates to an angle 
                           of -60 degrees while the axis of rotation shifts (animates) to a new value. -->
                      <LinearRotation3DKeyFrame KeyTime="0:0:1">
                        <LinearRotation3DKeyFrame.Value>
                          <AxisAngleRotation3D Axis="1,0,1" Angle="-60" />
                        </LinearRotation3DKeyFrame.Value>
                      </LinearRotation3DKeyFrame>

                      <!-- Using a DiscreteRotation3DKeyFrame, the object suddenly rotates to the an angle 
                           of 80 degrees on a new axis. This happens immdeiately after the first 1 and 
                           a half seconds of the animation. -->
                      <DiscreteRotation3DKeyFrame KeyTime="0:0:1.5">
                        <DiscreteRotation3DKeyFrame.Value>
                          <AxisAngleRotation3D Axis="0,0,1" Angle="80" />
                        </DiscreteRotation3DKeyFrame.Value>
                      </DiscreteRotation3DKeyFrame>

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

                    </Rotation3DAnimationUsingKeyFrames.KeyFrames>
                  </Rotation3DAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Viewport3D.Triggers>
        </Viewport3D>
      </Canvas>

    </Viewbox>
  </DockPanel>
</Page>

Voir aussi