partial
diff --git a/gulpfile.js b/gulpfile.js
index ae3a2af..62595db 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -158,6 +158,6 @@
'player/js/module.js'
])
.pipe(concat('concat.js', {newLine: '\r\n'}))
- .pipe(wrap('\'use strict\';\r\n(function(){\r\n<%= contents %>\r\n}());'))
+ .pipe(wrap('\r\n(function(){\r\n\'use strict\';\r\n<%= contents %>\r\n}());'))
.pipe(gulp.dest('build/player/'))
});
\ No newline at end of file
diff --git a/player/index.html b/player/index.html
index ec01d29..1f9d66e 100644
--- a/player/index.html
+++ b/player/index.html
@@ -36,6 +36,6 @@
<!-- endbuild -->
</head>
<body style="background-color:#666; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:600px;height:300px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/gear" data-bm-type="svg" data-bm-loop="false" data-bm-prerender="true"></div>
+<div style="width:690px;height:913px;background-color:#000;display:inline-block" class="bodymovin" data-bm-path="exports/gear" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="true"></div>
</body>
</html>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index aad5c07..d461e21 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -125,7 +125,7 @@
this.frameRate = this.animationData.animation.frameRate;
this.frameMult = this.animationData.animation.frameRate / 1000;
dataManager.completeData(this.animationData);
- this.renderer.buildItems(this.animationData.animation.layers);
+ this.renderer.buildItems(this.animationData.animation.layers,this.container);
this.updaFrameModifier();
this.checkLoaded();
};
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 5e13cfc..fd921be 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -1,9 +1,13 @@
-var BaseElement = function (data, animationItem){
+var BaseElement = function (data, animationItem,parentContainer){
this.animationItem = animationItem;
this.data = data;
- this.transformChanged = false;
this.forceRender = false;
- this.currentMatrix = new Matrix();
+ this.ownMatrix = new Matrix();
+ this.finalTransform = {
+ mat: new Matrix(),
+ op: 1
+ };
+ this.parentContainer = parentContainer;
this.init();
};
@@ -18,35 +22,37 @@
};
BaseElement.prototype.createElements = function(){
- this.layerElement = document.createElementNS(svgNS,'g');
- this.layerElement.setAttribute('id',this.data.layerName);
+ if(this.data.hasMask){
+ this.layerElement = document.createElementNS(svgNS,'g');
+ }else{
+ this.layerElement = this.parentContainer;
+ }
this.maskingGroup = this.layerElement;
this.maskedElement = this.layerElement;
};
BaseElement.prototype.prepareFrame = function(num){
this.currentAnimData = this.data.renderedData[num].an;
- if(this.data.renderedFrame.tr !== this.currentAnimData.matrixValue){
- this.transformChanged = true;
- this.data.renderedFrame.tr = this.currentAnimData.matrixValue;
- }else{
- this.transformChanged = false;
- }
+ this.data.renderedFrame.tr = this.currentAnimData.matrixValue;
+ var mat = this.currentAnimData.matrixArray;
+ this.ownMatrix.reset();
+ this.ownMatrix.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
+ this.ownMatrix.translate(-this.currentAnimData.tr.a[0],-this.currentAnimData.tr.a[1]);
};
-BaseElement.prototype.renderFrame = function(num){
+BaseElement.prototype.renderFrame = function(num,parentTransform){
if(this.data.inPoint - this.data.startTime <= num && this.data.outPoint - this.data.startTime > num)
{
if(this.isVisible !== true){
this.isVisible = true;
this.forceRender = true;
- this.mainElement.setAttribute('opacity',1);
}
+ this.finalTransform.opacity = 1;
}else{
if(this.isVisible !== false){
this.isVisible = false;
- this.mainElement.setAttribute('opacity',0);
}
+ this.finalTransform.opacity = 0;
}
if(this.data.eff){
@@ -61,58 +67,37 @@
this.maskManager.renderFrame(num);
}
- if(this.data.renderedFrame.o !== this.currentAnimData.tr.o){
- this.data.renderedFrame.o = this.currentAnimData.tr.o;
- if(this.isVisible){
- this.layerElement.setAttribute('opacity',this.currentAnimData.tr.o);
- }
+ this.finalTransform.opacity *= this.currentAnimData.tr.o;
+
+ if(parentTransform){
+ this.finalTransform.mat.reset();
+ mat = parentTransform.mat.props;
+ this.finalTransform.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
+ this.finalTransform.opacity *= parentTransform.opacity;
}
- var transformValue = '';
-
-
if(this.data.parents){
- var changedFlag = false;
- var i = 0, len = this.data.parents.length, parentAnimData;
- if(!this.transformChanged){
- while(i<len){
- if(this.data.parents[i].elem.element.transformChanged){
- changedFlag = true;
- break;
- }
- i+=1;
- }
- }else{
- changedFlag = true;
+ var i, len = this.data.parents.length, parentAnimData,mat;
+ if(!parentTransform){
+ this.finalTransform.mat.reset();
}
- if(changedFlag){
- for(i=len-1;i>=0;i-=1){
- parentAnimData = this.data.parents[i].elem.element.currentAnimData;
- transformValue += parentAnimData.matrixValue + ' ';
- }
- transformValue += this.currentAnimData.matrixValue;
- if(this.isVisible){
- this.layerElement.setAttribute('transform',transformValue);
- }
- this.fullTransform = transformValue;
+ for(i=len-1;i>=0;i-=1){
+ mat = this.data.parents[i].elem.element.ownMatrix.props;
+ this.finalTransform.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
+ parentAnimData = this.data.parents[i].elem.element.currentAnimData;
}
- }else if(this.transformChanged){
- transformValue += this.currentAnimData.matrixValue;
+ mat = this.ownMatrix.props;
+ this.finalTransform.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
+ }else{
if(this.isVisible){
- var mat = this.currentAnimData.matrixArray;
- this.currentMatrix.reset();
- this.currentMatrix.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
- this.currentMatrix.translate(-this.currentAnimData.tr.a[0],-this.currentAnimData.tr.a[1]);
- //this.layerElement.setAttribute('transform',transformValue);
+ if(!parentTransform){
+ this.finalTransform.mat = this.ownMatrix;
+ }else{
+ mat = this.ownMatrix.props;
+ this.finalTransform.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5]);
+ }
}
- this.fullTransform = transformValue;
}
- if(this.forceRender){
- this.forceRender = false;
- this.layerElement.setAttribute('opacity',this.currentAnimData.tr.o);
- //this.layerElement.setAttribute('transform',this.fullTransform);
- }
-
return this.isVisible;
};
diff --git a/player/js/elements/CompElement.js b/player/js/elements/CompElement.js
index d375452..96551b8 100644
--- a/player/js/elements/CompElement.js
+++ b/player/js/elements/CompElement.js
@@ -1,21 +1,15 @@
-function ICompElement(data, animationItem){
- this.parent.constructor.call(this,data, animationItem);
+function ICompElement(data, animationItem,parentContainer){
+ this.parent.constructor.call(this,data, animationItem,parentContainer);
this.layers = data.layers;
}
createElement(BaseElement, ICompElement);
-ICompElement.prototype.createElements = function(){
-
- this.svgElem = document.createElementNS (svgNS, "g");
- this.parent.createElements.call(this);
-};
-
ICompElement.prototype.getComposingElement = function(){
return this.layerElement;
};
-ICompElement.prototype.renderFrame = function(num){
- var renderParent = this.parent.renderFrame.call(this,num);
+ICompElement.prototype.renderFrame = function(num,parentMatrix){
+ var renderParent = this.parent.renderFrame.call(this,num,parentMatrix);
if(renderParent===false){
return;
}
@@ -26,6 +20,6 @@
this.layers[i].element.prepareFrame(timeRemapped - this.layers[i].startTime);
}
for( i = 0; i < len; i+=1 ){
- this.layers[i].element.renderFrame(timeRemapped - this.layers[i].startTime);
+ this.layers[i].element.renderFrame(timeRemapped - this.layers[i].startTime,this.finalTransform);
}
};
\ No newline at end of file
diff --git a/player/js/elements/ImageElement.js b/player/js/elements/ImageElement.js
index 50afe0b..f51de21 100644
--- a/player/js/elements/ImageElement.js
+++ b/player/js/elements/ImageElement.js
@@ -1,8 +1,8 @@
-function IImageElement(data, animationItem){
+function IImageElement(data, animationItem,parentContainer){
this.animationItem = animationItem;
this.assets = this.animationItem.getAssets();
this.path = this.animationItem.getPath();
- this.parent.constructor.call(this,data, animationItem);
+ this.parent.constructor.call(this,data, animationItem,parentContainer);
}
createElement(BaseElement, IImageElement);
@@ -20,16 +20,13 @@
img.addEventListener('load', imageLoaded, false);
img.src = this.path+this.assets[this.data.assetId].path;
- this.svgElem = document.createElementNS(svgNS, "g");
-
this.parent.createElements.call(this);
this.image = document.createElementNS(svgNS,'image');
this.image.setAttribute('width',this.data.width+"px");
this.image.setAttribute('height',this.data.height+"px");
- this.svgElem.appendChild(this.image);
- this.layerElement.appendChild(this.svgElem);
- this.maskingGroup = this.svgElem;
+ this.layerElement.appendChild(this.image);
+ this.maskingGroup = this.image;
styleUnselectableDiv(this.image);
};
\ No newline at end of file
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js
index 914d090..342d783 100644
--- a/player/js/elements/ShapeElement.js
+++ b/player/js/elements/ShapeElement.js
@@ -1,6 +1,6 @@
-function IShapeElement(data, animationItem){
+function IShapeElement(data, animationItem,parentContainer){
this.shapes = [];
- this.parent.constructor.call(this,data, animationItem);
+ this.parent.constructor.call(this,data, animationItem,parentContainer);
}
createElement(BaseElement, IShapeElement);
@@ -19,21 +19,36 @@
}
};
-IShapeElement.prototype.renderFrame = function(num){
- var renderParent = this.parent.renderFrame.call(this,num);
+IShapeElement.prototype.renderFrame = function(num,parentMatrix){
+ var renderParent = this.parent.renderFrame.call(this,num,parentMatrix);
if(renderParent===false){
+ if(!this.hidden){
+ this.hideShapes();
+ }
return;
}
this.renderShapes(num);
};
-IShapeElement.prototype.renderShapes = function(num){
+IShapeElement.prototype.hideShapes = function(){
var i,len = this.data.shapes.length,shapeData;
var shapeItem;
for(i=len-1;i>=0;i--){
shapeData = this.data.shapes[i];
shapeItem = this.shapes[len - 1 - i];
- shapeItem.renderShape(num,this.currentMatrix);
+ shapeItem.hideShape();
+ }
+ this.hidden = true;
+};
+
+IShapeElement.prototype.renderShapes = function(num){
+ this.hidden = false;
+ var i,len = this.data.shapes.length,shapeData;
+ var shapeItem;
+ for(i=len-1;i>=0;i--){
+ shapeData = this.data.shapes[i];
+ shapeItem = this.shapes[len - 1 - i];
+ shapeItem.renderShape(num,this.finalTransform);
}
};
\ No newline at end of file
diff --git a/player/js/elements/ShapeItemElement.js b/player/js/elements/ShapeItemElement.js
index 058fa18..c896ccf 100644
--- a/player/js/elements/ShapeItemElement.js
+++ b/player/js/elements/ShapeItemElement.js
@@ -14,6 +14,12 @@
var ownArrays = [];
for(i=len;i>=0;i-=1){
if(arr[i].ty == 'fl' || arr[i].ty == 'st'){
+ arr[i].renderedFrames = [];
+ arr[i].lastData = {
+ c: '',
+ o:'',
+ w: ''
+ };
this.stylesList.push({
elements: [],
type: arr[i].ty,
@@ -24,9 +30,18 @@
}else if(arr[i].ty == 'gr'){
this.searchShapes(arr[i].it);
}else if(arr[i].ty == 'tr'){
- arr[i].matrix = new Matrix();
+ arr[i].transform = {
+ mat: new Matrix(),
+ opacity: 1
+ };
}else if(arr[i].ty == 'sh'){
arr[i].elements = [];
+ arr[i].renderedFrames = [];
+ arr[i].lastData = {
+ d: '',
+ o:'',
+ tr:''
+ };
jLen = this.stylesList.length;
for(j=0;j<jLen;j+=1){
if(!this.stylesList[j].closed){
@@ -34,11 +49,27 @@
arr[i].elements.push(pathNode);
this.shape.appendChild(pathNode);
this.stylesList[j].elements.push(pathNode);
+ if(this.stylesList[j].type == 'st'){
+ pathNode.setAttribute('fill-opacity',0);
+ pathNode.setAttribute('stroke-linejoin','round');
+ pathNode.setAttribute('stroke-linecap','round');
+ }
}
}
}else if(arr[i].ty == 'rc'){
arr[i].elements = [];
+ arr[i].renderedFrames = [];
+ arr[i].lastData = {
+ roundness: '',
+ w: '',
+ h: '',
+ x: '',
+ y:'',
+ o:'',
+ tr:''
+ };
+ arr[i].renderedFrames = [];
jLen = this.stylesList.length;
for(j=0;j<jLen;j+=1){
if(!this.stylesList[j].closed){
@@ -46,11 +77,23 @@
arr[i].elements.push(pathNode);
this.shape.appendChild(pathNode);
this.stylesList[j].elements.push(pathNode);
+ if(this.stylesList[j].type == 'st'){
+ pathNode.setAttribute('fill-opacity',0);
+ }
}
}
}else if(arr[i].ty == 'el'){
arr[i].elements = [];
+ arr[i].renderedFrames = [];
+ arr[i].lastData = {
+ cx: '',
+ cy: '',
+ rx: '',
+ ry: '',
+ o:'',
+ tr:''
+ };
jLen = this.stylesList.length;
for(j=0;j<jLen;j+=1){
if(!this.stylesList[j].closed){
@@ -58,6 +101,9 @@
arr[i].elements.push(pathNode);
this.shape.appendChild(pathNode);
this.stylesList[j].elements.push(pathNode);
+ if(this.stylesList[j].type == 'st'){
+ pathNode.setAttribute('fill-opacity',0);
+ }
}
}
@@ -66,7 +112,6 @@
len = ownArrays.length;
for(i=0;i<len;i+=1){
ownArrays[i].closed = true;
- console.log('ownArrays[i]: ',ownArrays[i]);
}
};
@@ -74,156 +119,253 @@
return this.shape;
};
-ShapeItemElement.prototype.renderShape = function(num,matrix,items){
+ShapeItemElement.prototype.hideShape = function(){
+ var i, len = this.stylesList.length;
+ var j, jLen;
+ var elements;
+ for(i=0;i<len;i+=1){
+ elements = this.stylesList[i].elements;
+ jLen = elements.length;
+ for(j=0;j<jLen;j+=1){
+ elements[j].setAttribute('opacity','0');
+ }
+ }
+};
+
+ShapeItemElement.prototype.renderShape = function(num,parentTransform,items){
if(!items){
items = this.data;
}
this.posCount = 0;
this.frameNum = num;
var i, len;
- var j, jLen;
- var styleElem;
len = items.length - 1;
- var groupMatrix;
+ var groupTransform,groupMatrix;
for(i=len;i>=0;i-=1){
if(items[i].ty == 'tr'){
- var props = matrix.props;
+ var props = parentTransform.mat.props;
var mtArr = items[i].renderedData[num].mtArr;
- groupMatrix = items[i].matrix;
+ groupTransform = items[i].transform;
+ groupTransform.opacity = parentTransform.opacity;
+ groupTransform.opacity *= items[i].renderedData[num].o;
+ groupMatrix = groupTransform.mat;
groupMatrix.reset().transform(props[0],props[1],props[2],props[3],props[4],props[5]).transform(mtArr[0],mtArr[1],mtArr[2],mtArr[3],mtArr[4],mtArr[5]).translate(-items[i].renderedData[num].a[0],-items[i].renderedData[num].a[1]);
}else if(items[i].ty == 'sh'){
- this.renderPath(items[i],num,groupMatrix);
+ this.renderPath(items[i],num,groupTransform);
}else if(items[i].ty == 'el'){
- this.renderEllipse(items[i],num,groupMatrix);
+ this.renderEllipse(items[i],num,groupTransform);
}else if(items[i].ty == 'rc'){
- this.renderRect(items[i],num,groupMatrix);
+ this.renderRect(items[i],num,groupTransform);
}else if(items[i].ty == 'fl'){
- styleElem = items[i].style;
- jLen = styleElem.elements.length;
- for(j=0;j<jLen;j+=1){
- styleElem.elements[j].setAttribute('fill',items[i].renderedData[num].color);
- styleElem.elements[j].setAttribute('fill-opacity',items[i].renderedData[num].opacity);
- }
+ this.renderFill(items[i],num);
}else if(items[i].ty == 'st'){
- styleElem = items[i].style;
- jLen = styleElem.elements.length;
- for(j=0;j<jLen;j+=1){
- styleElem.elements[j].setAttribute('stroke-width',items[i].renderedData[num].width);
- styleElem.elements[j].setAttribute('stroke',items[i].renderedData[num].color);
- styleElem.elements[j].setAttribute('stroke-opacity',items[i].renderedData[num].opacity);
- styleElem.elements[j].setAttribute('fill-opacity',0);
- }
+ this.renderStroke(items[i],num);
}else if(items[i].ty == 'gr'){
- this.renderShape(num,this.currentMatrix,items[i].it);
+ this.renderShape(num,groupTransform,items[i].it);
}
}
};
-ShapeItemElement.prototype.renderPath = function(pathData,num,matrix){
- if(!pathData.renderedFrames){
- pathData.renderedFrames = [];
+ShapeItemElement.prototype.renderPath = function(pathData,num,transform){
+ if(!pathData.renderedFrames[num]){
+ pathData.renderedFrames[num] = {
+ d: pathData.renderedData[num].path.pathString,
+ tr: 'matrix('+transform.mat.props.join(',')+')',
+ o: transform.opacity
+ };
}
- var pathString = '';
- if(pathData.renderedFrames[num]){
- pathString = pathData.renderedFrames[num];
- }else{
- pathString = pathData.renderedData[num].path.pathString;
- pathData.renderedFrames[num] = pathString;
- }
+ var pathString = pathData.renderedFrames[num].d;
+ var transformString = pathData.renderedFrames[num].tr;
+ var opacity = pathData.renderedFrames[num].o;
var elements = pathData.elements;
var i, len = elements.length;
for(i=0;i<len;i+=1){
- //this.stylesList[i].d += pathData.path.pathString;
- elements[i].setAttribute('d',pathString);
- elements[i].setAttribute('transform','matrix('+matrix.props.join(',')+')');
+ if(pathData.lastData.d != pathString){
+ elements[i].setAttribute('d',pathString);
+ }
+ if(pathData.lastData.tr != transformString){
+ elements[i].setAttribute('transform',transformString);
+ }
+ if(pathData.lastData.o != opacity){
+ elements[i].setAttribute('opacity',opacity);
+ }
}
+ pathData.lastData.d = pathString;
+ pathData.lastData.tr = transformString;
+ pathData.lastData.o = opacity;
};
-ShapeItemElement.prototype.renderEllipse = function(ellipseData,num,matrix){
- // cx="40" cy="40" rx="30" ry="15"
-
+ShapeItemElement.prototype.renderEllipse = function(ellipseData,num,transform){
+ var ellipseAttrs = ellipseData.renderedData[num];
+ if(!ellipseData.renderedFrames[num]){
+ ellipseData.renderedFrames[num] = {
+ cx: ellipseAttrs.p[0],
+ cy: ellipseAttrs.p[1],
+ rx: ellipseAttrs.size[0]/2,
+ ry: ellipseAttrs.size[1]/2,
+ tr: 'matrix('+transform.mat.props.join(',')+')',
+ o: transform.opacity
+ };
+ }
+ var cx = ellipseData.renderedFrames[num].cx;
+ var cy = ellipseData.renderedFrames[num].cy;
+ var rx = ellipseData.renderedFrames[num].rx;
+ var ry = ellipseData.renderedFrames[num].ry;
+ var tr = ellipseData.renderedFrames[num].tr;
+ var o = ellipseData.renderedFrames[num].o;
var elements = ellipseData.elements;
- var ellipseAttrs = ellipseData.renderedData[num];
- console.log(ellipseAttrs);
var i, len = elements.length;
for(i=0;i<len;i+=1){
- elements[i].setAttribute('cx',ellipseAttrs.p[0]);
- elements[i].setAttribute('cy',ellipseAttrs.p[1]);
- elements[i].setAttribute('rx',ellipseAttrs.size[0]/2);
- elements[i].setAttribute('ry',ellipseAttrs.size[1]/2);
- //elements[i].setAttribute('transform','matrix('+matrix.props.join(',')+')');
+ if(ellipseData.lastData.cx != cx){
+ elements[i].setAttribute('cx',cx);
+ }
+ if(ellipseData.lastData.cy != cy){
+ elements[i].setAttribute('cy',cy);
+ }
+ if(ellipseData.lastData.rx != rx){
+ elements[i].setAttribute('rx',rx);
+ }
+ if(ellipseData.lastData.ry != ry){
+ elements[i].setAttribute('ry',ry);
+ }
+ if(ellipseData.lastData.tr != tr){
+ elements[i].setAttribute('transform',tr);
+ }
+ if(ellipseData.lastData.o != o){
+ elements[i].setAttribute('opacity',o);
+ }
}
+ ellipseData.lastData.cx = cx;
+ ellipseData.lastData.cy = cy;
+ ellipseData.lastData.rx = rx;
+ ellipseData.lastData.ry = ry;
+ ellipseData.lastData.tr = tr;
+ ellipseData.lastData.o = o;
};
-ShapeItemElement.prototype.renderRect = function(rectData,num,matrix){
+ShapeItemElement.prototype.renderRect = function(rectData,num,transform){
var elements = rectData.elements;
- var ellipseAttrs = rectData.renderedData[num];
- var animData = this.currentData;
+ var rectAttrs = rectData.renderedData[num];
+ var roundness;
+ if(!rectData.renderedFrames[num]){
+ roundness = rectAttrs.roundness;
+
+ if(roundness > rectAttrs.size[0]/2){
+ roundness = rectAttrs.size[0]/2;
+ }
+ if(roundness > rectAttrs.size[1]/2){
+ roundness = rectAttrs.size[1]/2;
+ }
+ rectData.renderedFrames[num] = {
+ round: roundness,
+ w: rectAttrs.size[0],
+ h: rectAttrs.size[1],
+ x: rectAttrs.position[0] - rectAttrs.size[0]/2,
+ y: rectAttrs.position[1] - rectAttrs.size[1]/2,
+ tr: 'matrix('+transform.mat.props.join(',')+')',
+ o: transform.opacity
+ };
+ }
+ roundness = rectData.renderedFrames[num].round;
+ var w = rectData.renderedFrames[num].w;
+ var h = rectData.renderedFrames[num].h;
+ var x = rectData.renderedFrames[num].x;
+ var y = rectData.renderedFrames[num].y;
+ var tr = rectData.renderedFrames[num].tr;
+ var o = rectData.renderedFrames[num].o;
var i, len = elements.length;
for(i=0;i<len;i+=1){
- elements[i].setAttribute('rx',ellipseAttrs.roundness);
- elements[i].setAttribute('ry',ellipseAttrs.roundness);
- elements[i].setAttribute('width',ellipseAttrs.size[0]);
- elements[i].setAttribute('height',ellipseAttrs.size[1]);
- elements[i].setAttribute('x',ellipseAttrs.position[0] - ellipseAttrs.size[0]/2);
- elements[i].setAttribute('y',ellipseAttrs.position[1] - ellipseAttrs.size[1]/2);
- //elements[i].setAttribute('transform','matrix('+matrix.props.join(',')+')');
+ if(rectData.lastData.roundness != roundness){
+ elements[i].setAttribute('rx',roundness);
+ elements[i].setAttribute('ry',roundness);
+ }
+ if(rectData.lastData.w != w){
+ elements[i].setAttribute('width',w);
+ }
+ if(rectData.lastData.h != h){
+ elements[i].setAttribute('height',h);
+ }
+ if(rectData.lastData.x != x){
+ elements[i].setAttribute('x',x);
+ }
+ if(rectData.lastData.y != y){
+ elements[i].setAttribute('y',y);
+ }
+ if(rectData.lastData.tr != tr){
+ elements[i].setAttribute('transform',tr);
+ }
+ if(rectData.lastData.o != o){
+ elements[i].setAttribute('opacity',o);
+ }
}
+ rectData.lastData.roundness = roundness;
+ rectData.lastData.w = w;
+ rectData.lastData.h = h;
+ rectData.lastData.x = x;
+ rectData.lastData.y = y;
+ rectData.lastData.o = o;
};
-ShapeItemElement.prototype.renderFill = function(num){
- var animData = this.currentData;
- if(animData.fill){
- var fill = animData.fill;
- if(this.renderedFrame.fill.color !== fill.color){
- this.shape.setAttribute('fill',fill.color);
- this.renderedFrame.fill.color = fill.color;
- }
- if(this.data.fillEnabled!==false){
- if(this.renderedFrame.fill.opacity !== fill.opacity){
- this.shape.setAttribute('fill-opacity',fill.opacity);
- this.renderedFrame.fill.opacity = fill.opacity;
- }
- }else{
- if(this.renderedFrame.fill.opacity !== 0){
- this.shape.setAttribute('fill-opacity',0);
- this.renderedFrame.fill.opacity = 0;
- }
- }
- }else{
- if(this.renderedFrame.fill.opacity !== 0){
- this.shape.setAttribute('fill-opacity',0);
- this.renderedFrame.fill.opacity = 0;
+ShapeItemElement.prototype.renderFill = function(styleData,num){
+ var fillData = styleData.renderedData[num];
+ var styleElem = styleData.style;
+ if(!styleData.renderedFrames[num]){
+ styleData.renderedFrames[num] = {
+ c: fillData.color,
+ o: fillData.opacity
}
}
+
+ var c = styleData.renderedFrames[num].c;
+ var o = styleData.renderedFrames[num].o;
+
+ var elements = styleElem.elements;
+ var i, len = elements.length;
+ for(i=0;i<len;i+=1){
+ if(styleData.lastData.c != c){
+ elements[i].setAttribute('fill',c);
+ }
+ if(styleData.lastData.o != o){
+ elements[i].setAttribute('fill-opacity',o);
+ }
+ }
+ styleData.lastData.c = c;
+ styleData.lastData.o = o;
};
-ShapeItemElement.prototype.renderStroke = function(num){
- var animData = this.currentData;
- if(animData.stroke){
- var stroke = animData.stroke;
- if(this.renderedFrame.stroke.color !== stroke.color){
- this.renderedFrame.stroke.color = stroke.color;
- this.shape.setAttribute('stroke',stroke.color);
- }
- if(this.renderedFrame.stroke.width !== stroke.width){
- this.renderedFrame.stroke.width = stroke.width;
- this.shape.setAttribute('stroke-width',stroke.width);
- }
- if(this.data.strokeEnabled!==false){
- if(this.renderedFrame.stroke.opacity !== stroke.opacity){
- this.renderedFrame.stroke.opacity = stroke.opacity;
- this.shape.setAttribute('stroke-opacity',stroke.opacity);
- }
- }else{
- if(this.renderedFrame.stroke.opacity !== 0){
- this.renderedFrame.stroke.opacity = 0;
- this.shape.setAttribute('stroke-opacity',0);
- }
+ShapeItemElement.prototype.renderStroke = function(styleData,num){
+ var fillData = styleData.renderedData[num];
+ var styleElem = styleData.style;
+ if(!styleData.renderedFrames[num]){
+ styleData.renderedFrames[num] = {
+ c: fillData.color,
+ o: fillData.opacity,
+ w: fillData.width
}
}
+
+ var c = styleData.renderedFrames[num].c;
+ var o = styleData.renderedFrames[num].o;
+ var w = styleData.renderedFrames[num].w;
+
+ var elements = styleElem.elements;
+ var i, len = elements.length;
+ for(i=0;i<len;i+=1){
+ if(styleData.lastData.c != c){
+ elements[i].setAttribute('stroke',c);
+ }
+ if(styleData.lastData.o != o){
+ elements[i].setAttribute('stroke-opacity',o);
+ }
+ if(styleData.lastData.o != o){
+ elements[i].setAttribute('stroke-width',w);
+ }
+ }
+ styleData.lastData.c = c;
+ styleData.lastData.o = o;
+ styleData.lastData.w = w;
};
ShapeItemElement.prototype.renderTransform = function(num){
diff --git a/player/js/elements/SolidElement.js b/player/js/elements/SolidElement.js
index f183d3a..7cf3e1a 100644
--- a/player/js/elements/SolidElement.js
+++ b/player/js/elements/SolidElement.js
@@ -1,12 +1,10 @@
-function ISolidElement(data, animationItem){
- this.parent.constructor.call(this,data, animationItem);
+function ISolidElement(data, animationItem,parentContainer){
+ this.parent.constructor.call(this,data, animationItem,parentContainer);
}
createElement(BaseElement, ISolidElement);
ISolidElement.prototype.createElements = function(){
- this.svgElem = document.createElementNS (svgNS, "g");
this.parent.createElements.call(this);
- this.layerElement.appendChild(this.svgElem);
var rect = document.createElementNS(svgNS,'rect');
rect.setAttribute('width',this.data.width);
@@ -14,10 +12,8 @@
/*rect.setAttribute('width',1);
rect.setAttribute('height',1);*/
rect.setAttribute('fill',this.data.color);
- this.svgElem.appendChild(rect);
- styleUnselectableDiv(this.svgElem);
- styleUnselectableDiv(rect);
+ this.layerElement.appendChild(rect);
- this.maskingGroup = this.svgElem;
+ this.maskingGroup = rect;
this.maskedElement = rect;
};
\ No newline at end of file
diff --git a/player/js/elements/TextElement.js b/player/js/elements/TextElement.js
index 0b25e39..5d1b0ec 100644
--- a/player/js/elements/TextElement.js
+++ b/player/js/elements/TextElement.js
@@ -1,5 +1,5 @@
-function ITextElement(data, animationItem){
- this.parent.constructor.call(this,data, animationItem);
+function ITextElement(data, animationItem,parentContainer){
+ this.parent.constructor.call(this,data, animationItem,parentContainer);
}
createElement(BaseElement, ITextElement);
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index a2a8f90..5b2d02b 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -4,45 +4,45 @@
this.lastFrame = -1;
}
-SVGRenderer.prototype.buildItems = function(layers){
+SVGRenderer.prototype.buildItems = function(layers,parentContainer){
var count = 0, i, len = layers.length;
- for (i = 0; i < len; i++) {
+ for (i = len - 1; i >= 0; i--) {
if (layers[i].type == 'StillLayer') {
count++;
- this.createImage(layers[i]);
+ this.createImage(layers[i],parentContainer);
} else if (layers[i].type == 'PreCompLayer') {
- this.createComp(layers[i]);
+ this.createComp(layers[i],parentContainer);
} else if (layers[i].type == 'SolidLayer') {
- this.createSolid(layers[i]);
+ this.createSolid(layers[i],parentContainer);
} else if (layers[i].type == 'ShapeLayer') {
- this.createShape(layers[i]);
+ this.createShape(layers[i],parentContainer);
} else if (layers[i].type == 'TextLayer') {
- this.createText(layers[i]);
+ this.createText(layers[i],parentContainer);
}else{
console.log('NO TYPE: ',layers[i]);
}
}
};
-SVGRenderer.prototype.createShape = function (data) {
- data.element = new IShapeElement(data, this.animationItem);
+SVGRenderer.prototype.createShape = function (data,parentContainer) {
+ data.element = new IShapeElement(data, this.animationItem,parentContainer);
};
-SVGRenderer.prototype.createText = function (data) {
- data.element = new ITextElement(data, this.animationItem);
+SVGRenderer.prototype.createText = function (data,parentContainer) {
+ data.element = new ITextElement(data, this.animationItem,parentContainer);
};
-SVGRenderer.prototype.createImage = function (data) {
- data.element = new IImageElement(data, this.animationItem);
+SVGRenderer.prototype.createImage = function (data,parentContainer) {
+ data.element = new IImageElement(data, this.animationItem,parentContainer);
};
-SVGRenderer.prototype.createComp = function (data) {
- data.element = new ICompElement(data, this.animationItem);
- this.buildItems(data.layers, data.element.getType());
+SVGRenderer.prototype.createComp = function (data,parentContainer) {
+ data.element = new ICompElement(data, this.animationItem,parentContainer);
+ this.buildItems(data.layers,data.element.getDomElement());
};
-SVGRenderer.prototype.createSolid = function (data) {
- data.element = new ISolidElement(data, this.animationItem);
+SVGRenderer.prototype.createSolid = function (data,parentContainer) {
+ data.element = new ISolidElement(data, this.animationItem,parentContainer);
};
SVGRenderer.prototype.configAnimation = function(animData){
@@ -76,19 +76,24 @@
};
SVGRenderer.prototype.buildStage = function (container, layers) {
- var i, len = layers.length, layerData;
+ var i, len = layers.length, layerData,mainContainer;
for (i = len - 1; i >= 0; i--) {
layerData = layers[i];
if (layerData.parent) {
this.buildItemParenting(layerData,layers,layerData.parent);
- var mainContainer = layerData.element.getDomElement();
- mainContainer.setAttribute("data-layer-name", layerData.layerName);
- container.appendChild(mainContainer);
+ mainContainer = layerData.element.getDomElement();
+ if(container != mainContainer){
+ mainContainer.setAttribute("data-layer-name", layerData.layerName);
+ container.appendChild(mainContainer);
+ }
layerData.element.setMainElement(mainContainer);
} else {
- layerData.element.getDomElement().setAttribute("data-layer-name", layerData.layerName);
- container.appendChild(layerData.element.getDomElement());
- layerData.element.setMainElement(layerData.element.getDomElement());
+ mainContainer = layerData.element.getDomElement();
+ if(container != mainContainer){
+ mainContainer.setAttribute("data-layer-name", layerData.layerName);
+ container.appendChild(mainContainer);
+ }
+ layerData.element.setMainElement(mainContainer);
}
if (layerData.type == 'PreCompLayer') {
this.buildStage(layerData.element.getComposingElement(), layerData.layers, layerData.element.getType());
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index 9132ee2..87d08e5 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -121,9 +121,9 @@
if(arr[i].ks.i){
convertPathsToAbsoluteValues(arr[i].ks);
}else{
- jLen = shapeItem[i].ks.length;
+ jLen = arr[i].ks.length;
for(j=0;j<jLen;j+=1){
- if(shapeItem[i].ks[j].s){
+ if(arr[i].ks[j].s){
convertPathsToAbsoluteValues(arr[i].ks[j].s[0]);
convertPathsToAbsoluteValues(arr[i].ks[j].e[0]);
}
@@ -340,7 +340,7 @@
return [keyframes];
}
return keyframes;
- }else if(keyframes[0].t === null){
+ }else if(keyframes[0].t === undefined){
if(interpolatedParams.type == 'p'){
matrixParams.px = keyframes[0];
matrixParams.py = keyframes[1];
@@ -383,10 +383,10 @@
}
var k, kLen;
var perc,jLen, j = 0;
+ var fnc;
if(interpolatedParams.type == 'default'){
propertyArray = [];
}
- var fnc;
if(keyData.to){
bezierData = keyData.bezierData;
if(frameNum >= nextKeyData.t-offsetTime){
@@ -720,8 +720,8 @@
}
}
if(renderType == 'svg'){
- //pathData.pathString = createPathString(propertyArray[0],pathData.closed);
- pathData.pathNodes = propertyArray[0];
+ pathData.pathString = createPathString(propertyArray[0],pathData.closed);
+ //pathData.pathNodes = propertyArray[0];
}else{
pathData.pathNodes = propertyArray[0];
}
