Add pow easing function

[MasatoMakino]

Related Issues

• tween jumps (jitters) to the final value at the end of animation tween jumps (jitters) to the final value at the end of animation #116

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]

Awesome!

[trusktr]

Just curious, why not allow numbers less than 1?

[trusktr]

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.

[MasatoMakino]

@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.

[trusktr]

nice!

[trusktr]

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]

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.