Does Easing work when drawing arcs/portions of a circle?

How-to Discussions
1

I modified the Stopwatch-Javascript example so that rather than drawing the entire circle every second, it draws each second step-wise until it reached 60-seconds. I.e. At 1 second it draws 1/60th of the circle - from 0 to 1 second. With the next tick, it draws the arc from 1 to 2. Then 2 to 3, and so-on.

If I don’t use any easing, then it works correctly (though not as nice as I’d like):

<Change Target="clock.EndAngleDegrees" Value="359.99" Duration="0.25"/>

If I add Easing (Easing=“BounceIn”) to make it look more natural:

<Change Target="clock.EndAngleDegrees" Value="359.99" Duration="0.25" Easing="BounceIn"/>

Then the arcs are crazy. The lengths almost seem random - sometimes they get longer. Then a few seconds later, they get shorter. And there’s no actual bouncing animation - it just jumps to the new length.

2

Hey there,

I’m having a bit of trouble understanding what you’re asking. Would you be able to provide some simple example code showing what’s going on?

3

Sure!

FYI - My hope was that I’d get an effect similar to the outer-most in this example: http://dmitrybaranovskiy.github.io/raphael/polar-clock.html.

Bug report:

Fuse version 0.24.0 (build 7243) OS X El Capitan Version 10.11.6

Modifying the “stopwatch-javascript” example so a) that the circle represents a clock in which b) only one-second arc is drawn each second (rather than the entire circle being drawn each second) works when there is no easing. But, when easing is added, the arc lengths are sporadic.

Steps

  1. Download example project - Download and extract Zip from: https://www.fusetools.com/examples/stopwatch-javascript.
  2. Edit MainView.js. Comment out Line 25 and modify Line 26 to:
// watchFace.seek(0);
watchFace.playTo(lastSecond/60);

and save.
3. Edit WatchFace.ux. Modify lines 35 and 36 and change the duration from 1 second to .1:

<Change Target="clock.EndAngleDegrees" Value="360" Duration=".1" />
<Change Target="trackerBall.Degrees" Value="360" Duration=".1" />

and save.
4. Preview the app locally. Ignore the first 2 seconds. Note the way that, starting at 2 seconds, the “timeline” colored arc is drawn a little longer each second. Each second it grows by about 1/60th of the circle.
5. Edit WatchFace.ux. Modify lines 35 and 36 and add easing:

<Change Target="clock.EndAngleDegrees" Value="360" Duration=".1" Easing="BounceIn" />
<Change Target="trackerBall.Degrees" Value="360" Duration=".1" Easing="BounceIn" />
  1. Preview the app locally and ignore the first 2 seconds again. Note this time, the length of the arc changes sporadically - sometime growing (e.g. from 4-5 secs) and others shrinking.
4

Hi there, sorry for the late reply. I’m able to reproduce this locally, but I’m a bit unsure as to what’s causing it. I’ll pass it on to someone who might know a bit better :slight_smile:

5

Aha, so we dug a bit more into this, and the “weirdness” we’re seeing is basically that the BounceIn easing you’ve set on the Change animators will be applied to the entire duration of the timeline, not one “tick”. So the moving back and forth is actually correct, as you’re slowly scrolling through the bounce animation :slight_smile:

I’m a bit unsure as to how you might get the actual animation you’re looking for, so again, I’ll try to pass this onto someone else who might know better, but at least that should explain why you’re seeing what you’re seeing.

6

watchFace.playTo(lastSecond/60); This plays the entire animation to this time. Your easings apply to the entire duration of the animation, thus playing to some arbitrary time with bouncing will cause the chaotic arc appearance.

What you’re likely looking for is the Attractor class. This one allows you to define pseudo-physics and easings and then modify a value arbitrarily (without a fixed timeline). You can look at https://www.fusetools.com/examples/attractor for examples.

7

Interesting. Attractor does provide a nice bounce effect “Out of the box” - thanks!

But, a couple things:

  1. It took a while to realize that you must add Type="Easing" if you want to use easing - not totally intuitive.
  2. Even with Type="Easing" Easing="BounceIn" you still have to play with the duration in order to be able to see the bounce.
  3. With Type="Easing" Easing="BounceIn" and a duration, it animates correctly up until about 21 seconds. Then it stops easing.
  4. Duration doesn’t seem to have any impact when you don’t specify a “Type”

If I may (provide some feedback) - from my un-educated point of view, it doesn’t make sense to me that Fuse won’t play the animation to any arbitrary time; with whatever easing is defined. Maybe I missed something in the docs or videos that explains the way animation works in enough detail that I should have know this? On the other hand, another possibility would be to Fuse so that animation can play to any arbitrary time with easing.

8

Thanks for the feedback! I can definitely understand how some of this wasn’t the most intuitive, especially attractor. It’s probably the case that we could document the animation system better so the current easing behavior is more explicit. I don’t think we’ll end up making any fundamental changes to how animation works at this point, but it’s possible we might come up with a way to play to a certain point in a timeline with easing how you describe in the future.