delay wpf animation for rotation

Question

No matter what i change i can not get the rotation to delay based on milliseconds. I want to make it so each ellipse is slightly delayed behind one another. You should be able to see 3 ellipse objects in the image below, but they all overlap one another. Can someone help me get this working, whether its with Storyboard keys, whatever it may be. Thank you.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="100" Width="100">
    <Grid>     

        <!--Circles Animated-->
        <Canvas x:Name="LoadingObject" VerticalAlignment="Top" Height="20" Width="20" Background="LightGray">

            <Ellipse Height="4" Width="4" Fill="Red" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

            <Ellipse Height="4" Width="4" Fill="Blue" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" BeginTime="0:0:03" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

            <Ellipse Height="4" Width="4" Fill="Blue" RenderTransformOrigin=".5,2.5">
                <Ellipse.RenderTransform>
                    <RotateTransform/>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                    From="0" To="-360" Duration="0:0:1" BeginTime="0:0:06" RepeatBehavior="Forever">
                                    <DoubleAnimation.EasingFunction>
                                        <QuadraticEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>

        </Canvas>

    </Grid>
</Window>

Answer 1

The problem here is you choose the wrong value of BeginTime. The duration of all is 1 second. The BeginTime should not contain 1. Otherwise after some cycles, all will start at the same point in the circle.

In your case, after 3 seconds, the second ellipse will start at the same point with the first (at this time, the first one has done 3 cycles of its own). After next 3 seconds, the third ellipse will start at the same point with the 2 others (at this time, the first one has done 6 cycles and the second one has done 3 cycles). Finally all run in the same point and never separate.

You can try some smaller BeginTime, such as 00:00:01.2 for the second ellipse, and 00:00:01.4 for the third ellipse.