Re: [css3-transitions] Complex easing functions

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

Why not just to use Cubic-Bezier in parametric form?
In this case you can use any values for the strong points.

> 
> -----
> ~Chris
> cmarrin@apple.com
> 
> 

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 10 April 2009 02:20:23 UTC