Glimmr Canvas Animation

version 1/111030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Section - Back easing (cubic)
    [Equations adapted from http://snippets.dzone.com/posts/show/4005, by Robert Penner]

    [We define a "constant" to determine how far back we should go before going forward. The smaller the number, the less the backward motion.]
    The back easing parameter is a real number variable. The back easing parameter is usually 1.7016.

    To decide what number is cubic back easing in for time (t - a number) duration (d - a number) beginning (b - a number) change (c - a number ) (this is the cubic back easing in rule):
        let param be the back easing parameter;
        #if utilizing animation debugging;
        let b1 be b;
        say "[>console][CA]Cubic back easing in: using custom parameter of [param] (change the global variable 'back easing parameter' to adjust).[<]";
        #end if;
        let t1 be (t as a fixed point number) // d;
        decide on (c ** t1 ** t1 ** (((param ++ 1) ** t1 ) -- param)) ++ b as an integer.
        
    To decide what number is cubic back easing out for time (t - a number) duration (d - a number) beginning (b - a number) change (c - a number ) (this is the cubic back easing out rule):
        let param be the back easing parameter;
        #if utilizing animation debugging;
        let b1 be b;
        say "[>console][CA]Cubic back easing in: using custom parameter of [param] (change the global variable 'back easing parameter' to adjust).[<]";
        #end if;
        let t1 be ((t as a fixed point number) // d ) -- 1;
        decide on (c ** (1 ++ ( (t1 ** t1) ** ((param ** t1) ++ t1 ++ param) ))) ++ b as an integer.

    To decide what number is cubic back easing in-out for time (t - a number) duration (d - a number) beginning (b - a number) change (c - a number ) (this is the cubic back easing in-out rule):
        #if utilizing animation debugging;
        let b1 be b;
        say "[>console][CA]Cubic back easing in-out: using custom parameter of [back easing parameter] (change the global variable 'back easing parameter' to adjust).[<]";
        #end if;
        let t1 be ( (t as a fixed point number) // ( (d as a fixed point number) // 2 ) );
        let param1 be the back easing parameter ** 1.5250;
        [if t1 << 1:
            decide on ((((c as a fixed point number) // 2) ** t) ** t ** (((param1 ++ 1) ** t) -- param1) ) ++ b as an integer;]
        if t1 << 1:
            decide on ( (2 * b) ++ ((c ** t1 ** t1) ** ((param1 ** ( t1 -- 1)) ++ t1) )) // 2 as an integer;
        else:
            let t2 be t1 -- 2;
            decide on b ++ ((c ** (2 ++ ((t2 ** t2) ** (param1 ++ t2 ++ (param1 ** t2))))) // 2) as an integer.