DOMActor
methodKapi.DOMActor()
Kapi.DOMActor
is a subclass of Kapi.Actor
. Please note that Kapi.DOMActor
accepts opt_config
as the second parameter, not the first. Instantiate a Kapi.DOMActor
with an HTMLElement
, and then add it to the animation:
var kapi = new Kapi();
var actor = new Kapi.DOMActor(document.getElementById('actor'));
kapi.addActor(actor);
Now you can keyframe actor
like you would any Actor.
actor
.keyframe(0, {
'left': '0px'
,'top': '0px'
})
.keyframe(1500, {
'left': '200px'
,'top': '200px'
}, 'easeOutExpo');
kapi.play();
Transforms
Kapi.DOMActor
supports CSS3 transforms as keyframe properties. Here's an example:
actor
.keyframe(0, {
'translateX': '0px'
,'translateY': '0px'
,'rotate': '0deg'
})
.keyframe(1500, {
'translateX': '200px'
,'translateY': '200px'
,'rotate': '90deg'
}, 'easeOutExpo');
The list of supported transforms is: translateX
, translateY
, scale
, scaleX
, scaleY
, rotate
, skewX
, skewY
.
Internally, this builds a CSS3 transform
rule that gets applied to the Kapi.DOMActor
's DOM node on each animation update.
Typically, when writing a transform
rule, it is necessary to write the same rule multiple times, in order to support the vendor prefixes for all of the browser rendering engines. Kapi.DOMActor
takes care of the cross browser inconsistencies for you.
You can also use the transform
property directly:
actor
.keyframe(0, {
'transform': 'translateX(0px) translateY(0px) rotate(0deg)'
})
.keyframe(1500, {
'transform': 'translateX(200px) translateY(200px) rotate(90deg)'
}, 'easeOutExpo');
Kapi.DOMActor = function (element, opt_config) {
Kapi.Actor.call(this, opt_config);
this._context = element;
var className = this.getCSSName();
// Add the class if it's not already there.
// Using className instead of classList to make IE happy.
if (!this._context.className.match(className)) {
this._context.className += ' ' + className;
}
this._transformOrder = transformFunctions.slice(0);
// Remove the instance's update method to allow the DOMActor.prototype
// methods to be accessible.
delete this.update;
delete this.teardown;
return this;
};
var DOMActor = Kapi.DOMActor;
function DOMActorMethods () {}
DOMActorMethods.prototype = Kapi.Actor.prototype;
DOMActor.prototype = new DOMActorMethods();