Animation of StateGroup in a PageControl

Bug Reports
1

Hi, I have 6 pages in a PageControl. When I change of page the color of the header change (with a StateGroup). When I go Left to Right works fine but when I go Right to Left the color blink to other state.

I’m doing something wrong?

Here is my code?

<App Theme="Basic" Background="#333">
    <Font File="Roboto-Bold.ttf" ux:Global="Bold" />
    <Font File="Roboto-Regular.ttf" ux:Global="Medium" />
    <Font File="Roboto-Light.ttf" ux:Global="Light" />
    <DockPanel>
        <iOS.StatusBarConfig Style="Light" />
        <StatusBarBackground Dock="Top"/>
        <BottomFrameBackground Dock="Bottom"/>

        <Panel Height="60." Width="100%" Dock="Top" >
            <Text Value="PARTIDOS" FontSize="21" TextAlignment="Center" TextColor="#fff" Font="Bold" Alignment="Bottom" Margin="0,0,0,5" />
            <SolidColor ux:Name="HeaderColor" Color="#7ac8d5" />
        </Panel>

        <Panel Height="30." Width="100%" Dock="Top" >
            <SolidColor ux:Name="SubHeaderColor" Color="#7ac8d5" />
        </Panel>

        <StateGroup ux:Name="AnimacionColores" Active="1">
            <State ux:Name="1">
                <Change Target="HeaderColor.Color" Value="#7ac8d5" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#6ab4c1" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="2">
                <Change Target="HeaderColor.Color" Value="#6ab4c1" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#5aa0ad" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="3">
                <Change Target="HeaderColor.Color" Value="#5aa0ad" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#4b8d9a" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="4">
                <Change Target="HeaderColor.Color" Value="#4b8d9a" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#3b7986" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="5">
                <Change Target="HeaderColor.Color" Value="#3b7986" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#2b6572" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="6">
                <Change Target="HeaderColor.Color" Value="#2b6572" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#21535b" Duration="0.8" Easing="CubicInOut" />
            </State>
        </StateGroup>

        <PageControl ux:Name="pages">
            <Page ux:Name="page1" Background="#fff" >
                <Text Value="1" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="1" />                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page2" Background="#fff">
                <Text Value="2" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="2" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page3" Background="#fff">
                <Text Value="3" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="3" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page4" Background="#fff">
                <Text Value="4" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="4" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page5" Background="#fff">
                <Text Value="5" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page6" Background="#fff">
                <Text Value="6" Alignment="Center"  />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="6" />
                </ActivatingAnimation>
            </Page>
            </PageControl>

            <Grid ColumnData="1,1,1,1,1,1" Height="45" Dock="Bottom">
                <Style>
                    <Image Padding="7" />
                </Style>
                <Panel Background="#7ac8d5">
                    <Clicked>
                        <Set pages.Active="page1" />
                    </Clicked>
                </Panel>
                <Panel Background="#6ab4c1">
                    <Clicked>
                        <Set pages.Active="page2" />
                    </Clicked>
                </Panel>
                <Panel Background="#5aa0ad">
                    <Clicked>
                        <Set pages.Active="page3" />
                    </Clicked>
                </Panel>
                <Panel Background="#4b8d9a">
                    <Clicked>
                        <Set pages.Active="page4" />
                    </Clicked>
                </Panel>
                <Panel Background="#3b7986">
                    <Clicked>
                        <Set pages.Active="page5" />
                    </Clicked>
                </Panel>
                <Panel Background="#2b6572">
                    <Clicked>
                        <Set pages.Active="page6" />
                    </Clicked>
                </Panel>
            </Grid>
    </DockPanel>
</App>
2

I’ve taken a quick look myself, but the code appears to be correct. Looks like a bug to me. I’ll make a ticket internally and let you know if we find anything!

3

We’re trying to pin down a reproduction internally (it’s possible it doesn’t happen on our newest builds). I’m uncertain whether it is a defect or a visual anomaly.

The UX code is using a combination that is not recommended:

<ActivatingAnimation>
  <Set AnimacionColores.Active="1" />
</ActivatingAnimation>

Placing actions inside animation triggers is a delicate thing. This action, as written, will trigger anytime the page beings activating. If you move the mouse back-and-forth a lot between pages it’ll trigger this action several times. Each of these results in a state change. Combine this with cubic easings on the colors and you can get some effects that are perhaps not intended.

A preferred approach to tying navigation progress to a state group is using a WhileActive trigger with a Change animator.

<WhileActive Threshold="0.5">
    <Change AnimacionColores.Action=1"/>
</WhileActive>

The Treshold="0.5" makes this exclusive: only one page can meet this threshold at a time. Using Change makes it a stable state-based animator, unlike using Set. The difference now is that the color change will not happen until you’ve crossed that 50% barrier during the page scrolling…

4

Thanks @edA-qa mort-ora-y but with:

<WhileActive Threshold="0.5">
  <Change AnimacionColores.Action=1"/>
</WhileActive>

Also blink in the animation… And now blink Left to Right and Right to Left! Maybe in the next release this is solved…

But by:

<Change AnimacionColores.Action=1"/>

Its Active right? Because with Action I get a error.

5

Yes, sorry, that should have been Active.

Hopefully this is fixed in the next release for you. Otherwise we’ll have to look a bit further at potential incompatibilities somewhere else.