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

Add pow easing function #604

Merged
merged 7 commits into from
May 4, 2021
Merged

Conversation

MasatoMakino
Copy link
Contributor

Related Issues

Purpose of this Pull Request

This PR is for adding an easing function that has no jitter and a sharp curve like TWEEN.Easing.Exponential.

Details of the changes

  1. Added TWEEN.Easing.generatePow() function.
  2. Added test cases.
  3. Added example page.

TWEEN.Easing.generatePow() function the changes sharpness of a curve depending on power argument. This approach is the same as the expo easing function in popmotion.

GSAP calls the similar easing function Power1 ~ 4. Also, CreateJS/TweenJS internally calls this easing function getPowIn, Out, InOut. Following these precedents, I named this function generatePow.

@trusktr
Copy link
Member

trusktr commented Apr 27, 2021

Awesome!

src/Easing.ts Outdated
Out(amount: number): number
InOut(amount: number): number
} {
power = power < 1.0 ? 1.0 : power
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, why not allow numbers less than 1?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm imagining that with a number less than 1, for example generatePow(0.3).InOut, the user can animate as if some fast-moving object comes into the view, then the "film speed" is slowed down and the object is in slow motion, then the "film speed" is sped back up to normal speed and the moving object takes off out of the view at full speed.

With a more exaggerated number like 0.1, it could be as if a "UFO" was caught on camera: it comes into view and slows down very quickly, then suddenly accelerates out of view.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@trusktr
Thanks for your advice.

I had misunderstood that easing breaks when power is below 1.
https://www.desmos.com/calculator/in8brckvcq
After checking, I found a beautiful curve in range of 0.0 < power < 1.0.
Pow easing curve breaks down when power is below zero.

I will modify conditions to 0.0 < power.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@trusktr trusktr merged commit e99549b into tweenjs:master May 4, 2021
@MasatoMakino MasatoMakino deleted the PR_#116_pow_easing branch May 8, 2021 04:08
@trusktr
Copy link
Member

trusktr commented Aug 2, 2021

Hello @MasatoMakino! I can't find a value for generatePow() that behaves close enough to Exponential, I can always tell the difference visually. There's something pleasing about Exponential (except the jump at the end).

It would be awesome to get the same effect as our current Exponential, but without the jump (start 0 end 0). Here's a video showing generatePow(5.8) vs Exponential:

close-but-not-exactly.mp4

@MasatoMakino
Copy link
Contributor Author

Hello @trusktr.

First of all, please note that generatePow() function cannot return exactly the same result as Exponential. A sample easing curve can be found in #116 (comment)

https://www.desmos.com/calculator/xbgt04gh4v

A parameter of 5.8 is the value at which the intersection of the two curves is at the center.
For a softer landing, setting the parameter to about 5.3 ~ 5.4 looks good.
If you are looking for a sharp rise, 6.4 ~ seems to be a good setting.

I hope this information will help you.

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

Successfully merging this pull request may close these issues.

2 participants