partial
diff --git a/player/index.html b/player/index.html
index 07db12b..19bb60c 100644
--- a/player/index.html
+++ b/player/index.html
@@ -40,6 +40,6 @@
</head>
<body style="background-color:#666; margin: 10px;height: 100%; font-family: sans-serif;font-size: 10px">
<div id="loader"></div>
-<div style="width:510px;height:676px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/mcangel" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div>
+<div style="width:510px;height:676px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/mcangel" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
</body>
</html>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 4bb6b11..1e0491d 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -20,6 +20,7 @@
this.isScrolling = false;
this.loop = true;
this.renderer = null;
+ this.animationID = randomString(10);
};
AnimationItem.prototype.setData = function (wrapper) {
@@ -60,12 +61,14 @@
this.effectsManager = new EffectsManager();
this.animationData = animData;
+ this.animationData._id = this.animationID;
+ this.animationData._animType = this.animType;
this.layers = this.animationData.animation.layers;
this.assets = this.animationData.assets;
this.totalFrames = this.animationData.animation.totalFrames;
this.frameRate = this.animationData.animation.frameRate;
this.frameMult = this.animationData.animation.frameRate / 1000;
- dataManager.completeData(this.layers, this.frameRate);
+ dataManager.completeData(this.animationData);
this.renderer.buildItems(this.animationData.animation.layers);
this.updaFrameModifier();
this.checkLoaded();
@@ -120,7 +123,7 @@
}
if(!this.renderedFrames[this.currentFrame]){
this.renderedFrames[this.currentFrame] = true;
- dataManager.renderFrame(this.layers,this.currentFrame,this.animType);
+ dataManager.renderFrame(this.animationID,this.currentFrame);
}
this.renderer.renderFrame(this.currentFrame);
};
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index b3bb1f6..47c0218 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -26,7 +26,7 @@
this.currentAnimData = null;
return false;
}
- this.currentAnimData = this.data.an[this.data.an[num].forwardFrame];
+ this.currentAnimData = this.data.renderedData[num].an;
if(this.data.hasMask){
this.maskManager.prepareFrame(num);
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js
index 685876e..374780e 100644
--- a/player/js/elements/canvasElements/CVShapeItemElement.js
+++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -22,6 +22,7 @@
return;
}
var num = this.frameNum;
+ this.currentData = this.data.renderedData[num];
var ctx = this.renderer.canvasContext;
var flag = this.renderTransform(num);
if(this.data.type=="pathShape"){
@@ -61,12 +62,11 @@
this.frameNum = num;
};
-CVShapeItemElement.prototype.renderTransform = function(num){
- var animData = this.data.an;
+CVShapeItemElement.prototype.renderTransform = function(){
+ var animData = this.currentData;
if(animData.tr){
var ctx = this.renderer.canvasContext;
- var tr = animData.tr[animData.tr[num].forwardFrame];
- animData.renderedFrame.tr = tr.forwardFrame;
+ var tr = animData.tr;
var matrixValue = tr.mtArr;
if(matrixValue[0] == 1 && matrixValue[1] == 0 && matrixValue[2] == 0 && matrixValue[3] == 1 && matrixValue[4] == 0 && matrixValue[5] == 0 && tr.o >= 1){
return false;
@@ -180,15 +180,14 @@
};
CVShapeItemElement.prototype.renderPath = function(num){
- var animData = this.data.an;
- var path = animData.path[animData.path[num].forwardFrame];
+ var animData = this.currentData;
+ var path = animData.path;
if(this.renderedPaths[num]){
return;
}
var path2d = new Path2D();
- animData.renderedFrame.path = path.pathString;
var ctx = this.renderer.canvasContext;
var pathNodes = path.pathNodes;
@@ -214,7 +213,6 @@
CVShapeItemElement.prototype.renderEllipse = function(num){
var animData = this.data.an;
var ell = animData.ell[animData.ell[num].forwardFrame];
- animData.renderedFrame.ell = ell.forwardFrame;
var ctx = this.renderer.canvasContext;
@@ -249,10 +247,9 @@
};
CVShapeItemElement.prototype.renderFill = function(num){
- var animData = this.data.an;
+ var animData = this.currentData;
if(animData.fill){
- var fill = animData.fill[animData.fill[num].forwardFrame];
- animData.renderedFrame.fill = {color:fill.color,opacity:fill.opacity};
+ var fill = animData.fill;
if(this.data.fillEnabled!==false){
if(fill.opacity < 1){
this.renderer.canvasContext.fillStyle=fillToRgba(fill.color, fill.opacity);
@@ -266,10 +263,9 @@
};
CVShapeItemElement.prototype.renderStroke = function(num){
- var animData = this.data.an;
+ var animData = this.currentData;
if(animData.stroke){
- var stroke = animData.stroke[animData.stroke[num].forwardFrame];
- animData.renderedFrame.stroke = stroke.forwardFrame;
+ var stroke = animData.stroke;
/*ctx.strokeStyle="red";
*/
this.renderer.canvasContext.lineWidth=stroke.width;
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index cbea694..2dfcb2e 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -36,7 +36,7 @@
CanvasRenderer.prototype.createComp = function (data) {
data.element = new CVCompElement(data, this);
- this.buildItems(data.layers, data.element.getType());
+ this.buildItems(data.layers);
};
CanvasRenderer.prototype.createSolid = function (data) {
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 45b9167..85d168b 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -1,7 +1,7 @@
-var dataManager = (function(){
+function dataFunctionManager(){
var frameRate = 0;
var matrixInstance = new MatrixManager();
- var storedBezierCurves = {};
+ var animations = {};
function completeTimeRemap(tm, layerFrames, offsetFrame){
var interpolatedProperty = getInterpolatedValues(tm,layerFrames, offsetFrame);
@@ -23,6 +23,7 @@
layerData.parent = convertLayerNameToID(layerData.parent);
}
layerData.renderedFrame = {};
+ layerData.renderedData = {};
animArray = [];
lastFrame = -1;
if(layerData.tm){
@@ -30,13 +31,20 @@
}
if(layerData.type=='PreCompLayer'){
completeLayers(layerData.layers);
+ }else if(layerData.type == 'ShapeLayer'){
+ var i, len = layerData.shapes.length;
+ for(i=0;i<len;i+=1){
+ shapeItem = layerData.shapes[i];
+ shapeItem.renderedData = {};
+ }
}
})
}
- function completeData(layers, fRate){
- frameRate = fRate;
- completeLayers(layers);
+ function completeData(animationData){
+ animations[animationData._id] = animationData;
+ frameRate = animationData.animation.frameRate;
+ completeLayers(animationData.animation.layers);
}
function convertLayerNameToID(string){
@@ -389,7 +397,7 @@
var fillOpacity,fillColor, shape, strokeColor, strokeOpacity, strokeWidth, elmPos, elmSize, elmRound;
var shapeTrOb = {};
- function iterateLayers(layers, frameNum,renderType){
+ function iterateLayers(layers, frameNum,renderType, rendered){
var offsettedFrameNum, i, len;
var j, jLen = layers.length, item;
@@ -397,9 +405,11 @@
item = layers[j];
offsettedFrameNum = frameNum - item.startTime;
if(frameNum < item.inPoint || frameNum > item.outPoint){
+ rendered.push('');
continue;
}
if(item.an[offsettedFrameNum]){
+ rendered.push('');
continue;
}
trOb = {};
@@ -413,7 +423,8 @@
trOb.s = scale instanceof Array ? scale.length > 1 ? [scale[0]/100,scale[1]/100,scale[2]/100] : [scale[0]/100,scale[0]/100,scale[0]/100] : [scale/100,scale/100,scale/100];
trOb.r = rot instanceof Array ? rot.length > 1 ? [rot[0]*Math.PI/180,rot[1]*Math.PI/180,rot[2]*Math.PI/180] : [rot[0]*Math.PI/180,rot[0]*Math.PI/180,rot[0]*Math.PI/180] : [0,0,rot*Math.PI/180];
trOb.p = pos;
- item.an[offsettedFrameNum] = {
+ rendered[j] = {};
+ rendered[j].an = {
forwardFrame : offsettedFrameNum,
tr: dataOb,
matrixValue: matrixInstance.getMatrix2(trOb),
@@ -439,10 +450,13 @@
}
if(item.type == 'PreCompLayer'){
timeRemapped = item.tm ? item.tm[offsettedFrameNum] < 0 ? 0 : item.tm[offsettedFrameNum] : offsettedFrameNum;
- iterateLayers(item.layers,timeRemapped,renderType);
+ rendered.renderedArray = [];
+ iterateLayers(item.layers,timeRemapped,renderType,rendered.renderedArray);
}else if(item.type == 'ShapeLayer'){
+ rendered[j].shapes = [];
len = item.shapes.length;
for(i=0;i<len;i+=1){
+ rendered[j].shapes.push({});
shapeItem = item.shapes[i];
if(!shapeItem._created){
shapeItem.an.tr = [];
@@ -467,7 +481,7 @@
if(shapeItem.fl){
fillColor = getInterpolatedValue(shapeItem.fl.c,offsettedFrameNum, item.startTime);
fillOpacity = getInterpolatedValue(shapeItem.fl.o,offsettedFrameNum, item.startTime);
- shapeItem.an.fill[offsettedFrameNum] = {
+ rendered[j].shapes[i].fill = {
color : rgbToHex(Math.round(fillColor[0]),Math.round(fillColor[1]),Math.round(fillColor[2])),
opacity : fillOpacity instanceof Array ? fillOpacity[0]/100 : fillOpacity/100,
forwardFrame : offsettedFrameNum
@@ -475,18 +489,18 @@
}
if(shapeItem.ks){
shape = getInterpolatedValue(shapeItem.ks,offsettedFrameNum, item.startTime);
- shapeItem.an.path[offsettedFrameNum] = {
+ rendered[j].shapes[i].path = {
pathNodes: shape,
closed: shapeItem.closed,
forwardFrame : offsettedFrameNum
};
if(renderType == 'svg'){
- shapeItem.an.path[offsettedFrameNum].pathString = createPathString(shape,shapeItem.closed);
+ rendered[j].shapes[i].path.pathString = createPathString(shape,shapeItem.closed);
}
}else if(shapeItem.el){
elmPos = getInterpolatedValue(shapeItem.el.p,offsettedFrameNum, item.startTime);
elmSize = getInterpolatedValue(shapeItem.el.s,offsettedFrameNum, item.startTime);
- shapeItem.an.ell[offsettedFrameNum] = {
+ rendered[j].shapes[i].ell = {
p : elmPos,
size : elmSize,
forwardFrame : offsettedFrameNum
@@ -495,7 +509,7 @@
elmPos = getInterpolatedValue(shapeItem.rc.p,offsettedFrameNum, item.startTime);
elmSize = getInterpolatedValue(shapeItem.rc.s,offsettedFrameNum, item.startTime);
elmRound = getInterpolatedValue(shapeItem.rc.r,offsettedFrameNum, item.startTime);
- shapeItem.an.rect[offsettedFrameNum] = {
+ rendered[j].shapes[i].rect = {
position : elmPos,
size : elmSize,
roundness : elmRound,
@@ -506,7 +520,7 @@
strokeColor = getInterpolatedValue(shapeItem.st.c,offsettedFrameNum, item.startTime);
strokeOpacity = getInterpolatedValue(shapeItem.st.o,offsettedFrameNum, item.startTime);
strokeWidth = getInterpolatedValue(shapeItem.st.w,offsettedFrameNum, item.startTime);
- shapeItem.an.stroke[offsettedFrameNum] = {
+ rendered[j].shapes[i].stroke = {
color : rgbToHex(Math.round(strokeColor[0]),Math.round(strokeColor[1]),Math.round(strokeColor[2])),
opacity : strokeOpacity instanceof Array ? strokeOpacity[0]/100 : strokeOpacity/100,
width : strokeWidth instanceof Array ? strokeWidth[0] : strokeWidth,
@@ -527,12 +541,13 @@
shapeTrOb.mtArr = matrixInstance.getMatrixArray(shapeTrOb);
shapeTrOb.forwardFrame = offsettedFrameNum;
shapeItem.an.tr[offsettedFrameNum] = shapeTrOb;
+ rendered[j].shapes[i].tr = shapeTrOb;
if(shapeItem.trim){
var trimS = getInterpolatedValue(shapeItem.trim.s,offsettedFrameNum, item.startTime);
var trimE = getInterpolatedValue(shapeItem.trim.e,offsettedFrameNum, item.startTime);
var trimO = getInterpolatedValue(shapeItem.trim.o,offsettedFrameNum, item.startTime);
- shapeItem.trim.an[offsettedFrameNum] = {
+ rendered[j].shapes[i].trim = {
s: trimS,
e: trimE,
o: trimO,
@@ -547,8 +562,33 @@
}
}
- function renderFrame(layers,num, renderType){
- iterateLayers(layers, num, renderType);
+ function renderFrame(animationId,num){
+ var renderedArray = [];
+ iterateLayers(animations[animationId].animation.layers, num, animations[animationId]._animType, renderedArray);
+ populateLayers(animations[animationId].animation.layers, num,renderedArray);
+ }
+
+ function populateLayers(layers, num, rendered){
+ var i, len = layers.length, j, jLen;
+ var offsettedFrameNum, timeRemapped;
+ var shapes;
+ for(i=0;i<len;i+=1){
+ if(rendered[i] == ''){
+ continue;
+ }
+ offsettedFrameNum = num - layers[i].startTime;
+ layers[i].renderedData[offsettedFrameNum] = rendered[i];
+ if(layers[i].type == 'PreCompLayer'){
+ timeRemapped = layers[i].tm ? layers[i].tm[offsettedFrameNum] < 0 ? 0 : layers[i].tm[offsettedFrameNum] : offsettedFrameNum;
+ populateLayers(layers[i].layers,timeRemapped,rendered.renderedArray);
+ }else if(layers[i].type == 'ShapeLayer'){
+ shapes = layers[i].shapes;
+ jLen = shapes.length;
+ for(j=0;j<jLen;j+=1){
+ shapes[j].renderedData[offsettedFrameNum] = rendered[i].shapes[j];
+ }
+ }
+ }
}
var moduleOb = {};
@@ -556,4 +596,49 @@
moduleOb.renderFrame = renderFrame;
return moduleOb;
-}());
\ No newline at end of file
+};
+if(Worker && 1 == 2){
+ function handleEvents(){
+ self.onmessage = function(e){
+ var data = e.data;
+ if(data.message == 'new'){
+ dataManager.completeData(data.animation);
+ }
+ self.postMessage("new anim created");
+ }
+ }
+// URL.createObjectURL
+ window.URL = window.URL || window.webkitURL;
+// Build a worker from an anonymous function body
+ var blobURL = URL.createObjectURL( new Blob([
+ handleEvents.toString(),
+ matrixManagerFunction.toString(),
+ 'var MatrixManager = matrixManagerFunction;',
+
+ dataFunctionManager.toString(),
+ Matrix.toString(),
+
+ 'var dataManager = dataFunctionManager();handleEvents();' ], { type: 'application/javascript' } ) ),
+
+ worker = new Worker( blobURL );
+// Won't be needing this anymore
+ URL.revokeObjectURL( blobURL );
+
+ worker.addEventListener('message',function(e){
+ console.log('mensaje', e.data);
+ })
+ var dataManager = function(){
+ function completeData(animationData){
+ worker.postMessage({message:'new',animation:animationData});
+ }
+ function renderFrame(num){
+
+ }
+ return {
+ completeData: completeData
+ }
+ }();
+
+}else{
+ var dataManager = dataFunctionManager();
+}
\ No newline at end of file
diff --git a/player/js/utils/MatrixManager.js b/player/js/utils/MatrixManager.js
index 9a57e1c..9e5ac33 100644
--- a/player/js/utils/MatrixManager.js
+++ b/player/js/utils/MatrixManager.js
@@ -1,4 +1,4 @@
-var MatrixManager = function(){
+function matrixManagerFunction(){
var mat = new Matrix();
@@ -135,4 +135,5 @@
getMatrixArray : getMatrixArray
}
-};
\ No newline at end of file
+};
+var MatrixManager = matrixManagerFunction;
\ No newline at end of file
