Hallo!
Ich habe ein kleines Problem bei der (für mich) korrekten Umsetzung einer DoubleAnimationUsingPath.
Die komplette Animation:
<Canvas Height="300" Width="680" Margin="5">
<Canvas.Resources>
<PathGeometry x:Key="pathGeo" Figures="M0,0 L100,50 C200,110 200,-40 250,0 C300,40 400,200 500,150 L600,0"/>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Duration="0:0:8" Storyboard.TargetName="translate" Storyboard.TargetProperty="Y" Source="Y"
PathGeometry="{StaticResource pathGeo}"/>
<DoubleAnimationUsingPath Duration="0:0:8" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Source="X"
PathGeometry="{StaticResource pathGeo}"/>
<DoubleAnimationUsingPath Duration="0:0:8" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" Source="Angle"
PathGeometry="{StaticResource pathGeo}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Path Stroke="Black" Canvas.Top="115" Canvas.Left="50" Data ="{StaticResource pathGeo}"/>
<Path Data="M0 12L8.061 0L16 12H0z" Fill="Red" Canvas.Top="100" Canvas.Left="50" RenderTransformOrigin="1 1">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rotate"/>
<TranslateTransform x:Name="translate"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Canvas>
Ich starte die Animation mit einem kleinen roten nach oben zeigenden Dreieck. Durch die Rotate-Animation wird es sofort, paralel zum Path, gedreht und weiterbewegt. Wie auf dem Bild ersichtlich, bleibt es aber nicht wie gewünscht über dem Path.
Kann man das noch beeinflussen?
Ein weiteres Problem ist: Wie kann ich denn den Abstand zum Path konstant setzen? Wenn ich die Startposition weiter weg (nach oben) zum Path setze, ist es am Ende der Animation trotzdem unmittelbar über dem Path.