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

This is usually a lot easier when using a single storyboard as you only have to deal with one timeline and its easier to see where animations may conflict. If you wanted to use your same animations you would do something like (in a trigger on something like the Window/UserControl):

<Storyboard>
   <DoubleAnimation Storyboard.TargetName="MyFirstObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                    BeginTime="0:0:2"
                    ... />
   <DoubleAnimation Storyboard.TargetName="MySecondObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                    BeginTime="0:0:3"
                    ... />
</Storyboard>

You still need to fix the sync problems as noted in the other answer.

You can also use KeyFrames to explicitly control when things happen

<Storyboard>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyFirstObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
           <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
           <EasingDoubleKeyFrame Value="360" KeyTime="0:0:2"/>
   </DoubleAnimationUsingKeyFrames>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MySecondObject" 
                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
           <EasingDoubleKeyFrame Value="0" KeyTime="0:0:1"/>
           <EasingDoubleKeyFrame Value="360" KeyTime="0:0:3"/>
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

In this case its very obvious if your objects will "sync up" which is pretty nice.

Answer 2

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.