Recipe

Recipe

A Recipe object can contain any number of spices which will be interpolated sequentially, this is, one after another.

Constructor

new Recipe(options)

Creates a new Recipe instance with the given options.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Description
options Object
Name Type Attributes Description
onEnd function <optional>
 Function called when the last Spice reaches the end of the interpolation. It receives the current instance as an argument.
Example
import { Mixer, Recipe, Spice } from 'paprika-tween';
const spice1 = new Spice({ ... });
const spice2 = new Spice({ ... });
const recipe = new Recipe({ onEnd: () => cancelAnimationFrame(rafID) });
recipe.add(spice1, spice2);
const mixer = new Mixer();
mixer.add(recipe)
     .start();
function loop(timestamp) {
    mixer.frame(timestamp);
    rafID = requestAnimationFrame(loop);
}
let rafID = requestAnimationFrame(loop);

Classes

Recipe

Methods

add(…rest) → {Recipe}

Adds one or more spices.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Attributes Description
rest Spice <repeatable>
 Instances of Spice objects.
Returns:
Type:
Recipe
- The current instance of the Recipe.
Example
import { Recipe, Spice } from 'paprika-tween';
const spice1 = new Spice({ ... });
const spice2 = new Spice({ ... });
new Recipe().add(spice1, spice2);

dispose()

Disposes the spices in the recipe and removes 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 active spice in the recipe 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 { Recipe, Spice } from 'paprika-tween';
const spice1 = new Spice({
    ...,
    duration: 1700
});
const spice2 = new Spice({
    ...,
    duration: 2000
});
const recipe = new Recipe().add(spice1, spice2)
      .start();
recipe.frame(performance.now() + 1800);

start(timeopt)

Sets the starting time at the time argument. The first animatable object in the Recipe will start at this 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 initial number from where to start the animation.
Example
import { Recipe } from 'paprika-tween';
const recipe = new Recipe();
recipe.start(1000);