shifty

shifty

Source:

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:
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:
See:

(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:
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

(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:
Parameters:
Name Type Attributes Default Description
config shifty.tweenConfig <optional>
{}
Returns:
Type:
external:Promise

(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:
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:
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:
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:
Parameters:
Name Type Description
tweenable shifty.Tweenable

The shifty.Tweenable instance.

Returns:
Type:
boolean

easingFunction(position) → {number}

Source:
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:
Type:
  • Object

scheduleFunction(callback, timeout)

Source:
Parameters:
Name Type Description
callback function
timeout number

startFunction(state, attachmentopt)

Source:
Parameters:
Name Type Attributes Description
state Object

The current state of the tween.

attachment Object <optional>

Cached data provided from a shifty.tweenConfig.

stepFunction(state, attachment, timeElapsed)

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

Source:
Parameters:
Name Type Description
state Object

The current state of the tween.

attachment Object | undefined

Cached data provided from a shifty.tweenConfig.

timeElapsed number

The time elapsed since the start of the tween.

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.

step shifty.stepFunction <optional>

Executes on every tick.

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.

attachment Object <optional>

Cached value that is passed to shifty.startFunction/shifty.stepFunction.

promise function <optional>

Promise constructor for when you want to use Promise library or polyfill Promises in unsupported environments.

Source:
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:
Parameters:
Name Type Description
tweenable shifty.Tweenable

The shifty.Tweenable instance.