main.js

  1. /**
  2.  * @namespace rekapi
  3.  */
  5. /**
  6.  * Either the name of an [easing
  7.  * curve](https://jeremyckahn.github.io/shifty/doc/Tweenable.html#.formulas) or
  8.  * an array of four `number`s (`[x1, y1, x2, y2]`) that represent the points of
  9.  * a [Bezier curve](https://cubic-bezier.com/).
  10.  * @typedef rekapi.easingOption
  11.  * @type {string|Array.<number>}
  12.  * @see {@link https://jeremyckahn.github.io/shifty/doc/tutorial-easing-function-in-depth.html}
  13.  */
  15. /**
  16.  * An Object that provides utilities for rendering a {@link rekapi.Actor}.
  17.  * @typedef {Object} rekapi.renderer
  18.  * @property {rekapi.render} render A function that renders a {@link
  19.  * rekapi.Actor}.
  20.  */
  22. /**
  23.  * @typedef {Object} rekapi.propertyData
  24.  * @property {number|string} value
  25.  * @property {number} millisecond
  26.  * @property {string} easing
  27.  * @property {string} name
  28.  * @property {string|undefined} id
  29.  */
  31. /**
  32.  * @typedef {Object} rekapi.actorData
  33.  * @property {Array.<string>} trackNames The values of this array must
  34.  * correspond 1:1 to the key names in `propertyTracks`.
  35.  * @property {Object.<Array.<rekapi.propertyData>>} propertyTracks
  36.  * @property {number} end
  37.  * @property {number} start
  38.  * @property {string|undefined} id
  39.  */
  41. /**
  42.  * The properties of this object are used as arguments provided to
  43.  * [`shifty.setBezierFunction`](http://jeremyckahn.github.io/shifty/doc/shifty.html#.setBezierFunction).
  44.  * @typedef {Object} rekapi.curveData
  45.  * @property {number} x1
  46.  * @property {number} x2
  47.  * @property {number} y1
  48.  * @property {number} y2
  49.  * @property {string} displayName
  50.  */
  52. /**
  53.  * The `JSON.stringify`-friendly data format for serializing a Rekapi
  54.  * animation.
  55.  * @typedef {Object} rekapi.timelineData
  56.  * @property {Array.<rekapi.actorData>} actors
  57.  * @property {Object.<rekapi.curveData>} curves
  58.  * @property {number} duration
  59.  */
  61. /**
  62.  * A function that is called when an event is fired.  See the events listed
  63.  * below for details on the types of events that Rekapi supports.
  64.  * @callback rekapi.eventHandler
  65.  * @param {rekapi.Rekapi} rekapi A {@link rekapi.Rekapi} instance.
  66.  * @param {Object} data Data provided from the event (see {@link
  67.  * rekapi.Rekapi#on} for details).
  68.  */
  70. /**
  71.  * A function that gets called every time the actor's state is updated (once
  72.  * every frame). This function should do something meaningful with the state of
  73.  * the actor (for example, visually rendering to the screen).
  74.  * @callback rekapi.render
  75.  * @param {Object} context An actor's {@link rekapi.Actor#context} Object.
  76.  * @param {Object} state An actor's current state properties.
  77.  */
  79. /**
  80.  * @callback rekapi.keyframeFunction
  81.  * @param {rekapi.Actor} actor The {@link rekapi.Actor} to which this
  82.  * {@link rekapi.keyframeFunction} was provided.
  83.  * @param {number} drift A number that represents the delay between when the
  84.  * function is called and when it was scheduled. There is typically some amount
  85.  * of delay due to the nature of JavaScript timers.
  86.  */
  88. /**
  89.  * @callback rekapi.actorSortFunction
  90.  * @param {rekapi.Actor} actor A {@link rekapi.Actor} that should expose a
  91.  * `number` value to sort by.
  92.  * @return {number}
  93.  */
  95. /**
  96.  * Fires when all animation loops have completed.
  97.  * @event rekapi.animationComplete
  98.  */
  99. /**
  100.  * Fires when the animation is played, paused, or stopped.
  101.  * @event rekapi.playStateChange
  102.  */
  103. /**
  104.  * Fires when the animation is {@link rekapi.Rekapi#play}ed.
  105.  * @event rekapi.play
  106.  */
  107. /**
  108.  * Fires when the animation is {@link rekapi.Rekapi#pause}d.
  109.  * @event rekapi.pause
  110.  */
  111. /**
  112.  * Fires when the animation is {@link rekapi.Rekapi#stop}ped.
  113.  * @event rekapi.stop
  114.  */
  115. /**
  116.  * Fires each frame before all actors are rendered.
  117.  * @event rekapi.beforeUpdate
  118.  */
  119. /**
  120.  * Fires each frame after all actors are rendered.
  121.  * @event rekapi.afterUpdate
  122.  */
  123. /**
  124.  * @event rekapi.addActor
  125.  * @param {rekapi.Actor} actor The {@link rekapi.Actor} that was added.
  126.  */
  127. /**
  128.  * @event rekapi.removeActor
  129.  * @param {rekapi.Actor} actor The {@link rekapi.Actor} that was removed.
  130.  */
  131. /**
  132.  * Fires just before the point where a {@link rekapi.KeyframeProperty} is added
  133.  * to the timeline.  This event is called before any modifications to the
  134.  * timeline are done.
  135.  * @event rekapi.beforeAddKeyframeProperty
  136.  */
  137. /**
  138.  * @event rekapi.addKeyframeProperty
  139.  * @param {rekapi.KeyframeProperty} keyframeProperty The {@link
  140.  * rekapi.KeyframeProperty} that was added.
  141.  */
  142. /**
  143.  * Fires just before the point where a {@link rekapi.KeyframeProperty} is
  144.  * removed.  This event is called before any modifications to the timeline are
  145.  * done.
  146.  * @event rekapi.beforeRemoveKeyframeProperty
  147.  */
  148. /**
  149.  * Fires when a {@link rekapi.KeyframeProperty} is removed.  This event is
  150.  * fired _before_ the internal state of the keyframe (but not the timeline, in
  151.  * contrast to {@link rekapi.event:beforeRemoveKeyframeProperty}) has been
  152.  * updated to reflect the keyframe property removal (this is in contrast to
  153.  * {@link rekapi.event:removeKeyframePropertyComplete}).
  154.  * @event rekapi.removeKeyframeProperty
  155.  * @param {rekapi.KeyframeProperty} keyframeProperty The {@link
  156.  * rekapi.KeyframeProperty} that was removed.
  157.  */
  158. /**
  159.  * Fires when a {@link rekapi.KeyframeProperty} has finished being removed from
  160.  * the timeline.  Unlike {@link rekapi.event:removeKeyframeProperty}, this is
  161.  * fired _after_ the internal state of Rekapi has been updated to reflect the
  162.  * removal of the keyframe property.
  163.  * @event rekapi.removeKeyframePropertyComplete
  164.  * @param {rekapi.KeyframeProperty} keyframeProperty The {@link
  165.  * rekapi.KeyframeProperty} that was removed.
  166.  */
  167. /**
  168.  * Fires when the a keyframe is added to an actor that creates a new keyframe
  169.  * property track.
  170.  * @event rekapi.addKeyframePropertyTrack
  171.  * @param {rekapi.KeyframeProperty} keyframeProperty The {@link
  172.  * rekapi.KeyframeProperty} that was added to create the property track.
  173.  */
  174. /**
  175.  * Fires when the last keyframe property in an actor's keyframe property track
  176.  * is removed.  Rekapi automatically removes property tracks when they are
  177.  * emptied out, which causes this event to be fired.
  178.  * @event rekapi.removeKeyframePropertyTrack
  179.  * @param {string} trackName name of the track that was removed.
  180.  */
  181. /**
  182.  * Fires when a keyframe is added, modified or removed.
  183.  * @event rekapi.timelineModified
  184.  */
  185. /**
  186.  * Fires when an animation loop ends and a new one begins.
  187.  * @event rekapi.animationLooped
  188.  */
  190. export { Rekapi } from './rekapi';
  191. export { Actor } from './actor';
  192. export { KeyframeProperty } from './keyframe-property';
  193. export { CanvasRenderer } from './renderers/canvas';
  194. export { DOMRenderer } from './renderers/dom';