Help with Move and Keyframe animations

How-to Discussions
1

Hi!

I am new at fuse, and i am having some weird issues while trying to <Move> something using <Keyframe>.

I have a code like that. The issue i have is that element that im trying to moves like it supposed to, and after all keyframes end, quickly jumps to the right, like it did keyframe <Keyframe X="-42" TimeDelta="0.04"/> or something like that. I can’t understand why this is happening. Also it works just fine if delete all the Keyframes that use positive X values. It moves right and goes back like it is supposed to!

Can someone help me understand what is going on? Thank you!

<Move Target="PinInput">
                <Keyframe X="0" TimeDelta="0.01"/>
                <Keyframe X="-40" TimeDelta="0.06"/>
                <Keyframe X="-42" TimeDelta="0.04"/>
                <Keyframe X="0" TimeDelta="0.02"/>
                <Keyframe X="11" TimeDelta="0.02"/>
                <Keyframe X="12" TimeDelta="0.01"/>
</Move>
2

Hello

It would be easier to investigate your issue if you provided a minimal reproducable testcase of this happening.

Could you provide that for us?

Liam

3

Liam Svanåsbakken Crouch wrote:

Hello

It would be easier to investigate your issue if you provided a minimal reproducable testcase of this happening.

Could you provide that for us?

Liam

Sure! Here you go. Thing is the same here. Rectangle moves to the left, as it should, next to the right, as it should again, and after that instead of going back to 0, goes again to the further left again before that. It happens only if the Keyframes with opposite X are present. If all Keyframes are + signed or - signed everything is OK.

<Rectangle ux:Name="TestAnimate" Color="#FFF" Width="120" Height="30">
    <Text Color="#000" Alignment="Center"> Click ME! </Text>
    <Clicked>
        <Move Target="TestAnimate">
            <Keyframe X="-45" Time="1"/>
            <Keyframe X="20" Time="2"/>
        </Move>
    </Clicked>
</Rectangle>
4

The point you’re likely missing is that the animation is played both forward and back to the rest state. See BackwardAnimation docs for details and an example.

If you instead need an animation that only runs in a single direction, I would suggest using a combination of Set which sets the new X position of an element, for example, and LayoutAnimation that defines how the element travels from the old X position to the new one.

Hope this helps!

5

Uldis wrote:

The point you’re likely missing is that the animation is played both forward and back to the rest state. See BackwardAnimation docs for details and an example.

If you instead need an animation that only runs in a single direction, I would suggest using a combination of Set which sets the new X position of an element, for example, and LayoutAnimation that defines how the element travels from the old X position to the new one.

Hope this helps!

Thank you for the help! Now i see how it works, i should really read more about triggers!