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.

isabella232 / ae-temporal-to-cubic-ease Goto Github PK