[Animation] feat: Cubic Bezier conversion function #19789
Description
Feature Request
Ionic version:
[x] 4.x
Describe the Feature Request
When doing gesture based animations, it is important to be able to switch between linear and non-linear easing functions without any flickering or jank.
Use Case:
The navigation transitions on iOS follow a particular non-linear easing curve when played; however, when doing swipe to go back the animation is gradually played with a linear easing curve (i.e. move your finger 10px and the animation progresses 10px).
When releasing your finger, the animation continues from the progression it was released at.
On the web, it's easy enough to continue playback of an animation. The problem is that the progression on the linear curve does not necessarily equal the same progression on the other non-linear curve.
Example:
Assume both time and progression run from [0, 1]. The diagonal line represents the "linear" easing curve, and then solid black curvy line represents an easing curve of cubic-bezier(0.32, 0.72, 0, 1).
In this example, the linear curve shows a progression of 0.5 happening at time = 0.5. However, on the non-linear curve, a progression of 0.5 happens around time ≈ 0.16. The difficult part here is we can only control the current time of the animation, and the browser calculates the progression from there. If we kept the same time value and switched from linear to the non-linear curve, our animation would jump to a progression of about 0.95. We need a way of setting the time of the animation such that the progression remains consistent from the linear curve to the non-linear curve.
Another way of phrasing it is "At what time does this cubic bezier curve reach the given progression?" (Given a curve and a y value, what is the correct x value).
Having the correct time value to give to the browser would solve this problem.
Describe Preferred Solution
Ideally there would be a function that accepts a curve definition and a progression and returns the correct time value.
Additional Context
Some cubic bezier curves hit progressions at more than one time value, so the function should return the complete set of time values in these instances. For example, cubic-bezier(0.21, 1.71, 0.88, 0.9) hits progression 1.02 at time ≈ 0.35 and time ≈ 0.87.
Other animation libraries do not have this problem because they control all aspects of the animation including playback (so they have control over progression and time).