@lumen5/lottie-web 5.14.0

package/player/js/animation/AnimationItemWorkerOverride.js

@@ -0,0 +1,157 @@
+import AnimationItem from './AnimationItem';
+import CanvasRenderer from '../renderers/CanvasRenderer';
+import dataManager from '../utils/DataManager';
+import {
+  getExpressionsPlugin,
+} from '../utils/common';
+
+AnimationItem.prototype.setParams = function (params) {
+  if (params.context) {
+    this.context = params.context;
+  }
+  var animType = 'svg';
+  if (params.animType) {
+    animType = params.animType;
+  } else if (params.renderer) {
+    animType = params.renderer;
+  }
+  switch (animType) {
+    case 'canvas':
+      this.renderer = new CanvasRenderer(this, params.rendererSettings);
+      break;
+    default:
+      throw new Error('Only canvas renderer is supported when using worker.');
+  }
+  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 = null;
+  if (params.animationData) {
+    dataManager.completeAnimation(
+      params.animationData,
+      this.configAnimation
+    );
+  } else if (params.path) {
+    throw new Error('Canvas worker renderer cannot load animation from url');
+  }
+};
+
+AnimationItem.prototype.setData = function () {
+  throw new Error('Cannot set data on wrapper for canvas worker renderer');
+};
+
+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;
+    }
+  }
+  this.animationData.__complete = false;
+  dataManager.completeAnimation(this.animationData);
+  this.renderer.includeLayers(data.layers);
+  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.timeCompleted = this.totalFrames;
+    return;
+  }
+  throw new Error('Cannot load multiple segments in worker.');
+};
+
+AnimationItem.prototype.loadSegments = function () {
+  var segments = this.animationData.segments;
+  if (!segments) {
+    this.timeCompleted = this.totalFrames;
+  }
+  this.loadNextSegment();
+};
+
+AnimationItem.prototype.imagesLoaded = null;
+
+AnimationItem.prototype.preloadImages = null;
+
+AnimationItem.prototype.configAnimation = function (animData) {
+  if (!this.renderer) {
+    return;
+  }
+  this.animationData = animData;
+  this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
+  this.renderer.configAnimation(animData);
+  if (!animData.assets) {
+    animData.assets = [];
+  }
+  this.renderer.searchExtraCompositions(animData.assets);
+
+  this.assets = this.animationData.assets;
+  this.frameRate = this.animationData.fr;
+  this.firstFrame = Math.round(this.animationData.ip);
+  this.frameMult = this.animationData.fr / 1000;
+  this.loadSegments();
+  this.updaFrameModifier();
+  this.checkLoaded();
+};
+
+AnimationItem.prototype.waitForFontsLoaded = null;
+
+AnimationItem.prototype.checkLoaded = function () {
+  if (!this.isLoaded) {
+    this.isLoaded = true;
+    var expressionsPlugin = getExpressionsPlugin();
+    if (expressionsPlugin) {
+      expressionsPlugin.initExpressions(this);
+    }
+    this.renderer.initItems();
+    this.gotoFrame();
+  }
+};
+
+AnimationItem.prototype.destroy = function (name) {
+  if ((name && this.name !== name) || !this.renderer) {
+    return;
+  }
+  this.renderer.destroy();
+  this._cbs = null;
+  this.onEnterFrame = null;
+  this.onLoopComplete = null;
+  this.onComplete = null;
+  this.onSegmentStart = null;
+  this.onDestroy = null;
+  this.renderer = null;
+};
+
+AnimationItem.prototype.getPath = null;

package/player/js/animation/AnimationManager.js

