Animation: Add interpolation functions

[bryphe]

Issue: Today, all our animation infrastructure uses a 'linear' easing function.

This happens in our getLocalTime method - we're implicitly using the linear easing function which is just t => t. However, linear easing is not very visually appealing - usually you want an easing style animation which more closely replicates a physical model.

The proposal is to add an additional parameter, easing to our animation options:
https://github.com/bryphe/revery/blob/e024382f2631ac2026f129c52091e410c5e7a29a/src/UI/Animation.re#L27

This would be simply a function of type easingFunction: float => float.

The user could define their own easing function, or we could have some defaults:

• linear
• step(boundary) would be t => t < boundary ? : 0.0 : 1.0
• quadratic would be t => t * t
• cubic would be t => t * t * t
• easeIn
• easeOut
• easeInOut

[bryphe]

This would be useful for #121 as well

[Bretley]

@bryphe I added the type for easing into the record and defined linear, quadratic, and cubic. What part of Animation.re needs to be changed so that we use easing instead of default linear

[bryphe]

@Bretley - awesome! Would you mind posting up a PR of what you have so far? I can help point out the place we need to change to integrate the new easing functions

[albertorestifo]

@Bretley are you still working on this?

[jchavarri]

@Bretley @albertorestifo A PR for "scroll bouncing" landed yesterday that added some missing easing functions to Animation.re:

revery/src/UI/Animation.re

Lines 58 to 63 in ec5ca4e

	let cubicBezier = Rebez.make;
	// From https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#Keywords_for_common_cubic-bezier_timing_functions
	let ease = cubicBezier(0.25, 0.1, 0.25, 1.0);
	let easeIn = cubicBezier(0.42, 0.0, 1.0, 1.0);
	let easeOut = cubicBezier(0.0, 0.0, 0.58, 1.0);
	let easeInOut = cubicBezier(0.42, 0.0, 0.58, 1.0);

The actual calculation of the values was put into a separate repo, at least temporarily, just because it could be useful for other folks (and I needed at some point a "clean slate" to properly test it, think about it, and understand what was going on with some nasty bugs 😅 ): https://github.com/jchavarri/rebez.

There is some functionality to tween and also "chain" different animations, that can be seen in the tests.

Sorry about that, I didn't realize there was an issue about easing.

---

Having said so, I think the Animation module could still benefit from exposing spring-based animations as well. I've been looking at react-spring and popmotion for inspiration, but if anyone wants to take over and investigate that, it'd be awesome 🙂

@bryphe Not sure if the spring animations work would deserve a new issue though? as this one was explicitly targeting easing functions.

[bryphe]

@jchavarri - amazing work! Thanks for implementing the remainder of easing functions.

@bryphe Not sure if the spring animations work would deserve a new issue though? as this one was explicitly targeting easing functions.

I would love to have spring-based motion (some of those demos are really impressive for react-spring / popmotion - especially how little code it takes to get nice effects).

I did log an issue previously in #131 - but it might be a bit too opionionated (maybe useSpring is wrong and there is a better API) - but we could start tracking discussion there, and rename it if needed? react-spring and popmotion might expose a more battle-tested and usable API.

In the meantime, sounds like the work here is done between #149 and #315 , so we can close this one out 👍