Constructor
new Recipe(options)
Creates a new Recipe instance with the given options.
Parameters:
Name | Type | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
options |
Object
|
|
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
Methods
add(…rest) → {Recipe}
Adds one or more spices.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
rest |
Spice
|
<repeatable> |
Instances of Spice objects. |
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.
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
If
time
is not provided, the timestamp from
performance.now()
will be used instead.
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
If
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.
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);