Spin keeps rotating back

Bug Reports
1

Hey guys,
I am currently having an issue while trying to spin something.

I have a circle:

      <Circle ux:Name="ButtonLoader" Width="50" Height="50" StartAngleDegrees="-45" EndAngleDegrees="45">
        <Stroke Width="2" Color="Red" />
      </Circle>

And I am trying to spin it with:

      <WhileBusy>
        <Spin Target="ButtonLoader" Frequency="1"/>
      </WhileBusy>

I am starting the busy state in my Javascript with
busy.activate(); and busy.deactivate();

The spinning works but, as soon as I deactivate the busy-state, it doesn’t just stops spinning but it keeps rotating backwards and stops in its default position.

Any ideas here?

2

That is expected behavior. All animation in Fuse is seen as deviation from the rest state. Read all about it in our getting started docs: https://www.fusetools.com/docs/declarative-animation (see the section “Backwards Animation”).

3

Didn’t know about that, thank you.

I am using this for a loading animation and was still testing it.
But changing the Opacity from 0 to 1 inside the <WhileBusy> “hid” the Backwards-Animation, so everything is working fine now :-).

4

Hi Jxns,

changing Opacity sounds like a good approach in general, but I’m afraid you’re doing it in a way that is not optimal. Adding an explicit backwards animation might also be the way to, but I don’t think that’s the right approach in this case either.

Here’s something that I threw together based on the code you shared, and I think you’ll find pretty cool. There are a few tricks to this, so I’ll explain.

First, I created a component for the loader itself, so that I have a little better abstraction level:

<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
	<Stroke Width="20" Color="Red" />
</Circle>

And then I use it in the app like so. Notice how I set the Visibility to Hidden and Opacity to zero:

<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
	<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />

What I wanted to achieve was the loader to animate both in and out smoothly, all while spinning, to avoid any kind of visual jerkiness. This is where the Visibility comes in handy, because we can Spin the loader all the time it is visible:

<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
	<Stroke Width="20" Color="Red" />
	<WhileVisible>
		<Spin Frequency="1"/>
	</WhileVisible>
</Circle>

And finally, we simply have to animate (both forward and back) as the Busy state changes:

<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
	<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />
	<Busy IsActive="false" ux:Name="busy"/>
	<WhileBusy>
		<Change ButtonLoader.Visibility="Visible" DelayBack="1" />
		<Change ButtonLoader.Opacity="1" Duration="1" />
	</WhileBusy>
</Panel>

And here’s the full code that you can copy-paste and run:

<App>

	<JavaScript>
		function triggerBusy() {
			busy.activate();
			setTimeout(function() {
				busy.deactivate();
			},2700);
		}
		module.exports = {
			triggerBusy: triggerBusy
		};
	</JavaScript>

	<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
		<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />
		<Busy IsActive="false" ux:Name="busy"/>
		<WhileBusy>
			<Change ButtonLoader.Visibility="Visible" DelayBack="1" />
			<Change ButtonLoader.Opacity="1" Duration="1" />
		</WhileBusy>
	</Panel>

	<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
		<Stroke Width="20" Color="Red" />
		<WhileVisible>
			<Spin Frequency="1"/>
		</WhileVisible>
	</Circle>

</App>