Famo.us - Documenting a 'curve' function

Question

I have a function fadeOpacity which basically sets up a StateModifier with a start opacity, end opacity, transition and a callback function.

I'm using JSDoc for my own code, and was just wondering what type I should be calling a transition

In the source for famo.us's pre-made curves in Easing.js, curves are created as follows:

var Easing = {
    inQuad: function(t) {
        return t*t;
    },

    ...

My JSDoc block for fadeOpacity goes like this:

     /**
     * [fadeOpacity description]
     * @param  {!number}   startOpacity [description]
     * @param  {!number}   endOpacity   [description]
     * @param  {function}   transition  [description] <= the param in question...
     * @param  {function} callback      [description]
     * @return {StateModifier}          [description]
     */

Is transition's type correct?

score 1 · Accepted Answer · answered Jun 12 '14 at 14:31

Looking at Lightbox.js, it looks like the type for transitions is just Transition..

eg. line 32 of Lightbox.js

* @param {Transition} [options.inTransition=true] The transition in charge of showing a renderable.

If you are animating opacity, I am assuming you want the user or OP (or yourself ;)) to interact as they would another famo.us function. Where the Easing.inOutQuad, is certainly a function, it does not describe duration for instance, of a transition. You would want your function to take a transition which could be an Easing curve, physics curve, or transitionable.

Hope this helps!

score 0 · Answer 2 · answered Jun 21 '14 at 21:23

Yes. The transition is a function that takes in a number t from 0 to 1, and returns a number (often between 0 and 1, with negative values being undershoots, and values greater than 1 being overshoots). Transition can also be a string that is just a key to a registered function. By default, Famo.us comes with a few of these, like "linear" and "easeIn", etc.

A linear transition, for example, would be represented by

function linearTransition(t) { return t; }

This shouldn't be confused with a transition definition, which looks like

{
    transition : linearTransition,
    duration : 500,
    callback : function myCallback(){}
}

Famo.us - Documenting a 'curve' function

2 Answers2