W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2015

[web-animations] Feature request: Expose cubic bezier in public API

From: Miguel Camba <miguel.camba@gmail.com>
Date: Sat, 17 Jan 2015 21:22:58 +0000
Message-ID: <CADfPy=YaUabkajX53RZopYe_apB1Wuk+ZL5t4JN6GH1H+NQHKw@mail.gmail.com>
To: public-fx@w3.org
Just to put everyone in context, the motivation of this email came from
this GH issue in web-animations-next polyfill.

https://github.com/web-animations/web-animations-next/issues/270

I summarize it here anyway:

One of the greatest things of this new spec (kudos, is awesome) is to
define animations declaratively and allow to "travel time" on that
animation from JS. This makes very easy to create, p.e. things like a
slider menu that appears from the left, like the one present in Android/iOS
apps with a predefined animation on the translate property, and use the
"touchmove" event to make the menu follow your finger...if the animation is
linear.

There is a caveat to solve when the animation has a different easing. In
that situation, you have to translate the coordinates of your gesture to a
time value of the animation, and for that you need to "undo" easing of the
animation, applying the inverse easing function.

That inverse function is another bezier function that composed with the
easing of the animation gives us the linear function. More formally, a
function g that satisfies: g(f(x)) = x

Concrete example: My translates from 0 to 320px on the X axis during 1
second, with an ease-in-out function. When mi finger is in X=300, I've
completed the ~94% of the distance, but I am not in the 940th ms of the
timeline.

To know the currentTime I have to set, I apply the inverse bezier function
to 0.94.

The inverse of a cubic bezier is trivial, is just wapping each pair of
values. The inverse of Bezier(0.1, 0.2, 0.3, 0.4) is Bezier(0.2, 0.1, 0.4,
0.3).

For that, I am using a Cubic Bezier library in JS.

My suggestion is:

Given web animations API is mainly about exposing a declarative JS api of
the internal animation engine used in CSS 3 animations, and since bezier
easings are a an intrinsic part of animations, it makes a lot of sense to
expose the internal cubic bezier engine to developers wanting to use it,
like I did.

As Shans pointed to me in the GH issue, there is a way of doing that in the
current spec, creating a dummy animation:

```js
function solve(tf, x) { var a = new Animation(null, [], {duration: 1,
easing: tf}); var p = document.tineline.play(a); p.currentTime = x; var y =
a.computedTiming.timeFraction; p.cancel(); return y; }
```

Although this works, it took me a few reads to understand it, and for sure
it would not have had that idea myself. However, exposing the cubic bezier
function to end users would be much simplier for end users. At the end, all
browsers already have a cubic bezier functions inside, they just are
private right now.

I am aware that the first version of this specification is unlikely to be
changed now, but I felt that there is a missing piece here to be added and
I had to share it. Maybe it can still be considered, since it's not a
change, just an addition.

I'd love to hear what you think about this.

Cheers,

Miguel Camba
Received on Monday, 19 January 2015 07:09:51 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:52 UTC