Delay not working on Cycle Animator

How-to Discussions
1

I have the following code tying to make a 3 dots loader:

       <Panel>
            <WhileTrue Value="true">
                <Cycle Target="C1.Opacity" Low="0" High="1" Frequency="1" />
                <Cycle Target="C2.Opacity" Low="0" High="1" Frequency="1" Delay="1"/>
                <Cycle Target="C3.Opacity" Low="0" High="1" Frequency="1" Delay="2"/>
            </WhileTrue>

            <Panel Height="15" Width="90">
                <ColumnLayout ColumnCount="3" />
                <Circle ux:Name="C1" Color="White" Width="15" Height="15"/>
                <Circle ux:Name="C2" Color="White" Width="15" Height="15"/>
                <Circle ux:Name="C3" Color="White" Width="15" Height="15"/>
            </Panel>
        </Panel>```

But the 3 circles are blinking at the same time.
2

Since the value of WhileTrue starts at true it’ll skip to the end of the timeline when first rooted (added to the UI). This is to create a stable display when starting up the interface.

To avoid this behaviour you can add Bypass="Never" to the while trigger. Using a WhileVisible probably makes more sense here:

 <WhileVisible Bypass="Never">

Unless you intend on toggling it on/off.

3

I should also add that your dots will however just synchronize after all the delays ellapse, since they all have the same frequency.

You are better off dropping the delay and using the ProgressOffset on the Cycle instead, to make them out-of-phase.

4

Did as you said and is working as expected now, thanks!

<Panel ux:Class="SpinnerWhite" ux:Name="self" Opacity="0" IsEnabled="false">
    <WhileEnabled>
        <Change Target="self.Opacity" Value="1" Delay="0.5" DelayBack="0" Duration="0"/>
        <Cycle Target="C1.Opacity" Low="0.1" High="1" Frequency="1.25" ProgressOffset="0.32" />
        <Cycle Target="C2.Opacity" Low="0.1" High="1" Frequency="1.25" ProgressOffset="0.16" />
        <Cycle Target="C3.Opacity" Low="0.1" High="1" Frequency="1.25" ProgressOffset="0" />
    </WhileEnabled>

    <Panel Height="30" Width="90" >
        <ColumnLayout ColumnCount="3"/>
        <Circle ux:Name="C1" Color="White" Width="15" Height="15" />
        <Circle ux:Name="C2" Color="White" Width="15" Height="15"/>
        <Circle ux:Name="C3" Color="White" Width="15" Height="15"/>
    </Panel>
</Panel>