Mixer

Mixer

A Mixer is an object which can hold different spices or recipes that will be animated at the same time.

Note that a Mixer instance does not play the animation by itself. Its method frame() must be called in order to execute the interpolations of each animatable object, with methods like requestAnimationFrame() or an instance of the Mortar class.

Constructor

new Mixer()

Creates a new Mixer instance.
Since:
  • 1.0.0
Source:
Example
import { Mixer, Spice } from 'paprika-tween';
const spice = new Spice({
    duration: 1000,
    from: { x: 0, y: 42 },
    to: { x: 200, y: 120 },
    render: (props, interpolation) => {
       console.log(props.x, props.y, interpolation);
    }
});
const mixer = new Mixer();
mixer.add(spice)
     .start();
function loop(timestamp) {
    mixer.frame(timestamp);
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Classes

Mixer

Methods

add(…rest) → {Mixer}

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

dispose()

Stops all animations and clears the stack of animatable objects.
Since:
  • 1.0.0
Source:

frame(timeopt)

Moves the interpolation of the properties of the animatable objects in the mixer 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 { Mixer, Spice } from 'paprika-tween';
const spice = new Spice({
    duration: 10,
    from: { width: 100 },
    to: { width: 550 },
    render: (props) => { ... }
});
const mixer = new Mixer(0);
mixer.add(spice)
     .start();
mixer.frame(1);

start(timeopt) → {Mixer}

Starts all the animations in the mixer by setting the starting time of each animatable objects 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.
Returns:
Type:
Mixer
- The current instance of the Mixer.
Example
import { Mixer } from 'paprika-tween';
const mixer = new Mixer();
mixer.start(0);