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);