lottie-web
Version:
After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript
1,568 lines (1,530 loc) • 656 kB
JavaScript
(typeof navigator !== "undefined") && (function(root, factory) {
if (typeof define === "function" && define.amd) {
define(function() {
return factory(root);
});
} else if (typeof module === "object" && module.exports) {
module.exports = factory(root);
} else {
root.lottie = factory(root);
root.bodymovin = root.lottie;
}
}((self || {}), function(window) {
function workerContent() {
function extendPrototype(sources, destination) {
var i;
var len = sources.length;
var sourcePrototype;
for (i = 0; i < len; i += 1) {
sourcePrototype = sources[i].prototype;
for (var attr in sourcePrototype) {
if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr];
}
}
}
function ProxyElement(type, namespace) {
this._state = 'init';
this._isDirty = false;
this._isProxy = true;
this._changedStyles = [];
this._changedAttributes = [];
this._changedElements = [];
this._textContent = null;
this.type = type;
this.namespace = namespace;
this.children = [];
localIdCounter += 1;
this.attributes = {
id: 'l_d_' + localIdCounter,
};
this.style = new Style(this);
}
ProxyElement.prototype = {
appendChild: function (_child) {
_child.parentNode = this;
this.children.push(_child);
this._isDirty = true;
this._changedElements.push([_child, this.attributes.id]);
},
insertBefore: function (_newElement, _nextElement) {
var children = this.children;
for (var i = 0; i < children.length; i += 1) {
if (children[i] === _nextElement) {
children.splice(i, 0, _newElement);
this._isDirty = true;
this._changedElements.push([_newElement, this.attributes.id, _nextElement.attributes.id]);
return;
}
}
children.push(_nextElement);
},
setAttribute: function (_attribute, _value) {
this.attributes[_attribute] = _value;
if (!this._isDirty) {
this._isDirty = true;
}
this._changedAttributes.push(_attribute);
},
serialize: function () {
return {
type: this.type,
namespace: this.namespace,
style: this.style.serialize(),
attributes: this.attributes,
children: this.children.map(function (child) { return child.serialize(); }),
textContent: this._textContent,
};
},
// eslint-disable-next-line class-methods-use-this
addEventListener: function (_, _callback) {
setTimeout(_callback, 1);
},
setAttributeNS: function (_, _attribute, _value) {
this.attributes[_attribute] = _value;
if (!this._isDirty) {
this._isDirty = true;
}
this._changedAttributes.push(_attribute);
},
};
Object.defineProperty(ProxyElement.prototype, 'textContent', {
set: function (_value) {
this._isDirty = true;
this._textContent = _value;
},
});
var localIdCounter = 0;
var animations = {};
var styleProperties = ['width', 'height', 'display', 'transform', 'opacity', 'contentVisibility', 'mix-blend-mode'];
function convertArguments(args) {
var arr = [];
var i;
var len = args.length;
for (i = 0; i < len; i += 1) {
arr.push(args[i]);
}
return arr;
}
function Style(element) {
this.element = element;
}
Style.prototype = {
serialize: function () {
var obj = {};
for (var i = 0; i < styleProperties.length; i += 1) {
var propertyKey = styleProperties[i];
var keyName = '_' + propertyKey;
if (keyName in this) {
obj[propertyKey] = this[keyName];
}
}
return obj;
},
};
styleProperties.forEach(function (propertyKey) {
Object.defineProperty(Style.prototype, propertyKey, {
set: function (value) {
if (!this.element._isDirty) {
this.element._isDirty = true;
}
this.element._changedStyles.push(propertyKey);
var keyName = '_' + propertyKey;
this[keyName] = value;
},
get: function () {
var keyName = '_' + propertyKey;
return this[keyName];
},
});
});
function CanvasContext(element) {
this.element = element;
}
CanvasContext.prototype = {
createRadialGradient: function () {
function addColorStop() {
instruction.stops.push(convertArguments(arguments));
}
var instruction = {
t: 'rGradient',
a: convertArguments(arguments),
stops: [],
};
this.element.instructions.push(instruction);
return {
addColorStop: addColorStop,
};
},
createLinearGradient: function () {
function addColorStop() {
instruction.stops.push(convertArguments(arguments));
}
var instruction = {
t: 'lGradient',
a: convertArguments(arguments),
stops: [],
};
this.element.instructions.push(instruction);
return {
addColorStop: addColorStop,
};
},
};
Object.defineProperties(CanvasContext.prototype, {
canvas: {
enumerable: true,
get: function () {
return this.element;
},
},
});
var canvasContextMethods = [
'fillRect',
'setTransform',
'drawImage',
'beginPath',
'moveTo',
'save',
'restore',
'fillText',
'setLineDash',
'clearRect',
'clip',
'rect',
'stroke',
'fill',
'closePath',
'bezierCurveTo',
'lineTo',
];
canvasContextMethods.forEach(function (method) {
CanvasContext.prototype[method] = function () {
this.element.instructions.push({
t: method,
a: convertArguments(arguments),
});
};
});
var canvasContextProperties = [
'globalAlpha',
'strokeStyle',
'fillStyle',
'lineCap',
'lineJoin',
'lineWidth',
'miterLimit',
'lineDashOffset',
'globalCompositeOperation',
];
canvasContextProperties.forEach(function (property) {
Object.defineProperty(CanvasContext.prototype, property,
{
set: function (_value) {
this.element.instructions.push({
t: property,
a: _value,
});
},
});
});
function CanvasElement(type, namespace) {
ProxyElement.call(this, type, namespace);
this.instructions = [];
this.width = 0;
this.height = 0;
this.context = new CanvasContext(this);
}
CanvasElement.prototype = {
getContext: function () {
return this.context;
},
resetInstructions: function () {
this.instructions.length = 0;
},
};
extendPrototype([ProxyElement], CanvasElement);
function createElement(namespace, type) {
if (type === 'canvas') {
return new CanvasElement(type, namespace);
}
return new ProxyElement(type, namespace);
}
var window = self; // eslint-disable-line no-redeclare, no-unused-vars
var document = { // eslint-disable-line no-redeclare
createElementNS: function (namespace, type) {
return createElement(namespace, type);
},
createElement: function (type) {
return createElement('', type);
},
getElementsByTagName: function () {
return [];
},
body: createElement('', 'body'),
_isProxy: true,
};
/* eslint-enable */
var lottieInternal = (function () {
'use strict';
(typeof document !== "undefined") && (typeof navigator !== "undefined") && (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lottie = factory());
})(this, (function () { 'use strict';
var svgNS = 'http://www.w3.org/2000/svg';
var locationHref = '';
var _useWebWorker = false;
var initialDefaultFrame = -999999;
var setWebWorker = function setWebWorker(flag) {
_useWebWorker = !!flag;
};
var getWebWorker = function getWebWorker() {
return _useWebWorker;
};
var setLocationHref = function setLocationHref(value) {
locationHref = value;
};
var getLocationHref = function getLocationHref() {
return locationHref;
};
function createTag(type) {
// return {appendChild:function(){},setAttribute:function(){},style:{}}
return document.createElement(type);
}
function extendPrototype(sources, destination) {
var i;
var len = sources.length;
var sourcePrototype;
for (i = 0; i < len; i += 1) {
sourcePrototype = sources[i].prototype;
for (var attr in sourcePrototype) {
if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr];
}
}
}
function getDescriptor(object, prop) {
return Object.getOwnPropertyDescriptor(object, prop);
}
function createProxyFunction(prototype) {
function ProxyFunction() {}
ProxyFunction.prototype = prototype;
return ProxyFunction;
}
// import Howl from '../../3rd_party/howler';
var audioControllerFactory = function () {
function AudioController(audioFactory) {
this.audios = [];
this.audioFactory = audioFactory;
this._volume = 1;
this._isMuted = false;
}
AudioController.prototype = {
addAudio: function addAudio(audio) {
this.audios.push(audio);
},
pause: function pause() {
var i;
var len = this.audios.length;
for (i = 0; i < len; i += 1) {
this.audios[i].pause();
}
},
resume: function resume() {
var i;
var len = this.audios.length;
for (i = 0; i < len; i += 1) {
this.audios[i].resume();
}
},
setRate: function setRate(rateValue) {
var i;
var len = this.audios.length;
for (i = 0; i < len; i += 1) {
this.audios[i].setRate(rateValue);
}
},
createAudio: function createAudio(assetPath) {
if (this.audioFactory) {
return this.audioFactory(assetPath);
}
if (window.Howl) {
return new window.Howl({
src: [assetPath]
});
}
return {
isPlaying: false,
play: function play() {
this.isPlaying = true;
},
seek: function seek() {
this.isPlaying = false;
},
playing: function playing() {},
rate: function rate() {},
setVolume: function setVolume() {}
};
},
setAudioFactory: function setAudioFactory(audioFactory) {
this.audioFactory = audioFactory;
},
setVolume: function setVolume(value) {
this._volume = value;
this._updateVolume();
},
mute: function mute() {
this._isMuted = true;
this._updateVolume();
},
unmute: function unmute() {
this._isMuted = false;
this._updateVolume();
},
getVolume: function getVolume() {
return this._volume;
},
_updateVolume: function _updateVolume() {
var i;
var len = this.audios.length;
for (i = 0; i < len; i += 1) {
this.audios[i].volume(this._volume * (this._isMuted ? 0 : 1));
}
}
};
return function () {
return new AudioController();
};
}();
var createTypedArray = function () {
function createRegularArray(type, len) {
var i = 0;
var arr = [];
var value;
switch (type) {
case 'int16':
case 'uint8c':
value = 1;
break;
default:
value = 1.1;
break;
}
for (i = 0; i < len; i += 1) {
arr.push(value);
}
return arr;
}
function createTypedArrayFactory(type, len) {
if (type === 'float32') {
return new Float32Array(len);
}
if (type === 'int16') {
return new Int16Array(len);
}
if (type === 'uint8c') {
return new Uint8ClampedArray(len);
}
return createRegularArray(type, len);
}
if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {
return createTypedArrayFactory;
}
return createRegularArray;
}();
function createSizedArray(len) {
return Array.apply(null, {
length: len
});
}
function _typeof$6(o) { "@babel/helpers - typeof"; return _typeof$6 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$6(o); }
var subframeEnabled = true;
var expressionsPlugin = null;
var expressionsInterfaces = null;
var idPrefix$1 = '';
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var _shouldRoundValues = false;
var bmPow = Math.pow;
var bmSqrt = Math.sqrt;
var bmFloor = Math.floor;
var bmMax = Math.max;
var bmMin = Math.min;
var BMMath = {};
(function () {
var propertyNames = ['abs', 'acos', 'acosh', 'asin', 'asinh', 'atan', 'atanh', 'atan2', 'ceil', 'cbrt', 'expm1', 'clz32', 'cos', 'cosh', 'exp', 'floor', 'fround', 'hypot', 'imul', 'log', 'log1p', 'log2', 'log10', 'max', 'min', 'pow', 'random', 'round', 'sign', 'sin', 'sinh', 'sqrt', 'tan', 'tanh', 'trunc', 'E', 'LN10', 'LN2', 'LOG10E', 'LOG2E', 'PI', 'SQRT1_2', 'SQRT2'];
var i;
var len = propertyNames.length;
for (i = 0; i < len; i += 1) {
BMMath[propertyNames[i]] = Math[propertyNames[i]];
}
})();
function ProjectInterface$1() {
return {};
}
BMMath.random = Math.random;
BMMath.abs = function (val) {
var tOfVal = _typeof$6(val);
if (tOfVal === 'object' && val.length) {
var absArr = createSizedArray(val.length);
var i;
var len = val.length;
for (i = 0; i < len; i += 1) {
absArr[i] = Math.abs(val[i]);
}
return absArr;
}
return Math.abs(val);
};
var defaultCurveSegments = 150;
var degToRads = Math.PI / 180;
var roundCorner = 0.5519;
function roundValues(flag) {
_shouldRoundValues = !!flag;
}
function bmRnd(value) {
if (_shouldRoundValues) {
return Math.round(value);
}
return value;
}
function styleDiv(element) {
element.style.position = 'absolute';
element.style.top = 0;
element.style.left = 0;
element.style.display = 'block';
element.style.transformOrigin = '0 0';
element.style.webkitTransformOrigin = '0 0';
element.style.backfaceVisibility = 'visible';
element.style.webkitBackfaceVisibility = 'visible';
element.style.transformStyle = 'preserve-3d';
element.style.webkitTransformStyle = 'preserve-3d';
element.style.mozTransformStyle = 'preserve-3d';
}
function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) {
this.type = type;
this.currentTime = currentTime;
this.totalTime = totalTime;
this.direction = frameMultiplier < 0 ? -1 : 1;
}
function BMCompleteEvent(type, frameMultiplier) {
this.type = type;
this.direction = frameMultiplier < 0 ? -1 : 1;
}
function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) {
this.type = type;
this.currentLoop = currentLoop;
this.totalLoops = totalLoops;
this.direction = frameMultiplier < 0 ? -1 : 1;
}
function BMSegmentStartEvent(type, firstFrame, totalFrames) {
this.type = type;
this.firstFrame = firstFrame;
this.totalFrames = totalFrames;
}
function BMDestroyEvent(type, target) {
this.type = type;
this.target = target;
}
function BMRenderFrameErrorEvent(nativeError, currentTime) {
this.type = 'renderFrameError';
this.nativeError = nativeError;
this.currentTime = currentTime;
}
function BMConfigErrorEvent(nativeError) {
this.type = 'configError';
this.nativeError = nativeError;
}
function BMAnimationConfigErrorEvent(type, nativeError) {
this.type = type;
this.nativeError = nativeError;
}
var createElementID = function () {
var _count = 0;
return function createID() {
_count += 1;
return idPrefix$1 + '__lottie_element_' + _count;
};
}();
function HSVtoRGB(h, s, v) {
var r;
var g;
var b;
var i;
var f;
var p;
var q;
var t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
case 5:
r = v;
g = p;
b = q;
break;
default:
break;
}
return [r, g, b];
}
function RGBtoHSV(r, g, b) {
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var d = max - min;
var h;
var s = max === 0 ? 0 : d / max;
var v = max / 255;
switch (max) {
case min:
h = 0;
break;
case r:
h = g - b + d * (g < b ? 6 : 0);
h /= 6 * d;
break;
case g:
h = b - r + d * 2;
h /= 6 * d;
break;
case b:
h = r - g + d * 4;
h /= 6 * d;
break;
default:
break;
}
return [h, s, v];
}
function addSaturationToRGB(color, offset) {
var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
hsv[1] += offset;
if (hsv[1] > 1) {
hsv[1] = 1;
} else if (hsv[1] <= 0) {
hsv[1] = 0;
}
return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
}
function addBrightnessToRGB(color, offset) {
var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
hsv[2] += offset;
if (hsv[2] > 1) {
hsv[2] = 1;
} else if (hsv[2] < 0) {
hsv[2] = 0;
}
return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
}
function addHueToRGB(color, offset) {
var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);
hsv[0] += offset / 360;
if (hsv[0] > 1) {
hsv[0] -= 1;
} else if (hsv[0] < 0) {
hsv[0] += 1;
}
return HSVtoRGB(hsv[0], hsv[1], hsv[2]);
}
var rgbToHex = function () {
var colorMap = [];
var i;
var hex;
for (i = 0; i < 256; i += 1) {
hex = i.toString(16);
colorMap[i] = hex.length === 1 ? '0' + hex : hex;
}
return function (r, g, b) {
if (r < 0) {
r = 0;
}
if (g < 0) {
g = 0;
}
if (b < 0) {
b = 0;
}
return '#' + colorMap[r] + colorMap[g] + colorMap[b];
};
}();
var setSubframeEnabled = function setSubframeEnabled(flag) {
subframeEnabled = !!flag;
};
var getSubframeEnabled = function getSubframeEnabled() {
return subframeEnabled;
};
var setExpressionsPlugin = function setExpressionsPlugin(value) {
expressionsPlugin = value;
};
var getExpressionsPlugin = function getExpressionsPlugin() {
return expressionsPlugin;
};
var setExpressionInterfaces = function setExpressionInterfaces(value) {
expressionsInterfaces = value;
};
var getExpressionInterfaces = function getExpressionInterfaces() {
return expressionsInterfaces;
};
var setDefaultCurveSegments = function setDefaultCurveSegments(value) {
defaultCurveSegments = value;
};
var getDefaultCurveSegments = function getDefaultCurveSegments() {
return defaultCurveSegments;
};
var setIdPrefix = function setIdPrefix(value) {
idPrefix$1 = value;
};
var getIdPrefix = function getIdPrefix() {
return idPrefix$1;
};
function createNS(type) {
// return {appendChild:function(){},setAttribute:function(){},style:{}}
return document.createElementNS(svgNS, type);
}
function _typeof$5(o) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$5(o); }
var dataManager = function () {
var _counterId = 1;
var processes = [];
var workerFn;
var workerInstance;
var workerProxy = {
onmessage: function onmessage() {},
postMessage: function postMessage(path) {
workerFn({
data: path
});
}
};
var _workerSelf = {
postMessage: function postMessage(data) {
workerProxy.onmessage({
data: data
});
}
};
function createWorker(fn) {
if (window.Worker && window.Blob && getWebWorker()) {
var blob = new Blob(['var _workerSelf = self; self.onmessage = ', fn.toString()], {
type: 'text/javascript'
});
// var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });
var url = URL.createObjectURL(blob);
return new Worker(url);
}
workerFn = fn;
return workerProxy;
}
function setupWorker() {
if (!workerInstance) {
workerInstance = createWorker(function workerStart(e) {
function dataFunctionManager() {
function completeLayers(layers, comps) {
var layerData;
var i;
var len = layers.length;
var j;
var jLen;
var k;
var kLen;
for (i = 0; i < len; i += 1) {
layerData = layers[i];
if ('ks' in layerData && !layerData.completed) {
layerData.completed = true;
if (layerData.hasMask) {
var maskProps = layerData.masksProperties;
jLen = maskProps.length;
for (j = 0; j < jLen; j += 1) {
if (maskProps[j].pt.k.i) {
convertPathsToAbsoluteValues(maskProps[j].pt.k);
} else {
kLen = maskProps[j].pt.k.length;
for (k = 0; k < kLen; k += 1) {
if (maskProps[j].pt.k[k].s) {
convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);
}
if (maskProps[j].pt.k[k].e) {
convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);
}
}
}
}
}
if (layerData.ty === 0) {
layerData.layers = findCompLayers(layerData.refId, comps);
completeLayers(layerData.layers, comps);
} else if (layerData.ty === 4) {
completeShapes(layerData.shapes);
} else if (layerData.ty === 5) {
completeText(layerData);
}
}
}
}
function completeChars(chars, assets) {
if (chars) {
var i = 0;
var len = chars.length;
for (i = 0; i < len; i += 1) {
if (chars[i].t === 1) {
// var compData = findComp(chars[i].data.refId, assets);
chars[i].data.layers = findCompLayers(chars[i].data.refId, assets);
// chars[i].data.ip = 0;
// chars[i].data.op = 99999;
// chars[i].data.st = 0;
// chars[i].data.sr = 1;
// chars[i].w = compData.w;
// chars[i].data.ks = {
// a: { k: [0, 0, 0], a: 0 },
// p: { k: [0, -compData.h, 0], a: 0 },
// r: { k: 0, a: 0 },
// s: { k: [100, 100], a: 0 },
// o: { k: 100, a: 0 },
// };
completeLayers(chars[i].data.layers, assets);
}
}
}
}
function findComp(id, comps) {
var i = 0;
var len = comps.length;
while (i < len) {
if (comps[i].id === id) {
return comps[i];
}
i += 1;
}
return null;
}
function findCompLayers(id, comps) {
var comp = findComp(id, comps);
if (comp) {
if (!comp.layers.__used) {
comp.layers.__used = true;
return comp.layers;
}
return JSON.parse(JSON.stringify(comp.layers));
}
return null;
}
function completeShapes(arr) {
var i;
var len = arr.length;
var j;
var jLen;
for (i = len - 1; i >= 0; i -= 1) {
if (arr[i].ty === 'sh') {
if (arr[i].ks.k.i) {
convertPathsToAbsoluteValues(arr[i].ks.k);
} else {
jLen = arr[i].ks.k.length;
for (j = 0; j < jLen; j += 1) {
if (arr[i].ks.k[j].s) {
convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);
}
if (arr[i].ks.k[j].e) {
convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);
}
}
}
} else if (arr[i].ty === 'gr') {
completeShapes(arr[i].it);
}
}
}
function convertPathsToAbsoluteValues(path) {
var i;
var len = path.i.length;
for (i = 0; i < len; i += 1) {
path.i[i][0] += path.v[i][0];
path.i[i][1] += path.v[i][1];
path.o[i][0] += path.v[i][0];
path.o[i][1] += path.v[i][1];
}
}
function checkVersion(minimum, animVersionString) {
var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];
if (minimum[0] > animVersion[0]) {
return true;
}
if (animVersion[0] > minimum[0]) {
return false;
}
if (minimum[1] > animVersion[1]) {
return true;
}
if (animVersion[1] > minimum[1]) {
return false;
}
if (minimum[2] > animVersion[2]) {
return true;
}
if (animVersion[2] > minimum[2]) {
return false;
}
return null;
}
var checkText = function () {
var minimumVersion = [4, 4, 14];
function updateTextLayer(textLayer) {
var documentData = textLayer.t.d;
textLayer.t.d = {
k: [{
s: documentData,
t: 0
}]
};
}
function iterateLayers(layers) {
var i;
var len = layers.length;
for (i = 0; i < len; i += 1) {
if (layers[i].ty === 5) {
updateTextLayer(layers[i]);
}
}
}
return function (animationData) {
if (checkVersion(minimumVersion, animationData.v)) {
iterateLayers(animationData.layers);
if (animationData.assets) {
var i;
var len = animationData.assets.length;
for (i = 0; i < len; i += 1) {
if (animationData.assets[i].layers) {
iterateLayers(animationData.assets[i].layers);
}
}
}
}
};
}();
var checkChars = function () {
var minimumVersion = [4, 7, 99];
return function (animationData) {
if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {
var i;
var len = animationData.chars.length;
for (i = 0; i < len; i += 1) {
var charData = animationData.chars[i];
if (charData.data && charData.data.shapes) {
completeShapes(charData.data.shapes);
charData.data.ip = 0;
charData.data.op = 99999;
charData.data.st = 0;
charData.data.sr = 1;
charData.data.ks = {
p: {
k: [0, 0],
a: 0
},
s: {
k: [100, 100],
a: 0
},
a: {
k: [0, 0],
a: 0
},
r: {
k: 0,
a: 0
},
o: {
k: 100,
a: 0
}
};
if (!animationData.chars[i].t) {
charData.data.shapes.push({
ty: 'no'
});
charData.data.shapes[0].it.push({
p: {
k: [0, 0],
a: 0
},
s: {
k: [100, 100],
a: 0
},
a: {
k: [0, 0],
a: 0
},
r: {
k: 0,
a: 0
},
o: {
k: 100,
a: 0
},
sk: {
k: 0,
a: 0
},
sa: {
k: 0,
a: 0
},
ty: 'tr'
});
}
}
}
}
};
}();
var checkPathProperties = function () {
var minimumVersion = [5, 7, 15];
function updateTextLayer(textLayer) {
var pathData = textLayer.t.p;
if (typeof pathData.a === 'number') {
pathData.a = {
a: 0,
k: pathData.a
};
}
if (typeof pathData.p === 'number') {
pathData.p = {
a: 0,
k: pathData.p
};
}
if (typeof pathData.r === 'number') {
pathData.r = {
a: 0,
k: pathData.r
};
}
}
function iterateLayers(layers) {
var i;
var len = layers.length;
for (i = 0; i < len; i += 1) {
if (layers[i].ty === 5) {
updateTextLayer(layers[i]);
}
}
}
return function (animationData) {
if (checkVersion(minimumVersion, animationData.v)) {
iterateLayers(animationData.layers);
if (animationData.assets) {
var i;
var len = animationData.assets.length;
for (i = 0; i < len; i += 1) {
if (animationData.assets[i].layers) {
iterateLayers(animationData.assets[i].layers);
}
}
}
}
};
}();
var checkColors = function () {
var minimumVersion = [4, 1, 9];
function iterateShapes(shapes) {
var i;
var len = shapes.length;
var j;
var jLen;
for (i = 0; i < len; i += 1) {
if (shapes[i].ty === 'gr') {
iterateShapes(shapes[i].it);
} else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {
if (shapes[i].c.k && shapes[i].c.k[0].i) {
jLen = shapes[i].c.k.length;
for (j = 0; j < jLen; j += 1) {
if (shapes[i].c.k[j].s) {
shapes[i].c.k[j].s[0] /= 255;
shapes[i].c.k[j].s[1] /= 255;
shapes[i].c.k[j].s[2] /= 255;
shapes[i].c.k[j].s[3] /= 255;
}
if (shapes[i].c.k[j].e) {
shapes[i].c.k[j].e[0] /= 255;
shapes[i].c.k[j].e[1] /= 255;
shapes[i].c.k[j].e[2] /= 255;
shapes[i].c.k[j].e[3] /= 255;
}
}
} else {
shapes[i].c.k[0] /= 255;
shapes[i].c.k[1] /= 255;
shapes[i].c.k[2] /= 255;
shapes[i].c.k[3] /= 255;
}
}
}
}
function iterateLayers(layers) {
var i;
var len = layers.length;
for (i = 0; i < len; i += 1) {
if (layers[i].ty === 4) {
iterateShapes(layers[i].shapes);
}
}
}
return function (animationData) {
if (checkVersion(minimumVersion, animationData.v)) {
iterateLayers(animationData.layers);
if (animationData.assets) {
var i;
var len = animationData.assets.length;
for (i = 0; i < len; i += 1) {
if (animationData.assets[i].layers) {
iterateLayers(animationData.assets[i].layers);
}
}
}
}
};
}();
var checkShapes = function () {
var minimumVersion = [4, 4, 18];
function completeClosingShapes(arr) {
var i;
var len = arr.length;
var j;
var jLen;
for (i = len - 1; i >= 0; i -= 1) {
if (arr[i].ty === 'sh') {
if (arr[i].ks.k.i) {
arr[i].ks.k.c = arr[i].closed;
} else {
jLen = arr[i].ks.k.length;
for (j = 0; j < jLen; j += 1) {
if (arr[i].ks.k[j].s) {
arr[i].ks.k[j].s[0].c = arr[i].closed;
}
if (arr[i].ks.k[j].e) {
arr[i].ks.k[j].e[0].c = arr[i].closed;
}
}
}
} else if (arr[i].ty === 'gr') {
completeClosingShapes(arr[i].it);
}
}
}
function iterateLayers(layers) {
var layerData;
var i;
var len = layers.length;
var j;
var jLen;
var k;
var kLen;
for (i = 0; i < len; i += 1) {
layerData = layers[i];
if (layerData.hasMask) {
var maskProps = layerData.masksProperties;
jLen = maskProps.length;
for (j = 0; j < jLen; j += 1) {
if (maskProps[j].pt.k.i) {
maskProps[j].pt.k.c = maskProps[j].cl;
} else {
kLen = maskProps[j].pt.k.length;
for (k = 0; k < kLen; k += 1) {
if (maskProps[j].pt.k[k].s) {
maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;
}
if (maskProps[j].pt.k[k].e) {
maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;
}
}
}
}
}
if (layerData.ty === 4) {
completeClosingShapes(layerData.shapes);
}
}
}
return function (animationData) {
if (checkVersion(minimumVersion, animationData.v)) {
iterateLayers(animationData.layers);
if (animationData.assets) {
var i;
var len = animationData.assets.length;
for (i = 0; i < len; i += 1) {
if (animationData.assets[i].layers) {
iterateLayers(animationData.assets[i].layers);
}
}
}
}
};
}();
function completeData(animationData) {
if (animationData.__complete) {
return;
}
checkColors(animationData);
checkText(animationData);
checkChars(animationData);
checkPathProperties(animationData);
checkShapes(animationData);
completeLayers(animationData.layers, animationData.assets);
completeChars(animationData.chars, animationData.assets);
animationData.__complete = true;
}
function completeText(data) {
if (data.t.a.length === 0 && !('m' in data.t.p)) {
// data.singleShape = true;
}
}
var moduleOb = {};
moduleOb.completeData = completeData;
moduleOb.checkColors = checkColors;
moduleOb.checkChars = checkChars;
moduleOb.checkPathProperties = checkPathProperties;
moduleOb.checkShapes = checkShapes;
moduleOb.completeLayers = completeLayers;
return moduleOb;
}
if (!_workerSelf.dataManager) {
_workerSelf.dataManager = dataFunctionManager();
}
if (!_workerSelf.assetLoader) {
_workerSelf.assetLoader = function () {
function formatResponse(xhr) {
// using typeof doubles the time of execution of this method,
// so if available, it's better to use the header to validate the type
var contentTypeHeader = xhr.getResponseHeader('content-type');
if (contentTypeHeader && xhr.responseType === 'json' && contentTypeHeader.indexOf('json') !== -1) {
return xhr.response;
}
if (xhr.response && _typeof$5(xhr.response) === 'object') {
return xhr.response;
}
if (xhr.response && typeof xhr.response === 'string') {
return JSON.parse(xhr.response);
}
if (xhr.responseText) {
return JSON.parse(xhr.responseText);
}
return null;
}
function loadAsset(path, fullPath, callback, errorCallback) {
var response;
var xhr = new XMLHttpRequest();
// set responseType after calling open or IE will break.
try {
// This crashes on Android WebView prior to KitKat
xhr.responseType = 'json';
} catch (err) {} // eslint-disable-line no-empty
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
response = formatResponse(xhr);
callback(response);
} else {
try {
response = formatResponse(xhr);
callback(response);
} catch (err) {
if (errorCallback) {
errorCallback(err);
}
}
}
}
};
try {
// Hack to workaround banner validation
xhr.open(['G', 'E', 'T'].join(''), path, true);
} catch (error) {
// Hack to workaround banner validation
xhr.open(['G', 'E', 'T'].join(''), fullPath + '/' + path, true);
}
xhr.send();
}
return {
load: loadAsset
};
}();
}
if (e.data.type === 'loadAnimation') {
_workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {
_workerSelf.dataManager.completeData(data);
_workerSelf.postMessage({
id: e.data.id,
payload: data,
status: 'success'
});
}, function () {
_workerSelf.postMessage({
id: e.data.id,
status: 'error'
});
});
} else if (e.data.type === 'complete') {
var animation = e.data.animation;
_workerSelf.dataManager.completeData(animation);
_workerSelf.postMessage({
id: e.data.id,
payload: animation,
status: 'success'
});
} else if (e.data.type === 'loadData') {
_workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {
_workerSelf.postMessage({
id: e.data.id,
payload: data,
status: 'success'
});
}, function () {
_workerSelf.postMessage({
id: e.data.id,
status: 'error'
});
});
}
});
workerInstance.onmessage = function (event) {
var data = event.data;
var id = data.id;
var process = processes[id];
processes[id] = null;
if (data.status === 'success') {
process.onComplete(data.payload);
} else if (process.onError) {
process.onError();
}
};
}
}
function createProcess(onComplete, onError) {
_counterId += 1;
var id = 'processId_' + _counterId;
processes[id] = {
onComplete: onComplete,
onError: onError
};
return id;
}
function loadAnimation(path, onComplete, onError) {
setupWorker();
var processId = createProcess(onComplete, onError);
workerInstance.postMessage({
type: 'loadAnimation',
path: path,
fullPath: window.location.origin + window.location.pathname,
id: processId
});
}
function loadData(path, onComplete, onError) {
setupWorker();
var processId = createProcess(onComplete, onError);
workerInstance.postMessage({
type: 'loadData',
path: path,
fullPath: window.location.origin + window.location.pathname,
id: processId
});
}
function completeAnimation(anim, onComplete, onError) {
setupWorker();
var processId = createProcess(onComplete, onError);
workerInstance.postMessage({
type: 'complete',
animation: anim,
id: processId
});
}
return {
loadAnimation: loadAnimation,
loadData: loadData,
completeAnimation: completeAnimation
};
}();
var ImagePreloader = function () {
var proxyImage = function () {
var canvas = createTag('canvas');
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, 1, 1);
return canvas;
}();
function imageLoaded() {
this.loadedAssets += 1;
if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
if (this.imagesLoadedCb) {
this.imagesLoadedCb(null);
}
}
}
function footageLoaded() {
this.loadedFootagesCount += 1;
if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
if (this.imagesLoadedCb) {
this.imagesLoadedCb(null);
}
}
}
function getAssetsPath(assetData, assetsPath, originalPath) {
var path = '';
if (assetData.e) {
path = assetData.p;
} else if (assetsPath) {
var imagePath = assetData.p;
if (imagePath.indexOf('images/') !== -1) {
imagePath = imagePath.split('/')[1];
}
path = assetsPath + imagePath;
} else {
path = originalPath;
path += assetData.u ? assetData.u : '';
path += assetData.p;
}
return path;
}
function testImageLoaded(img) {
var _count = 0;
var intervalId = setInterval(function () {
var box = img.getBBox();
if (box.width || _count > 500) {
this._imageLoaded();
clearInterval(intervalId);
}
_count += 1;
}.bind(this), 50);
}
function createImageData(assetData) {
var path = getAssetsPath(assetData, this.assetsPath, this.path);
var img = createNS('image');
if (isSafari) {
this.testImageLoaded(img);
} else {
img.addEventListener('load', this._imageLoaded, false);
}
img.addEventListener('error', function () {
ob.img = proxyImage;
this._imageLoaded();
}.bind(this), false);
img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
if (this._elementHelper.append) {
this._elementHelper.append(img);
} else {
this._elementHelper.appendChild(img);
}
var ob = {
img: img,
assetData: assetData
};
return ob;
}
function createImgData(assetData) {
var path = getAssetsPath(assetData, this.assetsPath, this.path);
var img = createTag('img');
img.crossOrigin = 'anonymous';
img.addEventListener('load', this._imageLoaded, false);
img.addEventListener('error', function () {
ob.img = proxyImage;
this._imageLoaded();
}.bind(this), false);
img.src = path;
var ob = {
img: img,
assetData: assetData
};
return ob;
}
function createFootageData(data) {
var ob = {
assetData: data
};
var path = getAssetsPath(data, this.assetsPath, this.path);
dataManager.loadData(path, function (footageData) {
ob.img = footageData;
this._footageLoaded();
}.bind(this), function () {
ob.img = {};
this._footageLoaded();
}.bind(this));
return ob;
}
function loadAssets(assets, cb) {
this.imagesLoadedCb = cb;
var i;
var len = assets.length;
for (i = 0; i < len; i += 1) {
if (!assets[i].layers) {
if (!assets[i].t || assets[i].t === 'seq') {
this.totalImages += 1;
this.images.push(this._createImageData(assets[i]));
} else if (assets[i].t === 3) {
this.totalFootages += 1;
this.images.push(this.createFootageData(assets[i]));
}
}
}
}
function setPath(path) {
this.path = path || '';
}
function setAssetsPath(path) {
this.assetsPath = path || '';
}
function getAsset(assetData) {
var i = 0;
var len = this.images.length;
while (i < len) {
if (this.images[i].assetData === assetData) {
return this.images[i].img;
}
i += 1;
}
return null;
}
function destroy() {
this.imagesLoadedCb = null;
this.images.length = 0;
}
function loadedImages() {
return this.totalImages === this.loadedAssets;
}
function loadedFootages() {
return this.totalFootages === this.loadedFootagesCount;
}
function setCacheType(type, elementHelper) {
if (type === 'svg') {
this._elementHelper = elementHelper;
this._createImageData = this.createImageData.bind(this);
} else {
this._createImageData = this.createImgData.bind(this);
}
}
function ImagePreloaderFactory() {