CSSRenderer
methodKapi.CSSRenderer()
The CSSRenderer
module allows you to run a Rekapi animation as a CSS @keyframe
animation. Standard Rekapi animations are powered by JavaScript, but in many cases using CSS @keyframes
is smoother.
Note! This is an experimental feature. If you encounter any issues, please report them with the Rekapi issue tracker.
Advantages of playing an animation with CSS @keyframes
instead of JavaScript:
- Smoother animations in modern browsers (particularly noticeable in Webkit and mobile browsers).
- The JavaScript thread is freed from performing animation updates, resulting in more resources for other logic.
Disadvantages of CSS @keyframes
:
- No start/stop/goto control - once the animation runs, it runs from start to finish.
- Prerending animations can take a non-trivial amount of time, so you may have to be clever with how to spend the cycles to do it.
- Currently, no
Kapi
events can be bound to CSS animations.
This module requires both the toCSS
and Kapi.DOMActor
modules (they are included in the standard Rekapi distribution). Functionally, CSSRenderer
works by prerendering a CSS animation and injecting it into the DOM. You'll never have to call the CSSRenderer
constructor explicitly, that is done for you when a Rekapi instance is initialized.
An advantage of this module is that CSS animations are not always available, but JavaScript animations are. Keyframes are defined the same way, but you can choose what method of animation is appropriate at runtime:
var kapi = new Kapi();
var actor = new Kapi.DOMActor(document.getElementById('actor-1'));
kapi.addActor(actor);
actor.keyframe(0, { left: '0px' });
actor.keyframe(1000, { left: '250px' }, 'easeOutQuad');
// Feature detect for @keyframe support
if (kapi.css.canAnimateWithCSS()) {
kapi.css.play();
} else {
kapi.play();
}
Kapi.CSSRenderer = function (kapi) {
if (!Kapi.DOMActor && !Kapi.prototype.toCSS) {
throw 'CSSRenderer requires the DOMActor and toCSS modules.';
}
this.kapi = kapi;
// @private {number}
this._playTimestamp = null;
// @private {string}
this._cachedCSS = null;
// The HTMLStyleElement that gets injected into the DOM.
// @private {HTMLStyleElement)
this._styleElement = null;
// @private {number}
this._stopSetTimeoutHandle = null;
kapi.on('timelineModified', _.bind(function () {
this._cachedCSS = null;
}, this));
return this;
};
var CSSRenderer = Kapi.CSSRenderer;