@@ -0,0 +1,248 @@
+import createTag from '../utils/helpers/html_elements';
+import AnimationItem from './AnimationItem';
+
+const animationManager = (function () {
+  var moduleOb = {};
+  var registeredAnimations = [];
+  var initTime = 0;
+  var len = 0;
+  var playingAnimationsNum = 0;
+  var _stopped = true;
+  var _isFrozen = false;
+
+  function removeElement(ev) {
+    var i = 0;
+    var animItem = ev.target;
+    while (i < len) {
+      if (registeredAnimations[i].animation === animItem) {
+        registeredAnimations.splice(i, 1);
+        i -= 1;
+        len -= 1;
+        if (!animItem.isPaused) {
+          subtractPlayingCount();
+        }
+      }
+      i += 1;
+    }
+  }
+
+  function registerAnimation(element, animationData) {
+    if (!element) {
+      return null;
+    }
+    var i = 0;
+    while (i < len) {
+      if (registeredAnimations[i].elem === element && registeredAnimations[i].elem !== null) {
+        return registeredAnimations[i].animation;
+      }
+      i += 1;
+    }
+    var animItem = new AnimationItem();
+    setupAnimation(animItem, element);
+    animItem.setData(element, animationData);
+    return animItem;
+  }
+
+  function getRegisteredAnimations() {
+    var i;
+    var lenAnims = registeredAnimations.length;
+    var animations = [];
+    for (i = 0; i < lenAnims; i += 1) {
+      animations.push(registeredAnimations[i].animation);
+    }
+    return animations;
+  }
+
+  function addPlayingCount() {
+    playingAnimationsNum += 1;
+    activate();
+  }
+
+  function subtractPlayingCount() {
+    playingAnimationsNum -= 1;
+  }
+
+  function setupAnimation(animItem, element) {
+    animItem.addEventListener('destroy', removeElement);
+    animItem.addEventListener('_active', addPlayingCount);
+    animItem.addEventListener('_idle', subtractPlayingCount);
+    registeredAnimations.push({ elem: element, animation: animItem });
+    len += 1;
+  }
+
+  function loadAnimation(params) {
+    var animItem = new AnimationItem();
+    setupAnimation(animItem, null);
+    animItem.setParams(params);
+    return animItem;
+  }
+
+  function setSpeed(val, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.setSpeed(val, animation);
+    }
+  }
+
+  function setDirection(val, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.setDirection(val, animation);
+    }
+  }
+
+  function play(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.play(animation);
+    }
+  }
+  function resume(nowTime) {
+    var elapsedTime = nowTime - initTime;
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.advanceTime(elapsedTime);
+    }
+    initTime = nowTime;
+    if (playingAnimationsNum && !_isFrozen) {
+      window.requestAnimationFrame(resume);
+    } else {
+      _stopped = true;
+    }
+  }
+
+  function first(nowTime) {
+    initTime = nowTime;
+    window.requestAnimationFrame(resume);
+  }
+
+  function pause(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.pause(animation);
+    }
+  }
+
+  function goToAndStop(value, isFrame, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);
+    }
+  }
+
+  function stop(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.stop(animation);
+    }
+  }
+
+  function togglePause(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.togglePause(animation);
+    }
+  }
+
+  function destroy(animation) {
+    var i;
+    for (i = (len - 1); i >= 0; i -= 1) {
+      registeredAnimations[i].animation.destroy(animation);
+    }
+  }
+
+  function searchAnimations(animationData, standalone, renderer) {
+    var animElements = [].concat([].slice.call(document.getElementsByClassName('lottie')),
+      [].slice.call(document.getElementsByClassName('bodymovin')));
+    var i;
+    var lenAnims = animElements.length;
+    for (i = 0; i < lenAnims; i += 1) {
+      if (renderer) {
+        animElements[i].setAttribute('data-bm-type', renderer);
+      }
+      registerAnimation(animElements[i], animationData);
+    }
+    if (standalone && lenAnims === 0) {
+      if (!renderer) {
+        renderer = 'svg';
+      }
+      var body = document.getElementsByTagName('body')[0];
+      body.innerText = '';
+      var div = createTag('div');
+      div.style.width = '100%';
+      div.style.height = '100%';
+      div.setAttribute('data-bm-type', renderer);
+      body.appendChild(div);
+      registerAnimation(div, animationData);
+    }
+  }
+
+  function resize() {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.resize();
+    }
+  }
+
+  function activate() {
+    if (!_isFrozen && playingAnimationsNum) {
+      if (_stopped) {
+        window.requestAnimationFrame(first);
+        _stopped = false;
+      }
+    }
+  }
+
+  function freeze() {
+    _isFrozen = true;
+  }
+
+  function unfreeze() {
+    _isFrozen = false;
+    activate();
+  }
+
+  function setVolume(val, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.setVolume(val, animation);
+    }
+  }
+
+  function mute(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.mute(animation);
+    }
+  }
+
+  function unmute(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.unmute(animation);
+    }
+  }
+
+  moduleOb.registerAnimation = registerAnimation;
+  moduleOb.loadAnimation = loadAnimation;
+  moduleOb.setSpeed = setSpeed;
+  moduleOb.setDirection = setDirection;
+  moduleOb.play = play;
+  moduleOb.pause = pause;
+  moduleOb.stop = stop;
+  moduleOb.togglePause = togglePause;
+  moduleOb.searchAnimations = searchAnimations;
+  moduleOb.resize = resize;
+  // moduleOb.start = start;
+  moduleOb.goToAndStop = goToAndStop;
+  moduleOb.destroy = destroy;
+  moduleOb.freeze = freeze;
+  moduleOb.unfreeze = unfreeze;
+  moduleOb.setVolume = setVolume;
+  moduleOb.mute = mute;
+  moduleOb.unmute = unmute;
+  moduleOb.getRegisteredAnimations = getRegisteredAnimations;
+  return moduleOb;
+}());
+
+export default animationManager;

