reusing rendered data
diff --git a/player/index.html b/player/index.html
index 93013ee..89f85bf 100644
--- a/player/index.html
+++ b/player/index.html
@@ -73,12 +73,12 @@
var animData = {
wrapper: document.getElementById('bodymovin'),
- animType: 'canvas',
- loop: true,
+ animType: 'svg',
+ loop: false,
prerender: false,
autoplay: true,
- animationData: bmsmd
- //path: 'exports/bm'
+ //animationData: bmsmd
+ path: 'exports/navidad'
};
bodymovin.setQuality(50);
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index aa721fb..3e84011 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -203,8 +203,8 @@
this.assets = this.animationData.assets;
this.frameRate = this.animationData.fr;
this.firstFrame = Math.round(this.animationData.ip*this.frameRate);
- this.firstFrame = 1500;
- this.totalFrames = 10;
+ /*this.firstFrame = 0;
+ this.totalFrames = 10;*/
this.frameMult = this.animationData.fr / 1000;
this.trigger('bm:config_ready');
this.loadSegments();
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 533c89e..7d7419c 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -113,8 +113,8 @@
return;
}
this.currentAnimData = this.data.renderedData[num].an;
- var mat = this.currentAnimData.matrixArray;
- this.ownMatrix.reset().transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]).translate(-this.currentAnimData.tr.a[0],-this.currentAnimData.tr.a[1]);
+ var mat = this.currentAnimData.m;
+ this.ownMatrix.reset().transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]).translate(-this.currentAnimData.a[0],-this.currentAnimData.a[1]);
};
BaseElement.prototype.renderFrame = function(num,parentTransform){
@@ -145,7 +145,7 @@
if(this.data.hasMask){
this.maskManager.renderFrame(num);
}
- this.finalTransform.opacity *= this.currentAnimData.tr.o;
+ this.finalTransform.opacity *= this.currentAnimData.o;
var mat;
var finalMat = this.finalTransform.mat;
diff --git a/player/js/elements/ShapeItemElement.js b/player/js/elements/ShapeItemElement.js
index 6229ae9..3fe260a 100644
--- a/player/js/elements/ShapeItemElement.js
+++ b/player/js/elements/ShapeItemElement.js
@@ -174,7 +174,7 @@
groupTransform = parentTransform;
for(i=len;i>=0;i-=1){
if(items[i].ty == 'tr'){
- var mtArr = items[i].renderedData[num].mtArr;
+ var mtArr = items[i].renderedData[num].m;
groupTransform = data[i].transform;
groupMatrix = groupTransform.mat;
groupMatrix.reset();
@@ -352,8 +352,7 @@
viewData.ld = renderedFrameData.dNTr;
}
if(viewData.lt != renderedFrameData.t) {
- ////viewData.elements[i].el.setAttribute('transform',renderedFrameData.t);
- viewData.elements[i].el.style.transform = renderedFrameData.t;
+ viewData.elements[i].el.setAttribute('transform',renderedFrameData.t);
viewData.lt = renderedFrameData.t;
}
}else{
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index 9eee8f7..4fa7e2b 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -31,8 +31,8 @@
return false;
}
this.currentAnimData = this.data.renderedData[num].an;
- var mat = this.currentAnimData.matrixArray;
- this.ownMatrix.reset().transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]).translate(-this.currentAnimData.tr.a[0],-this.currentAnimData.tr.a[1]);
+ var mat = this.currentAnimData.m;
+ this.ownMatrix.reset().transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]).translate(-this.currentAnimData.a[0],-this.currentAnimData.a[1]);
if(this.data.ip - this.data.st <= num && this.data.op - this.data.st >= num)
{
this.renderFrame = true;
@@ -60,7 +60,7 @@
var mat, finalMat = this.finalTransform.mat;
- this.finalTransform.opacity *= this.currentAnimData.tr.o;
+ this.finalTransform.opacity *= this.currentAnimData.o;
if(parentTransform){
mat = parentTransform.mat.props;
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js
index d69c06c..421210e 100644
--- a/player/js/elements/canvasElements/CVShapeItemElement.js
+++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -201,7 +201,7 @@
CVShapeItemElement.prototype.renderTransform = function(animData){
var tr = animData.renderedData[this.frameNum];
- var matrixValue = tr.mtArr;
+ var matrixValue = tr.m;
this.transform.mat.transform(matrixValue[0],matrixValue[1],matrixValue[2],matrixValue[3],matrixValue[4],matrixValue[5]).translate(-tr.a[0],-tr.a[1]);
this.transform.opacity *= tr.o;
};
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 88218ee..69309f2 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -200,7 +200,6 @@
if(this.lastFrame == num || this.destroyed){
return;
}
- window.contador = 0;
if(num === null){
num = this.lastFrame;
}else{
@@ -214,5 +213,4 @@
for (i = 0; i < len; i++) {
this.elements[i].renderFrame(num - this.layers[i].st);
}
- //console.log('window.contador: ',window.contador);
};
\ No newline at end of file
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 7e12618..2e957d6 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -46,6 +46,7 @@
}
layerData.renderedFrame = {};
layerData.renderedData = {};
+ layerData.__lastMatrix = [0,0,0,0,0];
animArray = [];
lastFrame = -1;
if(layerData.tm){
@@ -158,6 +159,7 @@
}else{
transformData.r *= degToRads;
}
+ transformData.lastMat = [0,0,0,0,0];
}else if(arr[i].ty == 'rc' || arr[i].ty == 'el'){
arr[i].trimmed = isTrimmed;
arr[i].trimmed = true;
@@ -706,23 +708,27 @@
};
}());
+ function RenderedTransform(a,o,m){
+ this.a = a;
+ this.o = o;
+ this.m = m;
+ }
+
var mtParams = [0,1,1,0,0];
function iterateLayers(layers, frameNum,renderType){
- var dataOb;
var maskProps;
var timeRemapped;
var offsettedFrameNum, i, len, renderedData;
- var j, jLen = layers.length, item, matArr, newData;
+ var j, jLen = layers.length, item, newData;
for(j=0;j<jLen;j+=1){
item = layers[j];
if(!('ks' in layers[j])) {
continue;
}
offsettedFrameNum = frameNum - item.st;
- dataOb = {};
- dataOb.a = getInterpolatedValue(item.ks.a,offsettedFrameNum, item.st);
- dataOb.o = getInterpolatedValue(item.ks.o,offsettedFrameNum, item.st);
+ var a = getInterpolatedValue(item.ks.a,offsettedFrameNum, item.st);
+ var o = getInterpolatedValue(item.ks.o,offsettedFrameNum, item.st);
if(item.ks.p.s){
getInterpolatedValue(item.ks.p.x,offsettedFrameNum, item.st,mtParams,3,1);
getInterpolatedValue(item.ks.p.y,offsettedFrameNum, item.st,mtParams,4,1);
@@ -732,15 +738,15 @@
getInterpolatedValue(item.ks.r,offsettedFrameNum, item.st,mtParams,0,1);
getInterpolatedValue(item.ks.s,offsettedFrameNum, item.st,mtParams,1,2);
renderedData = {};
- matArr = matrixInstance.getMatrixArrayFromParams(mtParams[0],mtParams[1],mtParams[2],mtParams[3],mtParams[4]);
newData = false;
- if(!item.__lastRenderAn || dataOb.o !== item.__lastRenderAn.tr.o || dataOb.a[0] !== item.__lastRenderAn.tr.a[0] || dataOb.a[1] !== item.__lastRenderAn.tr.a[1] || matArr[1] !== item.__lastRenderAn.matrixArray[1] || matArr[2] !== item.__lastRenderAn.matrixArray[2] || matArr[3] !== item.__lastRenderAn.matrixArray[3] || matArr[4] !== item.__lastRenderAn.matrixArray[4] || matArr[5] !== item.__lastRenderAn.matrixArray[5]){
- renderedData.an = {
- tr: dataOb
- };
- renderedData.an.matrixArray = matArr;
+ if(!item.__lastRenderAn || o !== item.__lastRenderAn.o || a !== item.__lastRenderAn.a || mtParams[0] !== item.__lastMatrix[0]
+ || mtParams[1] !== item.__lastMatrix[1] || mtParams[2] !== item.__lastMatrix[2] || mtParams[3] !== item.__lastMatrix[3] || mtParams[4] !== item.__lastMatrix[4] ){
+ renderedData.an = new RenderedTransform(a,o,matrixInstance.getMatrixArrayFromParams(mtParams[0],mtParams[1],mtParams[2],mtParams[3],mtParams[4]))
item.__lastRenderAn = renderedData.an;
+ for(i=0;i<5;i+=1){
+ item.__lastMatrix[i] = mtParams[i];
+ }
}else{
renderedData.an = item.__lastRenderAn;
}
@@ -986,14 +992,21 @@
shapeItem.renderedData[offsettedFrameNum].color = rgbToHex(bm_rounder(strokeColor[0]),bm_rounder(strokeColor[1]),bm_rounder(strokeColor[2]));
}
}else if(shapeItem.ty == 'tr'){
- shapeItem.renderedData[offsettedFrameNum] = {
- a : getInterpolatedValue(shapeItem.a,offsettedFrameNum, startTime),
- o : getInterpolatedValue(shapeItem.o,offsettedFrameNum, startTime)
- };
+ var a = getInterpolatedValue(shapeItem.a,offsettedFrameNum, startTime);
+ var o = getInterpolatedValue(shapeItem.o,offsettedFrameNum, startTime);
getInterpolatedValue(shapeItem.s,offsettedFrameNum, startTime,mtParams,1,2);
getInterpolatedValue(shapeItem.r,offsettedFrameNum, startTime,mtParams,0,1);
getInterpolatedValue(shapeItem.p,offsettedFrameNum, startTime,mtParams,3,2);
- shapeItem.renderedData[offsettedFrameNum].mtArr = matrixInstance.getMatrixArrayFromParams(mtParams[0],mtParams[1],mtParams[2],mtParams[3],mtParams[4]);
+ if(shapeItem.lastData && shapeItem.lastData.a == a && shapeItem.lastData.o == o && shapeItem.lastMat[0] == mtParams[0]
+ && shapeItem.lastMat[1] == mtParams[1] && shapeItem.lastMat[2] == mtParams[2] && shapeItem.lastMat[3] == mtParams[3] && shapeItem.lastMat[4] == mtParams[4]){
+ shapeItem.renderedData[offsettedFrameNum] = shapeItem.lastData;
+ }else{
+ shapeItem.renderedData[offsettedFrameNum] = new RenderedTransform(a,o,matrixInstance.getMatrixArrayFromParams(mtParams[0],mtParams[1],mtParams[2],mtParams[3],mtParams[4]));
+ for(j=0;j<5;j+=1){
+ shapeItem.lastMat[j] = mtParams[j];
+ }
+ shapeItem.lastData = shapeItem.renderedData[offsettedFrameNum];
+ }
}else if(shapeItem.ty == 'tm'){
trimS = getInterpolatedValue(shapeItem.s,offsettedFrameNum, startTime);
trimE = getInterpolatedValue(shapeItem.e,offsettedFrameNum, startTime);
