shifty - Documentation

Source:

index.js, line 1

Classes

Scene
Tweenable

Methods

(static) interpolate(from, to, position, easing, delayopt) → {Object}

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

import { interpolate } from 'shifty';

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

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

Source:

interpolate.js, line 9

Parameters:

Name	Type	Attributes	Default	Description
`from`	`Object`			The starting values to tween from.
`to`	`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\|shifty.easingFunction)>` \| `string` \| `shifty.easingFunction`			The easing curve(s) to calculate the midpoint against. You can reference any easing function attached to `shifty.Tweenable.formulas`, or provide the `shifty.easingFunction`(s) directly. If omitted, this defaults to "linear".
`delay`	`number`	<optional>	0	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 + delay`). So, a delay of `0.5` would increase all valid values of `position` to numbers between `0` and `1.5`.

Returns:

Type:: Object

(static) processTweens()

Process all tweens currently managed by Shifty for the current tick. This does not perform any timing or update scheduling; it is the logic that is run by the scheduling functionality. Specifically, it computes the state and calls all of the relevant shifty.tweenConfig functions supplied to each of the tweens for the current point in time (as determined by shifty.Tweenable.now.

This is a low-level API that won't be needed in the majority of situations. It is primarily useful as a hook for higher-level animation systems that are built on top of Shifty. If you need this function, it is likely you need to pass something like () => {} to shifty.Tweenable.setScheduleFunction, override shifty.Tweenable.now and manage the scheduling logic yourself.

Source:

tweenable.js, line 140

See:

https://github.com/jeremyckahn/shifty/issues/109

(static) setBezierFunction(name, x1, y1, x2, y2) → {shifty.easingFunction}

Create a Bezier easing function and attach it to shifty.Tweenable.formulas. 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.

Source:

bezier.js, line 153

Parameters:

Name	Type	Description
`name`	`string`	The name of the easing curve. Overwrites the old easing function on `shifty.Tweenable.formulas` if it exists.
`x1`	`number`
`y1`	`number`
`x2`	`number`
`y2`	`number`

Returns:

Type:: shifty.easingFunction

The shifty.easingFunction that was attached to shifty.Tweenable.formulas.

(static) tween(configopt) → {external:Promise}

Standalone convenience method that functions identically to shifty.Tweenable#tween. You can use this to create tweens without needing to set up a shifty.Tweenable instance.

import { tween } from 'shifty';

tween({ from: { x: 0 }, to: { x: 10 } }).then(
  () => console.log('All done!')
);

Source:

tweenable.js, line 649

Parameters:

Name	Type	Attributes	Default	Description
`config`	`shifty.tweenConfig`	<optional>	{}

Returns:

Type:: external:Promise

This Promise has a property called tweenable that is the shifty.Tweenable instance that is running the tween.

(static) unsetBezierFunction(name) → {boolean}

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

Source:

bezier.js, line 180

Parameters:

Name	Type	Description
`name`	`string`	The name of the easing function to delete.

Returns:

Type:: boolean

Whether or not the functions was deleted.

Type Definitions

afterTweenFilter(tweenable)

Is called right after a tween is processed in a tick.

Source:

index.js, line 105

Parameters:

Name	Type	Description
`tweenable`	`shifty.Tweenable`	The `shifty.Tweenable` instance.

beforeTweenFilter(tweenable)

Is called right before a tween is processed in a tick.

Source:

index.js, line 99

Parameters:

Name	Type	Description
`tweenable`	`shifty.Tweenable`	The `shifty.Tweenable` instance.

doesApplyFilter(tweenable) → {boolean}

Is called when a tween is created to determine if a filter is needed. Filters are only added to a tween when it is created so that they are not unnecessarily processed if they don't apply during an update tick.

Source:

index.js, line 82

Parameters:

Name	Type	Description
`tweenable`	`shifty.Tweenable`	The `shifty.Tweenable` instance.

Returns:

Type:: boolean

easingFunction(position) → {number}

Source:

index.js, line 20

Parameters:

Name	Type	Description
`position`	`number`	The normalized (0-1) position of the tween.

Returns:

Type:: number

The curve-adjusted value.

filter

An Object that contains functions that are called at key points in a tween's lifecycle. Shifty can only process Numbers internally, but filters can expand support for any type of data. This is the mechanism that powers string interpolation.

Properties:

Name	Type	Description
`doesApply`	`shifty.doesApplyFilter`	Is called when a tween is created.
`tweenCreated`	`shifty.tweenCreatedFilter`	Is called when a tween is created.
`beforeTween`	`shifty.beforeTweenFilter`	Is called right before a tween starts.
`afterTween`	`shifty.afterTweenFilter`	Is called right after a tween ends.

Source:

index.js, line 111

Type:

Object

promisedData

Properties:

Name	Type	Description
`state`	`Object`	The current state of the tween.
`data`	`Object`	The `data` Object that the tween was configured with.
`tweenable`	`shifty.Tweenable`	The `shifty.Tweenable` instance to which the tween belonged.

Source:

index.js, line 74

Type:

Object

renderFunction(state, dataopt, timeElapsed)

Gets called for every tick of the tween. This function is not called on the final tick of the animation.

Source:

index.js, line 33

Parameters:

Name	Type	Attributes	Description
`state`	`Object`		The current state of the tween.
`data`	`Object` \| `undefined`	<optional>	User-defined data provided via a `shifty.tweenConfig`.
`timeElapsed`	`number`		The time elapsed since the start of the tween.

scheduleFunction(callback, timeout)

Source:

index.js, line 43

Parameters:

Name	Type	Description
`callback`	`function`
`timeout`	`number`

startFunction(state, dataopt)

Source:

index.js, line 26

Parameters:

Name	Type	Attributes	Description
`state`	`Object`		The current state of the tween.
`data`	`Object` \| `undefined`	<optional>	User-defined data provided via a `shifty.tweenConfig`.

tweenConfig

Properties:

Name	Type	Attributes	Description
`from`	`Object`	<optional>	Starting position. If omitted, `shifty.Tweenable#get` is used.
`to`	`Object`	<optional>	Ending position. The keys of this Object should match those of `to`.
`duration`	`number`	<optional>	How many milliseconds to animate for.
`delay`	`number`	<optional>	How many milliseconds to wait before starting the tween.
`start`	`shifty.startFunction`	<optional>	Executes when the tween begins.
`render`	`shifty.renderFunction`	<optional>	Executes on every tick. Legacy property name: `step`.
`easing`	`Object.<(string\|shifty.easingFunction)>` \| `string` \| `shifty.easingFunction`	<optional>	Easing curve name(s) or `shifty.easingFunction`(s) to apply to the properties of the tween. If this is an Object, the keys should correspond to `to`/`from`. You can learn more about this in the Easing Curves in Depth tutorial.
`data`	`Object`	<optional>	Data that is passed to `shifty.startFunction`, `shifty.renderFunction`, and `shifty.promisedData`. Legacy property name: `attachment`.
`promise`	`function`	<optional>	Promise constructor for when you want to use Promise library or polyfill Promises in unsupported environments.

Source:

index.js, line 49

Type:

Object

tweenCreatedFilter(tweenable)

Is called when a tween is created. This should perform any setup needed by subsequent per-tick calls to shifty.beforeTween and shifty.afterTween.

Source:

index.js, line 91

Parameters:

Name	Type	Description
`tweenable`	`shifty.Tweenable`	The `shifty.Tweenable` instance.