package/player/js/animation/AnimationManagerWorkerOverride.js

@@ -0,0 +1,201 @@
+import AnimationItem from './AnimationItem';
+
+const animationManager = (function () {
+  var moduleOb = {};
+  var registeredAnimations = [];
+  var initTime = 0;
+  var len = 0;
+  var playingAnimationsNum = 0;
+  var _stopped = true;
+  var _isFrozen = false;
+
+  function removeElement(ev) {
+    var i = 0;
+    var animItem = ev.target;
+    while (i < len) {
+      if (registeredAnimations[i].animation === animItem) {
+        registeredAnimations.splice(i, 1);
+        i -= 1;
+        len -= 1;
+        if (!animItem.isPaused) {
+          subtractPlayingCount();
+        }
+      }
+      i += 1;
+    }
+  }
+
+  function registerAnimation(element, animationData) {
+    if (!element) {
+      return null;
+    }
+    var i = 0;
+    while (i < len) {
+      if (registeredAnimations[i].elem === element && registeredAnimations[i].elem !== null) {
+        return registeredAnimations[i].animation;
+      }
+      i += 1;
+    }
+    var animItem = new AnimationItem();
+    setupAnimation(animItem, element);
+    animItem.setData(element, animationData);
+    return animItem;
+  }
+
+  function getRegisteredAnimations() {
+    var i;
+    var lenAnims = registeredAnimations.length;
+    var animations = [];
+    for (i = 0; i < lenAnims; i += 1) {
+      animations.push(registeredAnimations[i].animation);
+    }
+    return animations;
+  }
+
+  function addPlayingCount() {
+    playingAnimationsNum += 1;
+    activate();
+  }
+
+  function subtractPlayingCount() {
+    playingAnimationsNum -= 1;
+  }
+
+  function setupAnimation(animItem, element) {
+    animItem.addEventListener('destroy', removeElement);
+    animItem.addEventListener('_active', addPlayingCount);
+    animItem.addEventListener('_idle', subtractPlayingCount);
+    registeredAnimations.push({ elem: element, animation: animItem });
+    len += 1;
+  }
+
+  function loadAnimation(params) {
+    var animItem = new AnimationItem();
+    setupAnimation(animItem, null);
+    animItem.setParams(params);
+    return animItem;
+  }
+
+  function setSpeed(val, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.setSpeed(val, animation);
+    }
+  }
+
+  function setDirection(val, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.setDirection(val, animation);
+    }
+  }
+
+  function play(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.play(animation);
+    }
+  }
+  function resume(nowTime) {
+    var elapsedTime = nowTime - initTime;
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.advanceTime(elapsedTime);
+    }
+    initTime = nowTime;
+    if (playingAnimationsNum && !_isFrozen) {
+      requestAnimationFrame(resume);
+    } else {
+      _stopped = true;
+    }
+  }
+
+  function first(nowTime) {
+    initTime = nowTime;
+    requestAnimationFrame(resume);
+  }
+
+  function pause(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.pause(animation);
+    }
+  }
+
+  function goToAndStop(value, isFrame, animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.goToAndStop(value, isFrame, animation);
+    }
+  }
+
+  function stop(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.stop(animation);
+    }
+  }
+
+  function togglePause(animation) {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.togglePause(animation);
+    }
+  }
+
+  function destroy(animation) {
+    var i;
+    for (i = (len - 1); i >= 0; i -= 1) {
+      registeredAnimations[i].animation.destroy(animation);
+    }
+  }
+
+  function searchAnimations() {
+    throw new Error('Cannot access DOM from worker thread');
+  }
+
+  function resize() {
+    var i;
+    for (i = 0; i < len; i += 1) {
+      registeredAnimations[i].animation.resize();
+    }
+  }
+
+  function activate() {
+    if (!_isFrozen && playingAnimationsNum) {
+      if (_stopped) {
+        requestAnimationFrame(first);
+        _stopped = false;
+      }
+    }
+  }
+
+  function freeze() {
+    _isFrozen = true;
+  }
+
+  function unfreeze() {
+    _isFrozen = false;
+    activate();
+  }
+
+  moduleOb.registerAnimation = registerAnimation;
+  moduleOb.loadAnimation = loadAnimation;
+  moduleOb.setSpeed = setSpeed;
+  moduleOb.setDirection = setDirection;
+  moduleOb.play = play;
+  moduleOb.pause = pause;
+  moduleOb.stop = stop;
+  moduleOb.togglePause = togglePause;
+  moduleOb.searchAnimations = searchAnimations;
+  moduleOb.resize = resize;
+  // moduleOb.start = start;
+  moduleOb.goToAndStop = goToAndStop;
+  moduleOb.destroy = destroy;
+  moduleOb.freeze = freeze;
+  moduleOb.unfreeze = unfreeze;
+  moduleOb.getRegisteredAnimations = getRegisteredAnimations;
+  return moduleOb;
+}());
+
+export default animationManager;

