Rekapi ext/dom/rekapi.dom.actor.js

DOMActor

method
Kapi.DOMActor()
  • @param: {HTMLElement}element
  • @param: {Object}opt_config
  • @constructor:

Description

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');

Source

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();

getCSSName

method
DOMActor.prototype.getCSSName()
  • @return: {string}

Description

This can be useful when used with toCSS. You might not ever need to use this directly, as the class is attached to an element when you create a Kapi.DOMActor from said element.

Source

DOMActor.prototype.getCSSName = function () {
    return 'actor-' + this.id;
  };

setTransformOrder

method
DOMActor.prototype.setTransformOrder()
  • @param: {Array}orderedFunctionsThe Array of transform function names
  • @return: {Kapi.DOMActor}

Description

Overrides the default transform function order.

Source

DOMActor.prototype.setTransformOrder = function (orderedFunctions) {
    // TODO: Document this better...
    var unknownFunctions = _.reject(orderedFunctions, isTransformFunction);

    if (unknownFunctions.length) {
      throw 'Unknown or unsupported transform functions: ' +
        unknownFunctions.join(', ');
    }
    // Ignore duplicate transform function names in the array
    this._transformOrder = _.uniq(orderedFunctions);

    return this;
  };

});