Как анимировать 3-D поворот с помощью ключевых кадров (QuaternionAnimationUsingKeyFrames)
В следующем примере используется QuaternionAnimationUsingKeyFrames, чтобы выполнить поворот 3-D объекта. Эта анимация использует следующие полные кадры:
Объект LinearRotation3DKeyFrame используется для создания гладкой, линейной интерполяции между значениями.
Объект DiscreteRotation3DKeyFrame используется для создания случайных переходов между значениями (без интерполяции).
Объект SplineRotation3DKeyFrame используется для создания переменного перехода между значениями, в зависимости от свойства KeySpline. В представленном ниже примере эта часть анимации начинается медленно, но ближе к концу сегмента времени экспоненциально ускоряется.
Пример
<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">
<!-- 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>
См. также
Задачи
Практическое руководство. Анимация трехмерного вращения с помощью раскадровки
Практическое руководство. Анимация трехмерного поворота с помощью Rotation3DAnimation
Практическое руководство. Анимация трехмерного вращения с помощью кватернионов
Практическое руководство. Анимация 3-D вращения с помощью опорных кадров