package/player/js/effects/EffectsManagerPlaceholder.js

@@ -0,0 +1,5 @@
+function EffectsManager() {
+  this.effectElements = [];
+}
+
+export default EffectsManager;

package/player/js/effects/SliderEffect.js

@@ -0,0 +1,37 @@
+import PropertyFactory from '../utils/PropertyFactory';
+
+function SliderEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
+}
+function AngleEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
+}
+function ColorEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
+}
+function PointEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 1, 0, container);
+}
+function LayerIndexEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
+}
+function MaskIndexEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
+}
+function CheckboxEffect(data, elem, container) {
+  this.p = PropertyFactory.getProp(elem, data.v, 0, 0, container);
+}
+function NoValueEffect() {
+  this.p = {};
+}
+
+export {
+  SliderEffect,
+  AngleEffect,
+  ColorEffect,
+  PointEffect,
+  LayerIndexEffect,
+  MaskIndexEffect,
+  CheckboxEffect,
+  NoValueEffect,
+};

package/player/js/effects/TransformEffect.js

@@ -0,0 +1,44 @@
+import effectTypes from '../utils/helpers/effectTypes';
+import Matrix from '../3rd_party/transformation-matrix';
+import { degToRads } from '../utils/common';
+
+function TransformEffect() {
+}
+
+TransformEffect.prototype.init = function (effectsManager) {
+  this.effectsManager = effectsManager;
+  this.type = effectTypes.TRANSFORM_EFFECT;
+  this.matrix = new Matrix();
+  this.opacity = -1;
+  this._mdf = false;
+  this._opMdf = false;
+};
+
+TransformEffect.prototype.renderFrame = function (forceFrame) {
+  this._opMdf = false;
+  this._mdf = false;
+  if (forceFrame || this.effectsManager._mdf) {
+    var effectElements = this.effectsManager.effectElements;
+    var anchor = effectElements[0].p.v;
+    var position = effectElements[1].p.v;
+    var isUniformScale = effectElements[2].p.v === 1;
+    var scaleHeight = effectElements[3].p.v;
+    var scaleWidth = isUniformScale ? scaleHeight : effectElements[4].p.v;
+    var skew = effectElements[5].p.v;
+    var skewAxis = effectElements[6].p.v;
+    var rotation = effectElements[7].p.v;
+    this.matrix.reset();
+    this.matrix.translate(-anchor[0], -anchor[1], anchor[2]);
+    this.matrix.scale(scaleWidth * 0.01, scaleHeight * 0.01, 1);
+    this.matrix.rotate(-rotation * degToRads);
+    this.matrix.skewFromAxis(-skew * degToRads, (skewAxis + 90) * degToRads);
+    this.matrix.translate(position[0], position[1], 0);
+    this._mdf = true;
+    if (this.opacity !== effectElements[8].p.v) {
+      this.opacity = effectElements[8].p.v;
+      this._opMdf = true;
+    }
+  }
+};
+
+export default TransformEffect;