Tutorial-Serie: WPF 3D Picture Cube – Animation Teil 3
Nachdem wir im zweiten Teil unseren 3D-Würfel erstellt haben, wollen wir ihn nun im WPF-3D-Raum animieren. Hierfür nutzen wir sogenannte From/To/By-Animationen sowie AxisAngleRotation3D-Objekte, um Rotationen durchzuführen und ein TranslateTransform3D-Objekt, um den Cube mit VB.NET (sollte für C#-Entwickler kein Problem darstellen) durch den Raum wandern zu lassen.
Zunächst fügen wir im XAML-Code das Menü hinzu und setzen die Kamerasicht wieder zurück, sodass wir frontal auf den Würfel schauen.
<Window x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300" AllowsTransparency="False" WindowStyle="ThreeDBorderWindow" > <Grid> <Grid.Background> <LinearGradientBrush StartPoint="0 0" EndPoint="1 1"> <GradientStop Color="Aqua" Offset="0"/> <GradientStop Color="BlueViolet" Offset="1"/> </LinearGradientBrush> </Grid.Background> <DockPanel Width="Auto" VerticalAlignment="Stretch" Height="Auto" HorizontalAlignment="Stretch" Grid.ColumnSpan="1" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" Grid.RowSpan="1"> <StackPanel> <Border BorderThickness="2" BorderBrush="Gray"> <StackPanel> <StackPanel.Background> <LinearGradientBrush> <GradientStop Color="AliceBlue" Offset="0"/> <GradientStop Color="BlueViolet" Offset=".3"/> <GradientStop Color="Aqua" Offset=".7"/> <GradientStop Color="AliceBlue" Offset="1"/> </LinearGradientBrush> </StackPanel.Background> <StackPanel Margin="10"> <Button Name="Cube" Click="Cube_Click">Cube</Button> <Button Name="btnRotateX" Click="btnRotateX_Click">Rotate X</Button> <Button Name="btnRotateY" Click="btnRotateY_Click">Rotate Y</Button> <Button Name="btnRotateZ" Click="btnRotateZ_Click">Rotate Z</Button> <Button Name="btnTransZ" Click="btnTransZ_Click">Transl. Z</Button> <Button Name="btnClose" Click="btnClose_Click">Close</Button> </StackPanel> </StackPanel> </Border> </StackPanel> <Viewport3D Name="mainViewport" ClipToBounds="True"> <Viewport3D.Camera> <PerspectiveCamera x:Name="cam" Position="0,0,4" LookDirection="0,0,-3.5" ></PerspectiveCamera> </Viewport3D.Camera> <ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="White" Direction="0,0,-1" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D> </DockPanel> </Grid> </Window>
Dann fügen wir im VB.NET-Code die fehlenden Event-Subs hinzu, in dem wir das jeweilige Steuerelement oben links auswählen und dann rechts die richtigen Events wählen.
Nun Erzeugen wir eine neue Sub “PaintCube” und schieben den gesamten Code aus dem zweiten Teil dieses WPF Tutorials, der unseren Würfel beschreibt, in diese Sub.
Um die Lage und Postion des Würfels im 3D-Raum zu ändern, benötigen wir nun vier neue private Objekte. Zur Vereinfachung nenne ich sie mal Positionnierungs-Objekte:
Private RotationX As New AxisAngleRotation3D(New Vector3D(1, 0, 0), 0) Private RotationY As New AxisAngleRotation3D(New Vector3D(0, 1, 0), 0) Private RotationZ As New AxisAngleRotation3D(New Vector3D(0, 0, 1), 0) Private TranslateZ As New TranslateTransform3D
Ein AxisAngleRotation3D-Objekt stellt eine 3D-Drehung mit einem angegebenen Winkel um eine angegebene Achse dar.
Ein TranslateTransform3D-Objekt verschiebt ein Objekt im dreidimensionalen x-y-z-Raum.
Im zweiten Teil fügen wir ja die Model3DGroup dem ModelVisual3D hinzu, um dieses dann als Kind des Viewports hinzufügen. Bevor wir aber letzteres tun, erzeugen wir ein Transform3DGroup- Objekt, fügen diesem unsere vier neuen Positionnierungs-Objekte hinzu und weisen diese dann unserer Transform-Property des Models zu:
Dim transformGroup As New Transform3DGroup transformGroup.Children.Add(New RotateTransform3D(RotationX)) transformGroup.Children.Add(New RotateTransform3D(RotationY)) transformGroup.Children.Add(New RotateTransform3D(RotationZ)) transformGroup.Children.Add(TranslateZ) Model.Transform = transformGroup
Und erst jetzt weisen wir das Model dem Viewport zu:
c0bc2b21f44f2a3222477fd910456632003
Jetzt haben wir unserem Würfel die Fähigkeit gegeben Ihre Position und Lage im 3D-Raum zu ändern. Jetzt müssen wir nur noch dafür sorgen, dass er es auch tut.
Kommen wir also zum Animieren unseres Objektes! Hierzu benötigen wir zunächst den Namespace für die Animation:
Imports System.Windows.Media.Animation
Das Animieren ist im Grund ganz einfach. Wir verändern die Postion und die Lage des Würfels während eines Zeitablaufes immer stärker. Hierfür nutzen wir die sogenannten Basis-Animationen (auch From/To/By-Animationen genannt).
Wir definieren in unserem Fall ein Objekt vom Typ DoubleAnimimation (weil die Werte, die wir verändern Double sind) und weisen den Properties From und To zu von welchem Wert zu welchem Wert er sich verändern soll.
Außerdem bestimmen wir darüber noch die Laufzeit, Wiederholungen usw.
Anschließend übergeben wir dieses Animations-Objekt der BeginAnimation – Eigenschaft unseres Positionsierungsobjektes und geben dabei an, was animiert werden soll.
Zum besseren Verständnis sehen wir hier nun, wie dies Animations-Deklaration für unsere Bewegung entlang der Z-Achse aussieht:
Dim transAnimationZ As New DoubleAnimation transAnimationZ.Duration = TimeSpan.Parse("0:0:4") transAnimationZ.From = -1.5 transAnimationZ.To = 3.5 transAnimationZ.AutoReverse = True transAnimationZ.AccelerationRatio = 0.1 transAnimationZ.DecelerationRatio = 0.1 transAnimationZ.RepeatBehavior = New RepeatBehavior(2) TranslateZ.BeginAnimation(TranslateTransform3D.OffsetZProperty, transAnimationZ)
Die Rotationen sehen alle ähnlich aus. Hier die Routine für die X-Drehung:
Dim rotateAnimationX As New DoubleAnimation rotateAnimationX.Duration = TimeSpan.Parse("0:0:4") rotateAnimationX.From = -180 rotateAnimationX.To = 180 rotateAnimationX.AutoReverse = True rotateAnimationX.AccelerationRatio = 0.1 rotateAnimationX.DecelerationRatio = 0.1 rotateAnimationX.RepeatBehavior = New RepeatBehavior(2) RotationX.BeginAnimation(AxisAngleRotation3D.AngleProperty, rotateAnimationX)
Wenn Ihr nun die Hauptroutine PaintCube im Click-Event Cube-Buttons aufruft, sowie die verschiedenen Animations-Routinen hinter den jeweils anderen Buttons, dann sollte Eure Animation wie im Video des ersten Teils des WPF Tutorials laufen.
Ach ja, den Close-Befehl solltet ihr natürlich auch hinter dem Close-Button packen 
Me.Close()
Viel Spaß!
Nice tutorial..
wow! this is what i’m looking for! Great tutorial bro! thx
Hi Carsten,
da hast du wirklch ein klasse Tutorial erstellt.
Danke
Martin
Hallo Martin,
danke für das Lob
Hello Benny and anakkecil,
nice to read, that this tutorial had helped you
Hallo,
ein sehr schönes Tutorial. Leider kann ich das nicht nachbauen, weil ich nicht wirklich verstehe, auf welches Objekt sich das Me. bezieht. Vielleicht kannst du am Ende den gesamten Quelltext posten, damit das Zusammenspiel der Funktionen deutlich wird bzw. vielleicht kann ich mit dir wegen eines (kleinen) Projektes von mir Kontakt aufnehmen.
Viele Grüße
Hallo daGrossa,
das kannst Du machen. Meine E-Mail-Adresse findest Du im Impressum (in der rechten Sidebar unter Infos).
Gruß Carsten