Re: [css3-transitions] Complex easing functions

>There is a well known cubic-bezier *parametric* formula but it is a 
>function of P(t) [1] where 't' is 'time' or 'step' value but not that 
>'Input Percentage' as it is shown on the image. In parametric form 
>Bezier curves are uniquely determined so you can use them as X(t), Y(t) 
>but in Y(x) form Bezier function is ambiguous.
>
>Cheers.
>
>-- 
>Andrew Fedoniouk.


This is the same (apart from the wrong wording percentage) as
for SMIL/SVG animation with calcMode spline.
There is no explicit time dependency of the value provided with
the control points.
Both time and the value are functions of a parameter
running from 0 to 1. Because especially the function for
the time has to be monoton due to our current understanding
of spacetime and the abilities of viewers (which act in this 
spacetime), there are restrictions on the possible values of 
the control points to be in the range 0 to 1.

To have something like a bouncing effect or a harmonic
oscillation, the best approach is to use more than just
one set of values and control points - what is possible
with animation, but not with transitions, having only
two values. However, for a motion for example, one
still has to ensure, that the values list contains the
extreme points, therefore at least with SMIL/SVG 
it is often simpler to use animateMotion to move
something along an arbitrary 2D-path instead of 
calculating the motion in x and y direction independently 
and with splines. 

I think, there are other sets of (normed) polynomes for
example (with an explicit time depencence) with the 
possibility of a none monoton behaviour for the values.
With them it should be possible too to restrict the
result to the range between the initial and the final
value without the need of a monoton function.
They might be useful for transitions, those cubic
curves are however very useful for the general
animation case.


Olaf

Received on Thursday, 9 April 2009 12:51:31 UTC