Trigger Back Animation

How-to Discussions
1

I have a ManualTrigger that trigger a series of animations, when the ManualTrigger desactivate the animations run backwards. I put EasingBack=“CircularInOut” and DelayBack but when the trigger desactivate its dosnt work and run the same Animation when the Trigger Activates but backwards. DurationBack, DelayBack and EasingBack dont work in this ManualTrigger.

How can use the Backwards animation in ManualTriggers?

2

I’m working on an example now, but if you have a particular snippet you’re working on that would be helpful.

3

It appears that while DurationBack does work neither DelayBack nor EasingBack are working as intended (they don’t work when multiple animators are involved it seems). I’ll get that fixed and released soon.

4

The short-term workaround is to ensure all the animators have one of DurationBack DelayBack or EasingBack specified. The code is such now that if one of them in a trigger does not have a back setting then no backward animation will be used.

The logic relates to how open-ended animators, like Spin work, but has this unintended side-effect of messing with progress based animators. I’m looking for a suitable solution.

5

Ok Then Should work but it’s a error of this version?

Because If I have this, works:


< Button ux:Name="MyButton">
< Tapped>
< Scale Target="MyButton" Factor="1.5" Duration="1" Easing="ElasticOut" DurationBack="10" EasingBack="CubicIn"/>
< /Tapped>

But if I have a ManualTrigger dont work, for example like this:


< ManualTrigger ux:Name="MyTrigger">
< Scale Target="MyButton" Factor="1.5" Duration="1" Easing="ElasticOut" DurationBack="10" EasingBack="CubicIn"/>
< /ManualTrigger>

In Uno file I Activate and Desactivate the trigger with a Pointer.Pressed. But the DurationBack, EasingBack dont work when I Desactivate the ManualTrigger. Its take the Values of initial animation in reverse.

6

You are using only one animator, the Scale item, so it should now. I’ve tried this test and it works:

<Switch>
    <WhileToggled>
        <Change Target="StarTriggerA.On" Value="true"/>
    </WhileToggled>
</Switch>
<Star Width="50" Height="50">
    <SolidColor Color="0.5,0.5,0,1"/>
    <ManualTrigger ux:Name="StarTriggerA">
        <!--<Move X="200" Duration="2" DurationBack="0.2"/>-->
        <Scale Factor="1.5" Duration="1" Easing="ElasticOut" DurationBack="10" EasingBack="CubicIn"/>
    </ManualTrigger>
</Star>

Can I see the code you use to enable/disable the manualtrigger?

7

I know what was the problem! If I put in a trigger two animation one with DurationBack and EasingBack and the other no. When the trigger is Desactivate all the animation run backwards but the one that have Back Values dont respect them.

Here is an example that dont work the Back values.

<DockPanel Background="Green" Height="100" Width="100" HeightUnit="Percent" WidthUnit="Percent">
        <Switch>
            <WhileToggled>
                <Change Target="MyTrigger.On" Value="true"/>
            </WhileToggled>
        </Switch>
<Rectangle ux:Name="MyRectangle" Width="100" Height="100" Alignment="Bottom">
    <SolidColor Color="0,0,0,1"/>
</Rectangle>

<Rectangle ux:Name="MyRectangle2" Width="100" Height="100" Alignment="Top">
    <SolidColor Color="0,0,0,1"/>
</Rectangle>

<ManualTrigger ux:Name="MyTrigger">
        <Scale Factor="2" Target="MyRectangle" Duration="1" Easing="ElasticOut" />
        <Rotate Degrees="360" Target="MyRectangle2" Duration="1" Easing="ElasticOut" DurationBack="10" EasingBack="CubicIn"/>
</ManualTrigger>

</DockPanel>

If I put the same DurationBack to the both its works. Its posible to in the same trigger put diferrents DurationBacks in the animations?

8

Yes, that’s what I meant about multiple animators. The Back settings aren’t working unless all of them have a back setting. It doesn’t matter which back setting, just each animator needs at least one. You can just set DurationBack to the same value as Duration as the quickest workaround.

I’m working on a proper fix, but for now that is the workaround.

9

Thanks! :slight_smile: