ae-temporal-to-cubic-ease

ae-temporal-to-cubic-ease

This module is heavily inspired by bodymovin's ease conversions.

ae-temporal-to-cubic-ease will convert keyframe temporal (or time based) ease data exported from ae-to-json to a cubic ease equation definition.

Usage

In the following example an JSON file which is exported via the ae-to-json module is passed to ae-temporal-to-cubic-ease and when a keyframe is encountered with easing a cubic bezier curve defintion which defines an an ease is added to it:

var exportFromAEtoJSON = require('export-from-ae-to-json.json');

var aeTemporalToCubicEase = require('ae-temporal-to-cubic-ease');

var exportWithCubicEaseOutAdded = aeTemporalToCubicEase(exportFromAEtoJSON);

An example export-

Note in the following examples a keyframe is defined as an Array with 3 elements where:

• The first element contains the time of the keyframe
• The second element contains the value of the keyframe
• The third element contains the easing (spatial and temporal) information

Original JSON defining a keyframe:

[
  0,
  [
    200,
    1258,
    1290
  ],
  {
    "easeIn": {
      "type": "linear",
      "temporalEase": [
        {
          "speed": 0,
          "influence": 16.666666667
        }
      ],
      "spatialTangent": [
        0,
        156.33332824707,
        215
      ]
    },
    "easeOut": {
      "type": "linear",
      "temporalEase": [
        {
          "speed": 5601.95746770307,
          "influence": 16.666666667
        }
      ],
      "spatialTangent": [
        0,
        -71.9056625366211,
        -98.8894424438477
      ]
    }
  }
]

After running through ae-temporal-to-cubic-ease:

[
  0,
  [
    200,
    1258,
    1290
  ],
  {
    "easeIn": {
      "type": "linear",
      "temporalEase": [
        {
          "speed": 0,
          "influence": 16.666666667
        }
      ],
      "spatialTangent": [
        0,
        156.33332824707,
        215
      ]
    },
    "easeOut": {
      "type": "linear",
      "temporalEase": [
        {
          "speed": 5601.95746770307,
          "influence": 16.666666667
        }
      ],
      "spatialTangent": [
        0,
        -71.9056625366211,
        -98.8894424438477
      ]
    },
    "easeOutCubic": {
      "temporalEase": [
        0.8333333333299999,
        1,
        0.16666666667000002,
        0.1791413564363114
      ]
    }
  }
]

After running through this module a variable easeOutCubic is added to ease definition with a variable which defines temporal/time based easing as a cubic curve. (the same way that CSS ease curves would for instance)

License

MIT, see LICENSE.md for details.