- From: Miguel Camba <miguel.camba@gmail.com>
- Date: Sat, 17 Jan 2015 21:22:58 +0000
- To: public-fx@w3.org
- Message-ID: <CADfPy=YaUabkajX53RZopYe_apB1Wuk+ZL5t4JN6GH1H+NQHKw@mail.gmail.com>
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