12.7 Animation
Das nachfolgende Projekt WPFAnimDreiDRotation zeigt eine Kombination aus verschiedenen Elementen: die Animation einer dreidimensionalen Rotationstransformation, ein Storyboard als Ressource und einen Event Trigger.
Eine Transformation ist die Veränderung eines 3D-Körpers, zum Beispiel eine Verschiebung, Größenänderung oder Drehung. Ein Storyboard (dt.: Drehbuch) beinhaltet den Ablauf einer Animation. Eine Ressource entspricht einem Werkzeug, das einer Anwendung zur Verfügung steht. Ein Event Trigger kann bei einem bestimmten Ereignis eine Animation starten.
Mit der Rotationstransformation dreht sich der bereits bekannte Würfel nacheinander um drei verschiedene Achsen, sobald das Fenster geladen wird: In den ersten zehn Sekunden von 0 auf 180 Grad um die x-Achse und wieder zurück auf 0 Grad, in den nächsten Sekunden ebenso um die y-Achse, dann ebenso zehn Sekunden um die z-Achse. Dieser Ablauf wird endlos fortgesetzt.
Zunächst der Würfel mit Event Trigger und Transformation in XAML:
<Window ...>
<Window.Resources>
<Storyboard x:Key="sbres" ...> ... </Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard
Storyboard="{StaticResource sbres}" />
</EventTrigger>
</Window.Triggers>
<Viewport3D>
<Viewport3D.Camera> ... [Kamera]
<Viewport3D.Children>
<ModelVisual3D> ... [Licht]
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>
<GeometryModel3D.Geometry ... [Geometrie] >
<GeometryModel3D.Material ... [Material vorne] >
<GeometryModel3D.BackMaterial ... [hinten]>
<GeometryModel3D.Transform>
<RotateTransform3D x:Name="rt3d" >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
</Viewport3D>
</Window>
Listing 12.15 Projekt »WPFAnimDreiDRotation«, XAML-Code, Teil 1
Die Ressource hat als Bezeichnung den Schlüssel sbres. Der Event Trigger reagiert, sobald das Ereignis Loaded des Fensters eingetreten ist und startet das Storyboard aus der Ressource sbres.
Es folgt der bekannte Aufbau von Szene und Würfel, mit Kamera, Licht, Geometrie und Material. Als neues Element von GeometryModel3D folgt die Transformation. Die Art der Transformation (hier: RotateTransform3D) ist das Zielelement der Animation (TargetName). Die Art der Rotation (hier: AxisAngleRotation) ist die Zieleigenschaft der Animation (TargetProperty). Es werden hier noch keine Werte für die Drehachse (Axis) oder den Drehwinkel (Angle) eingetragen, diese folgen erst im Storyboard.
Nun zum Storyboard, innerhalb der Ressource:
<Window.Resources>
<Storyboard x:Key="sbres" RepeatBehavior="Forever">
<Rotation3DAnimation Storyboard.TargetName="rt3d"
Storyboard.TargetProperty="Rotation"
Duration="0:0:5" AutoReverse="True">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="1,0,0" Angle="0" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="1,0,0" Angle="180" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
<Rotation3DAnimation Storyboard.TargetName="rt3d"
Storyboard.TargetProperty="Rotation"
Duration="0:0:5" BeginTime="0:0:10"
AutoReverse="True">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="0,1,0" Angle="0" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="0,1,0" Angle="180" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
<Rotation3DAnimation Storyboard.TargetName="rt3d"
Storyboard.TargetProperty="Rotation"
Duration="0:0:5" BeginTime="0:0:20"
AutoReverse="True">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="0,0,1" Angle="0" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="0,0,1" Angle="180" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
</Storyboard>
</Window.Resources>
Listing 12.16 Projekt »WPFAnimDreiDRotation«, XAML-Code, Teil 2
Das gesamte Storyboard wird endlos wiederholt, wegen des Werts Forever für die Eigenschaft RepeatBehavior.
Jede der drei Animationen vom Typ Rotation3DAnimation hat als Zielelement (TargetName) die Art der Transformation und als Zieleigenschaft (TargetProperty) die Art der Rotation. Jede dauert 5 Sekunden und wird dann wieder rückgängig gemacht, macht zehn Sekunden. Jede verläuft vom Winkel 0 Grad bis zum Winkel 180 Grad (Animations-Eigenschaften From und To).
Die drei Animationen unterscheiden sich in der Drehachse: erst ist es die x?, dann die y-, dann die z-Achse. Außerdem starten sie dank der unterschiedlichen Werte der Eigenschaft BeginTime zeitversetzt, im Ergebnis also nacheinander. Die Wert werden im Format hh:mm:ss angegeben.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.