Re: [css3-transitions] Complex easing functions

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.

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

Received on Thursday, 9 April 2009 17:25:49 UTC