Re: [css3-transitions] Complex easing functions

2009/4/10 Andrew Fedoniouk <news@terrainformatica.com>:
> Chris Marrin wrote:
>>
>> On Apr 8, 2009, at 7:51 PM, Andrew Fedoniouk wrote:
>>
>>> Robert O'Callahan wrote:
>>>>
>>>> On Tue, Apr 7, 2009 at 4:51 PM, Dean Jackson <dino@apple.com
>>>> <mailto:dino@apple.com>> wrote:
>>>>   On 03/04/2009, at 9:26 PM, Jon Rimmer wrote:
>>>>       After reading though the current transitions draft, I am
>>>>       wondering about support for more advanced easing functions, with
>>>>       more complex curves and values that fall outside the range [0,
>>>>       1]. Such functions are required for 'elastic' or 'bounce'
>>>>       transitions, which are a popular way of providing more natural
>>>>       easing, particularly for movement, but do not seem possible with
>>>>       the current proposal. There is a useful easing functions
>>>>       visualiser here that provides samples for each type:
>>>>       http://www.robertpenner.com/easing/easing_demo.html
>>>>       This sort of easing is possible using JavaScript libraries, such
>>>>       as Mootools or jQuery with the easing plugin, and it be a shame
>>>>       if the transitions module were not to include an equivalent
>>>>       degree of capability. Is there a reason why the proposal could
>>>>       not be modified to allow multiple bezier curvers within a timing
>>>>       function, and allow values to fall outside the range [0, 1], so
>>>>       long as the final values ended at 0,0 or 1,1?
>>>>   We agree that more complex timing functions should be added. My
>>>>   hesitation is that I'd like to start with as small a specification
>>>>   as possible, and then add features later. However, this isn't really
>>>>   a difficult feature to implement, so we're willing to add it if the
>>>>   community and other implementors agree. Is there anyone else
>>>>   listening who wants this immediately?
>>>>   The idea of multiple curves allowing values outside [0,1] is a good
>>>>   suggestion.
>>>>   While it would be a little painful, you can still achieve you
>>>>   elastic or bounce effects today using CSS animations with keyframes.
>>>> It seems a lot easier to implement bounce effects by relaxing the [0,1]
>>>> constraint on curves than by implementing all of CSS animations. (Especially
>>>> since I find the case for CSS Transitions a lot stronger than for
>>>> Animations.) I'd support adding that.
>>>> Rob
>>>
>>> If to relax [0,1] then 'cubic-bezier' value/function [1] has to be
>>> replaced by something else as you may end up with ambiguous curves that have
>>> multiple output values for single input value.
>>
>>
>> You'd have to constrain the curve shape to keep the X (input) value
>> monotonically increasing. Doing that would maintain the 1:1 relationship
>> between input and output.
>
> The question is how exactly "to keep it"?
>
> Cubic-Bezier function is known to exist in parametric form.
> As far as I understand drawing and wording in
> http://www.w3.org/TR/css3-transitions/
> you propose to use it in non-parametric form as y = B(x).

Yes, because time advances regardless of the user agent intervention,
so you need to get the current value (y), from the current time (x).

> In general such equation does not exist for the Cubic-Bezier - is ambiguous
> in our "space-time" ((C) Dr. O.Hoffmann).

Not it is ambiguous, rather the equation X(t) =
(1-t)^2*t*A+(1-t)*t^2*B+t^3 (parametric form for the Bezier Curve,
given P0 = 0 and P3 = 1) is a cubic, so it can have (at most) three
solutions, ie three values of the parameter, given a point of time.
That is, you need to ensure that X(t) is bijective, so:
1) there must exists at least a value for t in [0;1] so that X(t) >= 1
and a value of t in [0;1] so that
X(t) <= 0 (this ensures surjectivity)
2) X(t) must be monotonic strictly increasing or strictly decreasing,
that is it's first derivative must be never 0
(Dr O.Hoffman said it must be strictly increasing, he was wrong
because he assumed that the independent variable is t, the parameter,
while really it is the time)

I tried some mathematics to get a condition on A and B for those two,
but the formulas are so long (expecially that for the solutions of a
general cubic) that I seriously doubt that the CSS specification will
ever adopt them as requirement for implementors and expecially for
authors (that are not required to learn any mathematics).
For example, to ensure injectivity, you must say that
((A-3)-sqrt(3(3+2A-A^2)))/2 < B < ((A-3)+sqrt(3(3+2A-A^2)))/2, and
this is probably the easiest formula, since it is from a quadratic
inequation, not from a cubic.

> So in reality you have to use some approximation for the y=B(x) function
> (if yes then which one?) or that part in css3-transitions is misleading.>

Theoretically, you have to find the value of the parameter, given the
time, and then find the value of property transitioned. While this is
always feasible on the whole set of reals, this cannot be done in the
interval [0;1] (both for time and parameter).
By the way, empirically testing with A and B in [0;1] (current spec)
always works, so the condition is probably enough, although I don't
have a proof currently.

> Why not just to use Cubic-Bezier in parametric form?

Because you cannot change time when the parameter changes. The input
variable must be time, not the parameter.

> In this case you can use any values for the strong points.
>
>>
>> -----
>> ~Chris
>> cmarrin@apple.com
>>
>>
>
> --
> Andrew Fedoniouk.
>
> http://terrainformatica.com
>
>

I was also thinking of dropping completely the Bezier curve and using
a generic polynomial V(T), but that has the problem that could never
reach the destination value. So I don't actually know what we could do
(except leaving the limit [0;1] for the x1 and x2 arguments to
cubic-bezier() )

Giovanni

Received on Friday, 10 April 2009 10:10:00 UTC