Re: [csswg-drafts] [css-transitions][css-animations] Complex timing functions

But, that leaves us with the issue of what to do if you don't want to 
wait for Houdini, or rely on Javascript for stuff at this level. How 
do we let someone specify any timing function they could want without 
having to drop into Javascript?

Pretty much the only answer left after you rule out arbitrary code is 
to let authors define a timing function, piecewise, out of a sequence 
of simpler functions.

With that kind of representation hand authoring is out the window for 
anything that's not very simple, but browsers can provide more useful 
named presets to help with that. And if you're using an animation tool
 to export your CSS animations, you don't need to care.

How simple is simple? The simplest you can go is polynomials. We 
definitely need constant and linear segments, as well as curves.

Quadratic polynomials (i.e. ax<sup>2</sup> + bx + c) will cover those 
bases, though they're not very expressive. Also, for animation 
purposes, they're not so great because you can't use them to define 
piecewise curves with smooth acceleration. 

Cubic polynomials (i.e. ax<sup>3</sup> + bx<sup>2</sup> + cx + d) 
cover everything quadratic ones do, are a little more expressive, and 
allow smooth accelerations. 

Quartic (ax<sup>4</sup>...) or quintic (ax<sup>5</sup>...) polynomials
 are even more expressive, but they also get wiggly and out of control
 very easily.

So, piecewise cubic polynomials end up being a kind of mathematical 
sweet spot for this purpose.

Unsurprisingly, this is how SVG paths work (if we ignore elliptical 
arc segments). If you boil down an SVG path, every segment in an SVG 
path amounts to a pair of cubic polynomials (or linear functions or 
quadratic polynomials which have a trivial conversion to cubics).

SVG paths use the bezier representation for polynomials (instead of an
 ax<sup>3</sup> + bx<sup>2</sup> + cx + d kind of thing) because the 
bezier form, with control points, is more convenient for geometric 
purposes. Still equivalent underneath.

So, I'd say out of necessity we want something conceptually _like_ SVG
 paths, even if not exactly those. SVG paths allow some extra things 
like full-on gaps and overlaps which won't work for this purpose. 
(This stems from the 1d versus 2d issue I've talked about previously.)
 But you can restrict things, as with cubic-bezier().

The remaining thing you need to confront with using any kind of 
piecewise function for this purpose is how you deal with jump 
discontinuities. At the exact point where two segments butt up against
 each other, you need to be able to decide which one "wins". SVG 
doesn't care, it just draws at both positions. But for an animation 
timing function, you do need to pick one position or the other at the 
critical moment. (In CSS animation, steps() has to deal with this 
issue as well.)

-- 
GitHub Notification of comment by visiblecode
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/229#issuecomment-236396906 
using your GitHub account

Received on Saturday, 30 July 2016 23:48:14 UTC