Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better easeInCirc and easeOutCirc formulas #180

Open
Taureon opened this issue Oct 3, 2023 · 1 comment
Open

Better easeInCirc and easeOutCirc formulas #180

Taureon opened this issue Oct 3, 2023 · 1 comment

Comments

@Taureon
Copy link

Taureon commented Oct 3, 2023

The formulas used in easeInCirc and easeOutCirc are not actually a circle shape.
They're parabolas.
After goofing around, I've made two formulas that I think would be more accurate.

function easeInCirc(x: number): number {
    return 1 - Math.cos(Math.asin(x));
}
function easeOutCirc(x: number): number {
    return Math.sin(Math.acos(x - 1));
}

grafik

@tynberry
Copy link

The formulas in easeInCirc and easeOutCirc are circles, not parabolas.
This is because of the square root applied after the first parabolification.
This can be derived from Pythagorean theorem.

If we take any point on the circle and draw a right triangle whose hypothenuse is the point on the circle and its legs are parallel to the x and y axis, then we can use the pythagorean theorem (assuming unit circle):
$x^2 + y^2 = 1$
and solve for $y$, since we want a function that gives us $y$ for a given $x$.
$1 - x^2 = y^2$
$sqrt(1 - x^2) = y$

Now we just need to move it to the right
$sqrt(1 - (x-1)^2) = y$
and we get the Ease Out equation.

For the Ease in, we just have to invert it and move up.
$1 - sqrt(1 - x^2) = y$

However your equations aren't actually wrong since they are identical as can be seen here.
Despite being identities, using trigonometric functions in this cases might not be ideal due to their potential increased computation intensity and slightly smaller accuracy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants