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

Having thought about this for a while and chatted with others, I think
 the minimum required features for representing complex easing 
functions boil down to:

- [piecewise](https://en.wikipedia.org/wiki/Piecewise)
- [cubic functions](https://en.wikipedia.org/wiki/Cubic_functions)
- with [jump 
discontinuities](https://en.wikipedia.org/wiki/Classification_of_discontinuities#Jump_discontinuity)
- of chosen [directional 
continuity](https://en.wikipedia.org/wiki/Continuous_function#Directional_and_semi-continuity)

Piecewise cubics are also the common denominator for most animation 
software, which either use some form piecewise cubic spline directly,
  or else curves which are reasonably easy to convert to piecewise 
cubics.

The main exception are animation tools which are doing physical 
simulations. Even then, some simple physical systems can be directly 
represented. For example, piecewise cubics are more than enough to 
precisely represent physically-accurate "bouncing ball" easings, since
 ballistic trajectories are simple parabolic arcs.

Oscillating spring (or pendulum) easings are sinusoidal and _not_ 
exactly representable using simple polynomials, but you can still do a
 good job of approximating them by gluing multiple cubic segments 
together. If `spring()` became part of the standard, it might make 
sense to define it in terms of an appropriate piecewise cubic 
approximation.

I don't know how often jump continuities are really needed in easing 
functions, but they're certainly required if you want to be able to 
define a single easing function to recreate existing complex 
`@keyframes` animations which use timing functions like `step-start()`
 or `step-end()`. So it seems worth including them.

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

Received on Friday, 1 July 2016 04:24:09 UTC