Spice

Spice

A Spice is the most basic animatable object which properties can be interpolated from its starting value(s) to its end value(s), using an easing function.

Constructor

new Spice(options)

Creates a new Spice instance with the given options.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Description
options Object
Name Type Attributes Description
duration number The duration of the interpolation. The time scale should be the same as the starting time and the frame() time.
delay number <optional>
 The delay time to start the interpolation.
from Object An object with key/value pairs of numeric properties to interpolate from.
to Object An object with the numeric properties to interpolate to.
easing function <optional>
 The easing function with which calculate the value of the property at a given time. You can use your custom function or a function available at paprika-tween/easing. Default is Linear.None (no easing).
render function A callback function that will be called after each render. It receives three arguments: the first being an object with the properties interpolated for the given time, the second the amount of interpolation applied from 0 to 1, and the third the instance of the current Spice.
onEnd function <optional>
 Function called when the interpolation reaches the end. It receive an argument as an object with the properties interpolated to its end values.
Example
import { Spice } from 'paprika-tween';
import { Cubic } from 'paprika-tween/easing';
const spice = new Spice({
    duration: 45,
    delay: 2,
    easing: Cubic.InOut,
    from: { size: 10 },
    to: { size: 520 },
    render: ({ size }) => {
       console.log(size);
    },
    onEnd: ({ size }) => console.log(props)
});
spice.start(0);
spice.frame(15);

Classes

Spice

Methods

dispose()

Removes the interpolatable properties of the instance and its callback functions, making the instance eligible for the garbage collector.
Since:
  • 1.0.0
Source:

frame(timeopt)

Moves the interpolation of the properties of the spice by the given time, which is relative to the starting time.
If time is not provided, the timestamp from performance.now() will be used instead.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Attributes Description
time DOMHighResTimeStamp | number <optional>
 The amount of time to interpolate since the animations started.
Example
import { Spice } from 'paprika-tween';
const spice = new Spice({
    duration: 10,
    from: { width: 100 },
    to: { width: 550 },
    render: (props) => { ... }
});
spice.start(0);
spice.frame(2);

start(timeopt)

Sets the starting time of the interpolation at the given time argument.
If time is not provided, the timestamp from performance.now() will be used instead.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Attributes Description
time DOMHighResTimeStamp | number <optional>
 The initial number from where to start the animation.
Example
import { Spice } from 'paprika-tween';
const spice = new Spice({ ... });
spice.start(5);

update(options) → {Spice}

Modifies the properties of the spice with the given object.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Description
options Object See Spice constructor for the available properties of the options object.
Returns:
Type:
Spice