Animate line to rotate clockwise in WPF - wpf

Question

I'm trying to rotate a line clockwise, to simulate the loading animations we can usually find in internet, but I want to do it by myself.
I want to simulate something similar to this:
But I can't even move a simple line... This is my code trying to rotate a line:
<Canvas>
<Line
Name="LineTransformation"
X1="50" Y1="50"
X2="50" Y2="0"
Stroke="Red"
StrokeThickness="2">
<Line.RenderTransform>
<RotateTransform Angle="0" CenterX="{Binding ElementName=LineTransformation.X2}" CenterY="{Binding ElementName=LineTransformation.Y2}"></RotateTransform>
</Line.RenderTransform>
</Line>
</Canvas>
How can I make something similar? I can't even get how to rotate that line! :_(

Answer 1

The line is not being rotated. Your image is not even working correctly. This effect is achieved by drawing all 12 lines. Then, instead of animating the position of the lines, you animate the Opacity of each line from 1.0 to 0.0 in 12 steps and then jump straight back to 1.0.
This animation should run on each line in turn and slightly after the previous line so that there is this delayed effect which makes it look like the lines are moving around. You can do this animation using a DoubleAnimationUsingKeyFrames and 12 DiscreteDoubleKeyFrame elements with equally spaced KeyTime values.
To accurately reproduce exactly what your image is doing, you'd only need two different opacity levels, but it would still be achieved in the same way.

Answer 2

Try popping this code into a Window and taking a look at what I have done to demonstrate how this can be achieved...
<Window.Resources>
<Storyboard x:Key="SpinStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="LineTransformation">
<EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="180"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource SpinStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Canvas Width="50" Height="50">
<Line
Name="LineTransformation"
X1="25" Y1="50"
X2="25" Y2="0"
Stroke="Red"
StrokeThickness="2" RenderTransformOrigin="1,0.5">
<Line.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Line.RenderTransform>
</Line>
</Canvas>
</Grid>
Essentially using RotateTransform and a storyboard to spin the line, the tigger is simply there to start the animation for demonstration purposes!