Description

The properties of the elements will change over a predefined period

Usage

Parameters

  • attr {Object}

    Property values :

    • opacity
    • x
    • y
    • scaleX
    • scaleY
    • rotation

    Example :

    {x: 200, scaleX: 2}
    

  • frames {Integer}

    Duration in frames

  • ease {Function} optional

    (optional) Effect.

    Use Ease object that has constants :

    • easeInQuad
    • easeOutQuad
    • easeInCubic
    • easeOutCubic
    • easeInOutCubic
    • easeInQuart
    • easeOutQuart
    • easeInOutQuart
    • easeInQuint
    • easeOutQuint
    • easeInOutQuint
    • easeInSine
    • easeOutSine
    • easeInOutSine
    • easeInExpo
    • easeOutExpo
    • easeInOutExpo
    • easeInCirc
    • easeOutCirc
    • easeInOutCirc
    • easeInElastic
    • easeOutElastic
    • easeInOutElastic
    • easeInBack
    • easeOutBack
    • easeInOutBack
    • easeInBounce
    • easeOutBounce
    • easeInOutBounce

    See example below. You can see the effects on http://gsgd.co.uk/sandbox/jquery/easing/

Returns

CanvasEngine.Timeline

Example

var timeline = canvas.Timeline.new(el);
timeline.to({x: 100}, 70,  Ease.easeOutElastic).call();

Discussion