- From: VisibleCode via GitHub <sysbot+gh@w3.org>
- Date: Sat, 30 Jul 2016 23:48:08 +0000
- To: public-css-archive@w3.org
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