Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equation to calculate different speeds for fade animation

I'm trying to add a fade effect to my form by manually changing the opacity of the form but I'm having some trouble calculating the correct value to increment by the Opacity value of the form.

I know I could use the AnimateWindow API but it's showing some unexpected behavior and I'd rather do it manually anyways as to avoid any p/invoke so I could use it in Mono later on.

My application supports speeds ranging from 1 to 10. And I've manually calculated that for a speed of 1 (slowest) I should increment the opacity by 0.005 and for a speed of 10 (fastest) I should increment by 0.1. As for the speeds between 1 and 10, I used the following expression to calculate the correct value:

double opSpeed = (((0.1 - 0.005) * (10 - X)) / (1 - 10)) + 0.1; // X = [1, 10]

I though this could give me a linear value and that that would be OK. However, for X equal 4 and above, it's already too fast. More than it should be. I mean, speeds between 7, and 10, I barely see a difference and the animation speed with these values should be a little more spaced

Note that I still want the fastest increment to be 0.1 and the slowest 0.005. But I need all the others to be linear between them.

What I'm doing wrong?

It actually makes sense why it works like this, for instance, for a fixed interval between increments, say a few milliseconds, and with the equation above, if X = 10, then opSpeed = 0.1 and if X = 5, then opSpeed = 0.47. If we think about this, a value of 0.1 will loop 10 times and a value of 0.47 will loop just the double. For such a small interval of just a few milliseconds, the difference between these values is not that much as to differentiate speeds from 5 to 10.

like image 777
rfgamaral Avatar asked Dec 09 '22 20:12

rfgamaral


1 Answers

I think what you want is:

0.005 + ((0.1-0.005)/9)*(X-1)

for X ranging from 1-10

This gives a linear scale corresponding to 0.005 when X = 1 and 0.1 when X = 10

After the comments below, I'm also including my answer fit for a geometric series instead of a linear scale.

0.005 * (20^((X-1)/9)))

Results in a geometric variation corresponding to 0.005 when X = 1 and 0.1 when X = 10

After much more discussion, as seen in the comments below, the updates are as follows.

@Nazgulled found the following relation between my geometric series and the manual values he actually needed to ensure smooth fade animation.

The relationship was as follows: I ♥ Graphs! :)

Which means a geometric/exponential series is the way to go.

After my hours of trying to come up with the appropriate curve fitting to the right hand side graph and derive a proper equation, @Nazgulled informed me that Wolfram|Alpha does that. Seriously amazing. :)

Wolfram Alpha link

He should have what he wants now, barring very high error from the equation above.

like image 52
SuPra Avatar answered Mar 24 '23 01:03

SuPra