Rekapi src/rekapi.keyframeprops.js

KeyframeProperty

method
Kapi.KeyframeProperty()
  • @param: {Kapi.Actor}ownerActorThe Actor to which this KeyframeProperty is associated.
  • @param: {number}millisecondWhere in the animation this KeyframeProperty lives.
  • @param: {string}nameThe property's name, such as "x" or "opacity."
  • @param: {number,string}valueThe value of `name`. This is the value to animate to.
  • @param: {string=}opt_easingThe easing at which to animate to `value`. Defaults to linear.
  • @constructor:

Description

Represents an individual component of a Kapi.Actor's keyframe state. In many cases you won't need to deal with this directly, Kapi.Actor abstracts a lot of what this Object does away for you.

Example

Source

Kapi.KeyframeProperty = function (
      ownerActor, millisecond, name, value, opt_easing) {
    this.id = _.uniqueId('keyframeProperty_');
    this.ownerActor = ownerActor;
    this.millisecond = millisecond;
    this.name = name;
    this.value = value;
    this.easing = opt_easing || DEFAULT_EASING;
    this.nextProperty = null;

    return this;
  };
  var KeyframeProperty = Kapi.KeyframeProperty;

modifyWith

method
KeyframeProperty.prototype.modifyWith()
  • @param: {Object}newProperties

Description

Modify a KeyframeProperty. Any of the following are valid properties of newProperties and correspond to the formal parameters of Kapi.KeyframeProperty:

  • millisecond (number)
  • easing (string)
  • value (number,string)

Example

Source

KeyframeProperty.prototype.modifyWith = function (newProperties) {
    var modifiedProperties = {};

    _.each(['millisecond', 'easing', 'value'], function (str) {
      modifiedProperties[str] = typeof(newProperties[str]) === 'undefined' ?
          this[str] : newProperties[str];
    }, this);

    _.extend(this, modifiedProperties);
  };

linkToNext

method
KeyframeProperty.prototype.linkToNext()
  • @param: {KeyframeProperty}nextPropertyThe KeyframeProperty that immediately follows this one in an animation.

Description

Create the reference to the next KeyframeProperty in an Actor's KeyframeProperty track. Tracks are linked lists of Kapi.KeyframePropertys.

Example

Source

KeyframeProperty.prototype.linkToNext = function (nextProperty) {
    this.nextProperty = nextProperty || null;
  };

getValueAt

method
KeyframeProperty.prototype.getValueAt()
  • @param: {number}millisecondThe point in the animation to compute.
  • @return: {number}

Description

Calculate the midpoint between this Kapi.KeyframeProperty and the next Kapi.KeyframeProperty in a Kapi.Actor's Kapi.KeyframeProperty track.

Example

Source

KeyframeProperty.prototype.getValueAt = function (millisecond) {
    var fromObj = {};
    var toObj = {};
    var value;

    if (this.nextProperty) {
      fromObj[this.name] = this.value;
      toObj[this.name] = this.nextProperty.value;
      var delta = this.nextProperty.millisecond - this.millisecond;
      var interpolatedPosition = (millisecond - this.millisecond) / delta;
      value = interpolate(fromObj, toObj, interpolatedPosition,
          this.nextProperty.easing)[this.name];
    } else {
      value =  this.value;
    }

    return value;
  };

exportPropertyData

method
KeyframeProperty.prototype.exportPropertyData()
  • @return: {Object}

Description

Export a serializable Object of this Kapi.KeyframeProperty's state data.

Example

Source

KeyframeProperty.prototype.exportPropertyData = function () {
    return {
     'millisecond': this.millisecond
     ,'name': this.name
     ,'value': this.value
     ,'easing': this.easing
    };
  };

});