CODEWITHSUNDEEP
wpfxamlanimation
Sonhja
Sonhja

Reputation: 8458

Animate line to rotate clockwise in WPF

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:

enter image description here

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! :_(

Upvotes: 1

Views: 1654

Answers (2)

BenjaminPaul
BenjaminPaul

Reputation: 2941

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!

Upvotes: 2

Sheridan
Sheridan

Reputation: 69985

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.

Upvotes: 2

Related Questions