API Docs for: 1.5.3
Show:

Tweenable Class

Defined in: dist/shifty.js:260
Module: Tweenable.token
Parent Module: Tweenable

Tweenable constructor.

Constructor

Tweenable

(
  • opt_initialState
  • opt_config
)

Defined in dist/shifty.js:260

Parameters:

  • opt_initialState Object=

    The values that the initial tween should start at if a from object is not provided to tween or setConfig.

  • opt_config Object=

    Configuration object to be passed to setConfig.

Methods

dispose

()

Provided by the Tweenable module.

Defined in dist/shifty.js:545

delete all "own" properties. Call this when the Tweenable instance is no longer needed to free memory.

get

() Object

Provided by the Tweenable module.

Defined in dist/shifty.js:389

Returns:

Object:

The current state.

interpolate

(
  • from
  • targetState
  • position
  • easing
  • opt_delay
)
Object static

Provided by the Tweenable module.

Defined in dist/shifty.js:1010

Compute the midpoint of two Objects. This method effectively calculates a specific frame of animation that tween does many times over the course of a full tween.

var interpolatedValues = Tweenable.interpolate({
  width: '100px',
  opacity: 0,
  color: '#fff'
}, {
  width: '200px',
  opacity: 1,
  color: '#000'
}, 0.5);

console.log(interpolatedValues);
// {opacity: 0.5, width: "150px", color: "rgb(127,127,127)"}

Parameters:

  • from Object

    The starting values to tween from.

  • targetState Object

    The ending values to tween to.

  • position Number

    The normalized position value (between 0.0 and 1.0) to interpolate the values between from and to for. from represents 0 and to represents 1.

  • easing Object. | String | Function

    The easing curve(s) to calculate the midpoint against. You can reference any easing function attached to Tweenable.prototype.formula, or provide the easing function(s) directly. If omitted, this defaults to "linear".

  • opt_delay Number=

    Optional delay to pad the beginning of the interpolated tween with. This increases the range of position from (0 through 1) to (0 through 1 + opt_delay). So, a delay of 0.5 would increase all valid values of position to numbers between 0 and 1.5.

Returns:

Object:

isPlaying

() Boolean

Provided by the Tweenable module.

Defined in dist/shifty.js:521

Returns:

Boolean:

Whether or not a tween is running.

pause

() chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:405

Pause a tween. Paused tweens can be resumed from the point at which they were paused. This is different from stop, as that method causes a tween to start over when it is resumed.

resume

() chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:419

Resume a paused tween.

seek

(
  • millisecond
)
chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:437

Move the state of the animation to a specific point in the tween's timeline. If the animation is not running, this will cause the step handlers to be called.

Parameters:

  • millisecond Millisecond

    The millisecond of the animation to seek to. This must not be less than 0.

set

(
  • state
)

Provided by the Tweenable module.

Defined in dist/shifty.js:397

Parameters:

  • state Object

    The current state.

setBezierFunction

(
  • name
  • x1
  • y1
  • x2
  • y2
)
Function

Provided by the Tweenable module.

Defined in dist/shifty.js:951

Create a Bezier easing function and attach it to Tweenable#formula. This function gives you total control over the easing curve. Matthew Lein's Ceaser is a useful tool for visualizing the curves you can make with this function.

Parameters:

  • name String

    The name of the easing curve. Overwrites the old easing function on Tweenable#formula if it exists.

  • x1 Number
  • y1 Number
  • x2 Number
  • y2 Number

Returns:

Function:

The easing function that was attached to Tweenable.prototype.formula.

setConfig

(
  • config
)
chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:308

Configure a tween that will start at some point in the future.

Parameters:

  • config Object

    The following values are valid:

    • from (Object=): Starting position. If omitted, get() is used.
    • to (Object=): Ending position.
    • duration (number=): How many milliseconds to animate for.
    • delay (delay=): How many milliseconds to wait before starting the tween.
    • start (Function(Object, *)): Function to execute when the tween begins. Receives the state of the tween as the first parameter and attachment as the second parameter.
    • step (Function(Object, *, number)): Function to execute on every tick. Receives get() as the first parameter, attachment as the second parameter, and the time elapsed since the start of the tween as the third. This function is not called on the final step of the animation, but finish is.
    • finish (Function(Object, *)): Function to execute upon tween completion. Receives the state of the tween as the first parameter and attachment as the second parameter.
    • easing (Object.|string|Function=): Easing curve name(s) or function(s) to use for the tween.
    • attachment (*): Cached value that is passed to the step/start/finish methods.

setScheduleFunction

(
  • scheduleFunction
)

Provided by the Tweenable module.

Defined in dist/shifty.js:529

Set a custom schedule function.

If a custom function is not set, requestAnimationFrame is used if available, otherwise setTimeout is used.

Parameters:

  • scheduleFunction Function(Function,number)

    The function to be used to schedule the next frame to be rendered.

stop

(
  • gotoEnd
)
chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:481

Stops and cancels a tween.

Parameters:

  • gotoEnd Boolean=

    If false or omitted, the tween just stops at its current state, and the finish handler is not invoked. If true, the tweened object's values are instantly set to the target values, and finish is invoked.

tween

(
  • opt_config
)
chainable

Provided by the Tweenable module.

Defined in dist/shifty.js:285

Configure and start a tween.

Parameters:

  • opt_config Object=

    Configuration object to be passed to setConfig.

unsetBezierFunction

(
  • name
)
Function

Provided by the Tweenable module.

Defined in dist/shifty.js:981

delete an easing function from Tweenable#formula. Be careful with this method, as it deletes whatever easing formula matches name (which means you can delete standard Shifty easing functions).

Parameters:

  • name String

    The name of the easing function to delete.

Returns:

Function:

Properties

formula

Object(function)

Provided by the Tweenable module.

Defined in dist/shifty.js:566

This object contains all of the tweens available to Shifty. It is extensible - simply attach properties to the Tweenable.prototype.formula Object following the same format as linear.

pos should be a normalized number (between 0 and 1).