Mortar

Mortar

The Mortar class will call the callback function at the given frame rate defined by the fps argument (frames per second or times per second).
Mortar can be used to perform an animation through a Mixer, Spice or Recipe by calling its frame() method as the callback function. The interpolations will be updated before the next repaint.

It tries to honors the given fps value, so consecutive calls to the callback function will run at the same speed regardless on the performance of the device or the refresh rate of the screen. However, to ensure a consistent animation, be sure to use the delta argument passed to the callback function to calculate how much the animation will progress in a frame.

Constructor

new Mortar(cbopt, fpsopt)

Creates a new instance of the Mortar object.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Attributes Default Description
cb function <optional>
 The function to be called at the given frame rate. It receives two arguments: the time since it started, and the elapsed time since the previous frame (or delta time).
fps Number <optional>
 60 The integer number of times to call the callback function per second (frames per second). Number must be an integer.
Example
import { Mixer, Spice, Mortar } from 'paprika-tween';
const spice = new Spice({
    duration: 5000,
    from: { scale: 1 },
    to: { scale: 2.5 },
    render: (props, interpolation) => { ... }
});
const mixer = new Mixer();
mixer.add(spice)
     .start();
const mortar = new Mortar((time) => mixer.frame(time));
mortar.start();

Classes

Mortar

Members

running :Boolean

Returns whether the instance is running or not.
Source:
Type:
  • Boolean

time :DOMHighResTimeStamp

Returns the time since the Mortar started.
Source:
Type:
  • DOMHighResTimeStamp

Methods

frame()

The frame() method is called before the browser performs the next repaint, then it calls the callback function. Mortar will ensure that the callback function is called no more than fps number of times per second.
To keep the same speed in your animation, Be sure to use the delta argument to calculate how much the animation will progress in a frame.
Since:
  • 1.0.0
Source:
Example
import { Mortar } from 'paprika-tween';
function loop(time, delta) {
    character.left += character.speed * delta;
}
const mortar = new Mortar(loop, 10);
mortar.start();

pause()

Pauses the frame-by-frame loop.
Since:
  • 1.0.0
Source:

resume()

Resumes the frame-by-frame loop.
Since:
  • 1.0.0
Source:

start()

Starts the frame-by-frame loop by internally calling to requestAnimationFrame(). The callback function will be called the fps number of times per second.
Since:
  • 1.0.0
Source:

stop()

Stops the frame-by-frame loop and removes the callback function. Further calls to Mortar#start will fail.
Since:
  • 1.0.0
Source: