performance optimizations
diff --git a/player/index.html b/player/index.html
index abebb73..ecc9527 100644
--- a/player/index.html
+++ b/player/index.html
@@ -193,16 +193,20 @@
//elem.style.display = 'none';
var animData = {
container: elem,
- renderer: 'svg',
+ renderer: 'canvas',
loop: false,
- autoplay: true,
+ autoplay: false,
rendererSettings: {
progressiveLoad:false,
},
- path: 'exports/render/data.json'
+ path: 'exports/bm/data.json'
};
anim = lottie.loadAnimation(animData);
anim.setSubframe(false);
+
+ setTimeout(function() {
+ anim.playSegments([30,35], true)
+ }, 2000);
</script>
</body>
</html>
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index fa0aab4..b90d66f 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -243,40 +243,43 @@
ctx.fillStyle = currentStyle.co;
}
renderer.ctxOpacity(currentStyle.coOp);
- if(type !== 'st'){
- ctx.beginPath();
- }
- jLen = elems.length;
- for(j=0;j<jLen;j+=1){
- if(type === 'st'){
+ if(this.globalData.currentGlobalAlpha !== 0) {
+ if(type !== 'st'){
ctx.beginPath();
- if(currentStyle.da){
- ctx.setLineDash(currentStyle.da);
- ctx.lineDashOffset = currentStyle.do;
- this.globalData.isDashed = true;
- }else if(this.globalData.isDashed){
- ctx.setLineDash(this.dashResetter);
- this.globalData.isDashed = false;
- }
}
- nodes = elems[j].trNodes;
- kLen = nodes.length;
+ jLen = elems.length;
+ for(j=0;j<jLen;j+=1){
+ if(type === 'st'){
+ ctx.beginPath();
+ if(currentStyle.da){
+ ctx.setLineDash(currentStyle.da);
+ ctx.lineDashOffset = currentStyle.do;
+ this.globalData.isDashed = true;
+ }else if(this.globalData.isDashed){
+ ctx.setLineDash(this.dashResetter);
+ this.globalData.isDashed = false;
+ }
+ }
+ nodes = elems[j].trNodes;
+ kLen = nodes.length;
- for(k=0;k<kLen;k+=1){
- if(nodes[k].t == 'm'){
- ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
- }else if(nodes[k].t == 'c'){
- ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
- }else{
- ctx.closePath();
+ for(k=0;k<kLen;k+=1){
+ if(nodes[k].t == 'm'){
+ ctx.moveTo(nodes[k].p[0],nodes[k].p[1]);
+ }else if(nodes[k].t == 'c'){
+ ctx.bezierCurveTo(nodes[k].pts[0],nodes[k].pts[1],nodes[k].pts[2],nodes[k].pts[3],nodes[k].pts[4],nodes[k].pts[5]);
+ }else{
+ ctx.closePath();
+ }
+ }
+ if(type === 'st'){
+ ctx.stroke();
}
}
- if(type === 'st'){
- ctx.stroke();
+ if(type !== 'st'){
+ ctx.fill(currentStyle.r);
}
- }
- if(type !== 'st'){
- ctx.fill(currentStyle.r);
+
}
renderer.restore();
}
diff --git a/player/js/elements/htmlElements/HShapeElement.js b/player/js/elements/htmlElements/HShapeElement.js
index 4c6b880..66f16ef 100644
--- a/player/js/elements/htmlElements/HShapeElement.js
+++ b/player/js/elements/htmlElements/HShapeElement.js
@@ -44,6 +44,7 @@
}
this.searchShapes(this.shapesData,this.itemsData,this.prevViewData,this.shapesContainer,0, [], true);
+ this.filterUniqueShapes();
this.shapeCont = cont;
};
@@ -169,6 +170,13 @@
}
}
+HShapeElement.prototype.currentBoxContains = function(box) {
+ return this.currentBBox.x <= box.x
+ && this.currentBBox.y <= box.y
+ && this.currentBBox.width + this.currentBBox.x >= box.x + box.width
+ && this.currentBBox.height + this.currentBBox.y >= box.y + box.height
+}
+
HShapeElement.prototype.renderInnerContent = function() {
this._renderShapeFrame();
@@ -183,6 +191,9 @@
tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
//var tempBoundingBox = this.shapeCont.getBBox();
+ if(this.currentBoxContains(tempBoundingBox)) {
+ return;
+ }
var changed = false;
if(this.currentBBox.w !== tempBoundingBox.width){
this.currentBBox.w = tempBoundingBox.width;
diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js
index eee73f6..a2bddbb 100644
--- a/player/js/elements/svgElements/SVGShapeElement.js
+++ b/player/js/elements/svgElements/SVGShapeElement.js
@@ -51,9 +51,7 @@
shape = this.shapes[i];
if(shape.styles.indexOf(style) !== -1) {
tempShapes.push(shape);
- if(shape.sh.k) {
- areAnimated = true;
- }
+ areAnimated = shape._isAnimated || areAnimated;
}
}
if(tempShapes.length > 1 && areAnimated) {
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index dadd1ef..f68ea38 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -15,7 +15,8 @@
this.globalData = {
frameNum: -1,
_mdf: false,
- renderConfig: this.renderConfig
+ renderConfig: this.renderConfig,
+ currentGlobalAlpha: -1
};
var i, len = 15;
this.contextData = new CVContextData();
@@ -71,10 +72,14 @@
}*/
if(!this.renderConfig.clearCanvas){
this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
+ this.globalData.currentGlobalAlpha = this.contextData.cO;
return;
}
this.contextData.cO *= op < 0 ? 0 : op;
- this.canvasContext.globalAlpha = this.contextData.cO;
+ if(this.globalData.currentGlobalAlpha !== this.contextData.cO) {
+ this.canvasContext.globalAlpha = this.contextData.cO;
+ this.globalData.currentGlobalAlpha = this.contextData.cO;
+ }
};
CanvasRenderer.prototype.reset = function(){
@@ -123,7 +128,10 @@
this.canvasContext.setTransform(popped[0],popped[1],popped[4],popped[5],popped[12],popped[13]);
popped = this.contextData.savedOp[this.contextData.cArrPos];
this.contextData.cO = popped;
- this.canvasContext.globalAlpha = popped;
+ if(this.globalData.currentGlobalAlpha !== popped) {
+ this.canvasContext.globalAlpha = popped;
+ this.globalData.currentGlobalAlpha = popped;
+ }
};
CanvasRenderer.prototype.configAnimation = function(animData){
