wilderness-core/cjs/keyframe.js

The SVG animation engine behind Wilderness

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _frame = require('./frame');

var _config = require('./config');

var _config2 = _interopRequireDefault(_config);

var _easingFunction = require('./easing-function');

var _easingFunction2 = _interopRequireDefault(_easingFunction);

var _transform = require('./transform');

var _transform2 = _interopRequireDefault(_transform);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/**
 * The data required to render and tween to a shape.
 *
 * @typedef {Object} Keyframe
 *
 * @property {(string|number)} name - A unique reference.
 * @property {Position} position
 * @property {FrameShape} frameShape
 * @property {Object} tween
 */

/**
 * A Keyframe array and their total duration.
 *
 * @typedef {Object} KeyframesAndDuration
 *
 * @property {Keyframe[]} keyframes
 * @property {number} duration
 */

/**
 * Converts Keyframes so each has the same
 * PointStructure and CurveStructure.
 *
 * @param {Keyframe[]} keyframes
 *
 * @returns {Keyframe[]}
 *
 * @example
 * equaliseKeyframes(keyframes)
 */
var equaliseKeyframes = function equaliseKeyframes(keyframes) {
  var pointStrucs = [];
  var k = [];
  var curveStrucs = [];
  var result = [];

  for (var i = 0, l = keyframes.length; i < l; i++) {
    pointStrucs.push((0, _frame.pointStructure)(keyframes[i].frameShape));
  }

  var pointStruc = (0, _frame.commonPointStructure)(pointStrucs);

  for (var _i = 0, _l = keyframes.length; _i < _l; _i++) {
    var keyframe = keyframes[_i];
    keyframe.frameShape = (0, _frame.applyPointStructure)(keyframe.frameShape, pointStruc);
    k.push(keyframe);
  }

  for (var _i2 = 0, _l2 = k.length; _i2 < _l2; _i2++) {
    curveStrucs.push((0, _frame.curveStructure)(k[_i2].frameShape));
  }

  var curveStruc = (0, _frame.commonCurveStructure)(curveStrucs);

  for (var _i3 = 0, _l3 = k.length; _i3 < _l3; _i3++) {
    var _keyframe = k[_i3];
    _keyframe.frameShape = (0, _frame.applyCurveStructure)(_keyframe.frameShape, curveStruc);
    result.push(_keyframe);
  }

  return result;
};

/**
 * Creates a Keyframe array from a PlainShapeObject array.
 *
 * @param {PlainShapeObject[]} plainShapeObjects
 *
 * @returns {KeyframesAndDuration}
 *
 * @example
 * keyframes([ circle, square ])
 */
var keyframesAndDuration = function keyframesAndDuration(plainShapeObjects) {
  var keyframes = [];

  for (var i = 0, l = plainShapeObjects.length; i < l; i++) {
    var _plainShapeObjects$i = plainShapeObjects[i],
        delay = _plainShapeObjects$i.delay,
        duration = _plainShapeObjects$i.duration,
        easing = _plainShapeObjects$i.easing,
        _plainShapeObjects$i$ = _plainShapeObjects$i.forces,
        forces = _plainShapeObjects$i$ === undefined ? [] : _plainShapeObjects$i$,
        name = _plainShapeObjects$i.name,
        _plainShapeObjects$i$2 = _plainShapeObjects$i.transforms,
        transforms = _plainShapeObjects$i$2 === undefined ? [] : _plainShapeObjects$i$2,
        plainShapeObject = _objectWithoutProperties(_plainShapeObjects$i, ['delay', 'duration', 'easing', 'forces', 'name', 'transforms']);

    var frameShape = (0, _frame.frameShapeFromPlainShapeObject)(plainShapeObject);

    var keyframe = {
      name: typeof name !== 'undefined' ? name : i,
      frameShape: (0, _transform2.default)(frameShape, transforms)
    };

    if (i > 0) {
      keyframe.tween = {
        duration: typeof duration !== 'undefined' ? duration : _config2.default.defaults.keyframe.duration,
        easing: (0, _easingFunction2.default)(easing || _config2.default.defaults.keyframe.easing),
        forces: forces
      };

      if (delay) {
        var previousKeyframe = keyframes[keyframes.length - 1];

        var delayKeyframe = _extends({}, previousKeyframe, {
          name: previousKeyframe.name + '.delay',
          tween: { duration: delay }
        });

        keyframes.push(delayKeyframe);
      }
    }

    keyframes.push(keyframe);
  }

  var equalisedKeyframes = equaliseKeyframes(keyframes);
  var totalDuration = keyframesTotalDuration(keyframes);

  return {
    duration: totalDuration,
    keyframes: positionKeyframes(equalisedKeyframes, totalDuration)
  };
};

/**
 * Adds the position prop to each Keyframe in a Keyframe array.
 *
 * @param {Keyframe[]} keyframes
 * @param {number} totalDuration
 *
 * @returns {Keyframe[]}
 *
 * @example
 * positionKeyframes(keyframes)
 */
var positionKeyframes = function positionKeyframes(keyframes, totalDuration) {
  var k = [];

  var durationAtKeyframe = 0;

  for (var i = 0, l = keyframes.length; i < l; i++) {
    var keyframe = keyframes[i];
    var _keyframe$tween = keyframe.tween;
    _keyframe$tween = _keyframe$tween === undefined ? {} : _keyframe$tween;
    var _keyframe$tween$durat = _keyframe$tween.duration,
        duration = _keyframe$tween$durat === undefined ? 0 : _keyframe$tween$durat;


    durationAtKeyframe += duration;

    k.push(_extends({}, keyframe, {
      position: durationAtKeyframe === 0 ? 0 : durationAtKeyframe / totalDuration
    }));
  }

  return k;
};

/**
 * Adds the tween duration of a Keyframe array.
 *
 * @param {Keyframe[]} k
 *
 * @returns {number}
 *
 * @example
 * keyframesTotalDuration(keyframes)
 */
var keyframesTotalDuration = function keyframesTotalDuration(k) {
  var currentDuration = 0;

  for (var i = 0, l = k.length; i < l; i++) {
    var _k$i$tween = k[i].tween;
    _k$i$tween = _k$i$tween === undefined ? {} : _k$i$tween;
    var _k$i$tween$duration = _k$i$tween.duration,
        duration = _k$i$tween$duration === undefined ? 0 : _k$i$tween$duration;

    currentDuration += duration;
  }

  return currentDuration;
};

exports.default = keyframesAndDuration;