@lumen5/lottie-web 5.14.0

package/player/js/animation/AnimationItem.js

@@ -0,0 +1,809 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+
+import audioControllerFactory from '../utils/audio/AudioController';
+import {
+  getSubframeEnabled,
+  BMEnterFrameEvent,
+  BMCompleteEvent,
+  BMCompleteLoopEvent,
+  BMSegmentStartEvent,
+  BMDestroyEvent,
+  BMRenderFrameErrorEvent,
+  BMConfigErrorEvent,
+  createElementID,
+  getExpressionsPlugin,
+} from '../utils/common';
+import ImagePreloader from '../utils/imagePreloader';
+import BaseEvent from '../utils/BaseEvent';
+import dataManager from '../utils/DataManager';
+import markerParser from '../utils/markers/markerParser';
+import ProjectInterface from '../utils/expressions/ProjectInterface';
+import { getRenderer, getRegisteredRenderer } from '../renderers/renderersManager';
+
+const AnimationItem = function () {
+  this._cbs = [];
+  this.name = '';
+  this.path = '';
+  this.isLoaded = false;
+  this.currentFrame = 0;
+  this.currentRawFrame = 0;
+  this.firstFrame = 0;
+  this.totalFrames = 0;
+  this.frameRate = 0;
+  this.frameMult = 0;
+  this.playSpeed = 1;
+  this.playDirection = 1;
+  this.playCount = 0;
+  this.animationData = {};
+  this.assets = [];
+  this.isPaused = true;
+  this.autoplay = false;
+  this.loop = true;
+  this.renderer = null;
+  this.animationID = createElementID();
+  this.assetsPath = '';
+  this.timeCompleted = 0;
+  this.segmentPos = 0;
+  this.isSubframeEnabled = getSubframeEnabled();
+  this.segments = [];
+  this._idle = true;
+  this._completedLoop = false;
+  this.projectInterface = ProjectInterface();
+  this.imagePreloader = new ImagePreloader();
+  this.audioController = audioControllerFactory();
+  this.markers = [];
+  this.configAnimation = this.configAnimation.bind(this);
+  this.onSetupError = this.onSetupError.bind(this);
+  this.onSegmentComplete = this.onSegmentComplete.bind(this);
+  this.drawnFrameEvent = new BMEnterFrameEvent('drawnFrame', 0, 0, 0);
+  this.expressionsPlugin = getExpressionsPlugin();
+};
+
+extendPrototype([BaseEvent], AnimationItem);
+
+AnimationItem.prototype.setParams = function (params) {
+  if (params.wrapper || params.container) {
+    this.wrapper = params.wrapper || params.container;
+  }
+  var animType = 'svg';
+  if (params.animType) {
+    animType = params.animType;
+  } else if (params.renderer) {
+    animType = params.renderer;
+  }
+  const RendererClass = getRenderer(animType);
+  this.renderer = new RendererClass(this, params.rendererSettings);
+  this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs);
+  this.renderer.setProjectInterface(this.projectInterface);
+  this.animType = animType;
+  if (params.loop === ''
+        || params.loop === null
+        || params.loop === undefined
+        || params.loop === true) {
+    this.loop = true;
+  } else if (params.loop === false) {
+    this.loop = false;
+  } else {
+    this.loop = parseInt(params.loop, 10);
+  }
+  this.autoplay = 'autoplay' in params ? params.autoplay : true;
+  this.name = params.name ? params.name : '';
+  this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, 'autoloadSegments') ? params.autoloadSegments : true;
+  this.assetsPath = params.assetsPath;
+  this.initialSegment = params.initialSegment;
+  if (params.audioFactory) {
+    this.audioController.setAudioFactory(params.audioFactory);
+  }
+  if (params.animationData) {
+    this.setupAnimation(params.animationData);
+  } else if (params.path) {
+    if (params.path.lastIndexOf('\\') !== -1) {
+      this.path = params.path.substr(0, params.path.lastIndexOf('\\') + 1);
+    } else {
+      this.path = params.path.substr(0, params.path.lastIndexOf('/') + 1);
+    }
+    this.fileName = params.path.substr(params.path.lastIndexOf('/') + 1);
+    this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf('.json'));
+    dataManager.loadAnimation(
+      params.path,
+      this.configAnimation,
+      this.onSetupError
+    );
+  }
+};
+
+AnimationItem.prototype.onSetupError = function () {
+  this.trigger('data_failed');
+};
+
+AnimationItem.prototype.setupAnimation = function (data) {
+  dataManager.completeAnimation(
+    data,
+    this.configAnimation
+  );
+};
+
+AnimationItem.prototype.setData = function (wrapper, animationData) {
+  if (animationData) {
+    if (typeof animationData !== 'object') {
+      animationData = JSON.parse(animationData);
+    }
+  }
+  var params = {
+    wrapper: wrapper,
+    animationData: animationData,
+  };
+  var wrapperAttributes = wrapper.attributes;
+
+  params.path = wrapperAttributes.getNamedItem('data-animation-path') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-animation-path').value
+    : wrapperAttributes.getNamedItem('data-bm-path') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-path').value
+      : wrapperAttributes.getNamedItem('bm-path')
+        ? wrapperAttributes.getNamedItem('bm-path').value
+        : '';
+  params.animType = wrapperAttributes.getNamedItem('data-anim-type') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-anim-type').value
+    : wrapperAttributes.getNamedItem('data-bm-type') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-type').value
+      : wrapperAttributes.getNamedItem('bm-type') // eslint-disable-line no-nested-ternary
+        ? wrapperAttributes.getNamedItem('bm-type').value
+        : wrapperAttributes.getNamedItem('data-bm-renderer') // eslint-disable-line no-nested-ternary
+          ? wrapperAttributes.getNamedItem('data-bm-renderer').value
+          : wrapperAttributes.getNamedItem('bm-renderer')
+            ? wrapperAttributes.getNamedItem('bm-renderer').value
+            : getRegisteredRenderer() || 'canvas';
+
+  var loop = wrapperAttributes.getNamedItem('data-anim-loop') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-anim-loop').value
+    : wrapperAttributes.getNamedItem('data-bm-loop') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-loop').value
+      : wrapperAttributes.getNamedItem('bm-loop')
+        ? wrapperAttributes.getNamedItem('bm-loop').value
+        : '';
+  if (loop === 'false') {
+    params.loop = false;
+  } else if (loop === 'true') {
+    params.loop = true;
+  } else if (loop !== '') {
+    params.loop = parseInt(loop, 10);
+  }
+  var autoplay = wrapperAttributes.getNamedItem('data-anim-autoplay') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-anim-autoplay').value
+    : wrapperAttributes.getNamedItem('data-bm-autoplay') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-autoplay').value
+      : wrapperAttributes.getNamedItem('bm-autoplay')
+        ? wrapperAttributes.getNamedItem('bm-autoplay').value
+        : true;
+  params.autoplay = autoplay !== 'false';
+
+  params.name = wrapperAttributes.getNamedItem('data-name') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-name').value
+    : wrapperAttributes.getNamedItem('data-bm-name') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-name').value
+      : wrapperAttributes.getNamedItem('bm-name')
+        ? wrapperAttributes.getNamedItem('bm-name').value
+        : '';
+  var prerender = wrapperAttributes.getNamedItem('data-anim-prerender') // eslint-disable-line no-nested-ternary
+    ? wrapperAttributes.getNamedItem('data-anim-prerender').value
+    : wrapperAttributes.getNamedItem('data-bm-prerender') // eslint-disable-line no-nested-ternary
+      ? wrapperAttributes.getNamedItem('data-bm-prerender').value
+      : wrapperAttributes.getNamedItem('bm-prerender')
+        ? wrapperAttributes.getNamedItem('bm-prerender').value
+        : '';
+
+  if (prerender === 'false') {
+    params.prerender = false;
+  }
+  if (!params.path) {
+    this.trigger('destroy');
+  } else {
+    this.setParams(params);
+  }
+};
+
+AnimationItem.prototype.includeLayers = function (data) {
+  if (data.op > this.animationData.op) {
+    this.animationData.op = data.op;
+    this.totalFrames = Math.floor(data.op - this.animationData.ip);
+  }
+  var layers = this.animationData.layers;
+  var i;
+  var len = layers.length;
+  var newLayers = data.layers;
+  var j;
+  var jLen = newLayers.length;
+  for (j = 0; j < jLen; j += 1) {
+    i = 0;
+    while (i < len) {
+      if (layers[i].id === newLayers[j].id) {
+        layers[i] = newLayers[j];
+        break;
+      }
+      i += 1;
+    }
+  }
+  if (data.chars || data.fonts) {
+    this.renderer.globalData.fontManager.addChars(data.chars);
+    this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs);
+  }
+  if (data.assets) {
+    len = data.assets.length;
+    for (i = 0; i < len; i += 1) {
+      this.animationData.assets.push(data.assets[i]);
+    }
+  }
+  this.animationData.__complete = false;
+  dataManager.completeAnimation(
+    this.animationData,
+    this.onSegmentComplete
+  );
+};
+
+AnimationItem.prototype.onSegmentComplete = function (data) {
+  this.animationData = data;
+  var expressionsPlugin = getExpressionsPlugin();
+  if (expressionsPlugin) {
+    expressionsPlugin.initExpressions(this);
+  }
+  this.loadNextSegment();
+};
+
+AnimationItem.prototype.loadNextSegment = function () {
+  var segments = this.animationData.segments;
+  if (!segments || segments.length === 0 || !this.autoloadSegments) {
+    this.trigger('data_ready');
+    this.timeCompleted = this.totalFrames;
+    return;
+  }
+  var segment = segments.shift();
+  this.timeCompleted = segment.time * this.frameRate;
+  var segmentPath = this.path + this.fileName + '_' + this.segmentPos + '.json';
+  this.segmentPos += 1;
+  dataManager.loadData(segmentPath, this.includeLayers.bind(this), function () {
+    this.trigger('data_failed');
+  }.bind(this));
+};
+
+AnimationItem.prototype.loadSegments = function () {
+  var segments = this.animationData.segments;
+  if (!segments) {
+    this.timeCompleted = this.totalFrames;
+  }
+  this.loadNextSegment();
+};
+
+AnimationItem.prototype.imagesLoaded = function () {
+  this.trigger('loaded_images');
+  this.checkLoaded();
+};
+
+AnimationItem.prototype.preloadImages = function () {
+  this.imagePreloader.setAssetsPath(this.assetsPath);
+  this.imagePreloader.setPath(this.path);
+  this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));
+};
+
+AnimationItem.prototype.configAnimation = function (animData) {
+  if (!this.renderer) {
+    return;
+  }
+  try {
+    this.animationData = animData;
+    if (this.initialSegment) {
+      this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]);
+      this.firstFrame = Math.round(this.initialSegment[0]);
+    } else {
+      this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
+      this.firstFrame = Math.round(this.animationData.ip);
+    }
+    this.renderer.configAnimation(animData);
+    if (!animData.assets) {
+      animData.assets = [];
+    }
+
+    this.assets = this.animationData.assets;
+    this.frameRate = this.animationData.fr;
+    this.frameMult = this.animationData.fr / 1000;
+    this.renderer.searchExtraCompositions(animData.assets);
+    this.markers = markerParser(animData.markers || []);
+    this.trigger('config_ready');
+    this.preloadImages();
+    this.loadSegments();
+    this.updaFrameModifier();
+    this.waitForFontsLoaded();
+    if (this.isPaused) {
+      this.audioController.pause();
+    }
+  } catch (error) {
+    this.triggerConfigError(error);
+  }
+};
+
+AnimationItem.prototype.waitForFontsLoaded = function () {
+  if (!this.renderer) {
+    return;
+  }
+  if (this.renderer.globalData.fontManager.isLoaded) {
+    this.checkLoaded();
+  } else {
+    setTimeout(this.waitForFontsLoaded.bind(this), 20);
+  }
+};
+
+AnimationItem.prototype.checkLoaded = function () {
+  if (!this.isLoaded
+        && this.renderer.globalData.fontManager.isLoaded
+        && (this.imagePreloader.loadedImages() || this.renderer.rendererType !== 'canvas')
+        && (this.imagePreloader.loadedFootages())
+  ) {
+    this.isLoaded = true;
+    var expressionsPlugin = getExpressionsPlugin();
+    if (expressionsPlugin) {
+      expressionsPlugin.initExpressions(this);
+    }
+    this.renderer.initItems();
+    setTimeout(function () {
+      this.trigger('DOMLoaded');
+    }.bind(this), 0);
+    this.gotoFrame();
+    if (this.autoplay) {
+      this.play();
+    }
+  }
+};
+
+AnimationItem.prototype.resize = function (width, height) {
+  // Adding this validation for backwards compatibility in case an event object was being passed down
+  var _width = typeof width === 'number' ? width : undefined;
+  var _height = typeof height === 'number' ? height : undefined;
+  this.renderer.updateContainerSize(_width, _height);
+};
+
+AnimationItem.prototype.setSubframe = function (flag) {
+  this.isSubframeEnabled = !!flag;
+};
+
+AnimationItem.prototype.gotoFrame = function () {
+  this.currentFrame = this.isSubframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame; // eslint-disable-line no-bitwise
+
+  if (this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted) {
+    this.currentFrame = this.timeCompleted;
+  }
+  this.trigger('enterFrame');
+  this.renderFrame();
+  this.trigger('drawnFrame');
+};
+
+AnimationItem.prototype.renderFrame = function () {
+  if (this.isLoaded === false || !this.renderer) {
+    return;
+  }
+  try {
+    if (this.expressionsPlugin) {
+      this.expressionsPlugin.resetFrame();
+    }
+    this.renderer.renderFrame(this.currentFrame + this.firstFrame);
+  } catch (error) {
+    this.triggerRenderFrameError(error);
+  }
+};
+
+AnimationItem.prototype.play = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  if (this.isPaused === true) {
+    this.isPaused = false;
+    this.trigger('_play');
+    this.audioController.resume();
+    if (this._idle) {
+      this._idle = false;
+      this.trigger('_active');
+    }
+  }
+};
+
+AnimationItem.prototype.pause = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  if (this.isPaused === false) {
+    this.isPaused = true;
+    this.trigger('_pause');
+    this._idle = true;
+    this.trigger('_idle');
+    this.audioController.pause();
+  }
+};
+
+AnimationItem.prototype.togglePause = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  if (this.isPaused === true) {
+    this.play();
+  } else {
+    this.pause();
+  }
+};
+
+AnimationItem.prototype.stop = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  this.pause();
+  this.playCount = 0;
+  this._completedLoop = false;
+  this.setCurrentRawFrameValue(0);
+};
+
+AnimationItem.prototype.getMarkerData = function (markerName) {
+  var marker;
+  for (var i = 0; i < this.markers.length; i += 1) {
+    marker = this.markers[i];
+    if (marker.payload && marker.payload.name === markerName) {
+      return marker;
+    }
+  }
+  return null;
+};
+
+AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  var numValue = Number(value);
+  if (isNaN(numValue)) {
+    var marker = this.getMarkerData(value);
+    if (marker) {
+      this.goToAndStop(marker.time, true);
+    }
+  } else if (isFrame) {
+    this.setCurrentRawFrameValue(value);
+  } else {
+    this.setCurrentRawFrameValue(value * this.frameModifier);
+  }
+  this.pause();
+};
+
+AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  var numValue = Number(value);
+  if (isNaN(numValue)) {
+    var marker = this.getMarkerData(value);
+    if (marker) {
+      if (!marker.duration) {
+        this.goToAndStop(marker.time, true);
+      } else {
+        this.playSegments([marker.time, marker.time + marker.duration], true);
+      }
+    }
+  } else {
+    this.goToAndStop(numValue, isFrame, name);
+  }
+  this.play();
+};
+
+AnimationItem.prototype.advanceTime = function (value) {
+  if (this.isPaused === true || this.isLoaded === false) {
+    return;
+  }
+  var nextValue = this.currentRawFrame + value * this.frameModifier;
+  var _isComplete = false;
+  // Checking if nextValue > totalFrames - 1 for addressing non looping and looping animations.
+  // If animation won't loop, it should stop at totalFrames - 1. If it will loop it should complete the last frame and then loop.
+  if (nextValue >= this.totalFrames - 1 && this.frameModifier > 0) {
+    if (!this.loop || this.playCount === this.loop) {
+      if (!this.checkSegments(nextValue > this.totalFrames ? nextValue % this.totalFrames : 0)) {
+        _isComplete = true;
+        nextValue = this.totalFrames - 1;
+      }
+    } else if (nextValue >= this.totalFrames) {
+      this.playCount += 1;
+      if (!this.checkSegments(nextValue % this.totalFrames)) {
+        this.setCurrentRawFrameValue(nextValue % this.totalFrames);
+        this._completedLoop = true;
+        this.trigger('loopComplete');
+      }
+    } else {
+      this.setCurrentRawFrameValue(nextValue);
+    }
+  } else if (nextValue < 0) {
+    if (!this.checkSegments(nextValue % this.totalFrames)) {
+      if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) { // eslint-disable-line no-plusplus
+        this.setCurrentRawFrameValue(this.totalFrames + (nextValue % this.totalFrames));
+        if (!this._completedLoop) {
+          this._completedLoop = true;
+        } else {
+          this.trigger('loopComplete');
+        }
+      } else {
+        _isComplete = true;
+        nextValue = 0;
+      }
+    }
+  } else {
+    this.setCurrentRawFrameValue(nextValue);
+  }
+  if (_isComplete) {
+    this.setCurrentRawFrameValue(nextValue);
+    this.pause();
+    this.trigger('complete');
+  }
+};
+
+AnimationItem.prototype.adjustSegment = function (arr, offset) {
+  this.playCount = 0;
+  if (arr[1] < arr[0]) {
+    if (this.frameModifier > 0) {
+      if (this.playSpeed < 0) {
+        this.setSpeed(-this.playSpeed);
+      } else {
+        this.setDirection(-1);
+      }
+    }
+    this.totalFrames = arr[0] - arr[1];
+    this.timeCompleted = this.totalFrames;
+    this.firstFrame = arr[1];
+    this.setCurrentRawFrameValue(this.totalFrames - 0.001 - offset);
+  } else if (arr[1] > arr[0]) {
+    if (this.frameModifier < 0) {
+      if (this.playSpeed < 0) {
+        this.setSpeed(-this.playSpeed);
+      } else {
+        this.setDirection(1);
+      }
+    }
+    this.totalFrames = arr[1] - arr[0];
+    this.timeCompleted = this.totalFrames;
+    this.firstFrame = arr[0];
+    this.setCurrentRawFrameValue(0.001 + offset);
+  }
+  this.trigger('segmentStart');
+};
+AnimationItem.prototype.setSegment = function (init, end) {
+  var pendingFrame = -1;
+  if (this.isPaused) {
+    if (this.currentRawFrame + this.firstFrame < init) {
+      pendingFrame = init;
+    } else if (this.currentRawFrame + this.firstFrame > end) {
+      pendingFrame = end - init;
+    }
+  }
+
+  this.firstFrame = init;
+  this.totalFrames = end - init;
+  this.timeCompleted = this.totalFrames;
+  if (pendingFrame !== -1) {
+    this.goToAndStop(pendingFrame, true);
+  }
+};
+
+AnimationItem.prototype.playSegments = function (arr, forceFlag) {
+  if (forceFlag) {
+    this.segments.length = 0;
+  }
+  if (typeof arr[0] === 'object') {
+    var i;
+    var len = arr.length;
+    for (i = 0; i < len; i += 1) {
+      this.segments.push(arr[i]);
+    }
+  } else {
+    this.segments.push(arr);
+  }
+  if (this.segments.length && forceFlag) {
+    this.adjustSegment(this.segments.shift(), 0);
+  }
+  if (this.isPaused) {
+    this.play();
+  }
+};
+
+AnimationItem.prototype.resetSegments = function (forceFlag) {
+  this.segments.length = 0;
+  this.segments.push([this.animationData.ip, this.animationData.op]);
+  if (forceFlag) {
+    this.checkSegments(0);
+  }
+};
+AnimationItem.prototype.checkSegments = function (offset) {
+  if (this.segments.length) {
+    this.adjustSegment(this.segments.shift(), offset);
+    return true;
+  }
+  return false;
+};
+
+AnimationItem.prototype.destroy = function (name) {
+  if ((name && this.name !== name) || !this.renderer) {
+    return;
+  }
+  this.renderer.destroy();
+  this.imagePreloader.destroy();
+  this.trigger('destroy');
+  this._cbs = null;
+  this.onEnterFrame = null;
+  this.onLoopComplete = null;
+  this.onComplete = null;
+  this.onSegmentStart = null;
+  this.onDestroy = null;
+  this.renderer = null;
+  this.expressionsPlugin = null;
+  this.imagePreloader = null;
+  this.projectInterface = null;
+};
+
+AnimationItem.prototype.setCurrentRawFrameValue = function (value) {
+  this.currentRawFrame = value;
+  this.gotoFrame();
+};
+
+AnimationItem.prototype.setSpeed = function (val) {
+  this.playSpeed = val;
+  this.updaFrameModifier();
+};
+
+AnimationItem.prototype.setDirection = function (val) {
+  this.playDirection = val < 0 ? -1 : 1;
+  this.updaFrameModifier();
+};
+
+AnimationItem.prototype.setLoop = function (isLooping) {
+  this.loop = isLooping;
+};
+
+AnimationItem.prototype.setVolume = function (val, name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  this.audioController.setVolume(val);
+};
+
+AnimationItem.prototype.getVolume = function () {
+  return this.audioController.getVolume();
+};
+
+AnimationItem.prototype.mute = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  this.audioController.mute();
+};
+
+AnimationItem.prototype.unmute = function (name) {
+  if (name && this.name !== name) {
+    return;
+  }
+  this.audioController.unmute();
+};
+
+AnimationItem.prototype.updaFrameModifier = function () {
+  this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
+  this.audioController.setRate(this.playSpeed * this.playDirection);
+};
+
+AnimationItem.prototype.getPath = function () {
+  return this.path;
+};
+
+AnimationItem.prototype.getAssetsPath = function (assetData) {
+  var path = '';
+  if (assetData.e) {
+    path = assetData.p;
+  } else if (this.assetsPath) {
+    var imagePath = assetData.p;
+    if (imagePath.indexOf('images/') !== -1) {
+      imagePath = imagePath.split('/')[1];
+    }
+    path = this.assetsPath + imagePath;
+  } else {
+    path = this.path;
+    path += assetData.u ? assetData.u : '';
+    path += assetData.p;
+  }
+  return path;
+};
+
+AnimationItem.prototype.getAssetData = function (id) {
+  var i = 0;
+  var len = this.assets.length;
+  while (i < len) {
+    if (id === this.assets[i].id) {
+      return this.assets[i];
+    }
+    i += 1;
+  }
+  return null;
+};
+
+AnimationItem.prototype.hide = function () {
+  this.renderer.hide();
+};
+
+AnimationItem.prototype.show = function () {
+  this.renderer.show();
+};
+
+AnimationItem.prototype.getDuration = function (isFrame) {
+  return isFrame ? this.totalFrames : this.totalFrames / this.frameRate;
+};
+
+AnimationItem.prototype.updateDocumentData = function (path, documentData, index) {
+  try {
+    var element = this.renderer.getElementByPath(path);
+    element.updateDocumentData(documentData, index);
+  } catch (error) {
+    // TODO: decide how to handle catch case
+  }
+};
+
+AnimationItem.prototype.trigger = function (name) {
+  if (this._cbs && this._cbs[name]) {
+    switch (name) {
+      case 'enterFrame':
+        this.triggerEvent(name, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameModifier));
+        break;
+      case 'drawnFrame':
+        this.drawnFrameEvent.currentTime = this.currentFrame;
+        this.drawnFrameEvent.totalTime = this.totalFrames;
+        this.drawnFrameEvent.direction = this.frameModifier;
+        this.triggerEvent(name, this.drawnFrameEvent);
+        break;
+      case 'loopComplete':
+        this.triggerEvent(name, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
+        break;
+      case 'complete':
+        this.triggerEvent(name, new BMCompleteEvent(name, this.frameMult));
+        break;
+      case 'segmentStart':
+        this.triggerEvent(name, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
+        break;
+      case 'destroy':
+        this.triggerEvent(name, new BMDestroyEvent(name, this));
+        break;
+      default:
+        this.triggerEvent(name);
+    }
+  }
+  if (name === 'enterFrame' && this.onEnterFrame) {
+    this.onEnterFrame.call(this, new BMEnterFrameEvent(name, this.currentFrame, this.totalFrames, this.frameMult));
+  }
+  if (name === 'loopComplete' && this.onLoopComplete) {
+    this.onLoopComplete.call(this, new BMCompleteLoopEvent(name, this.loop, this.playCount, this.frameMult));
+  }
+  if (name === 'complete' && this.onComplete) {
+    this.onComplete.call(this, new BMCompleteEvent(name, this.frameMult));
+  }
+  if (name === 'segmentStart' && this.onSegmentStart) {
+    this.onSegmentStart.call(this, new BMSegmentStartEvent(name, this.firstFrame, this.totalFrames));
+  }
+  if (name === 'destroy' && this.onDestroy) {
+    this.onDestroy.call(this, new BMDestroyEvent(name, this));
+  }
+};
+
+AnimationItem.prototype.triggerRenderFrameError = function (nativeError) {
+  var error = new BMRenderFrameErrorEvent(nativeError, this.currentFrame);
+  this.triggerEvent('error', error);
+
+  if (this.onError) {
+    this.onError.call(this, error);
+  }
+};
+
+AnimationItem.prototype.triggerConfigError = function (nativeError) {
+  var error = new BMConfigErrorEvent(nativeError, this.currentFrame);
+  this.triggerEvent('error', error);
+
+  if (this.onError) {
+    this.onError.call(this, error);
+  }
+};
+
+export default AnimationItem;