first elements
diff --git a/player/index.html b/player/index.html index e62da68..a2f3fab 100644 --- a/player/index.html +++ b/player/index.html
@@ -1,6 +1,7 @@ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> + <meta charset="utf-8"/> <style> body, html{ background-color:#ddd; @@ -27,6 +28,7 @@ } </style> + <script src="three.min.js"></script> <!-- build:js bodymovin.js --> <script src="js/main.js"></script> <script src="js/utils/common.js"></script> @@ -39,6 +41,7 @@ <script src="js/utils/bez.js"></script> <script src="js/utils/DataManager.js"></script> <script src="js/utils/FontManager.js"></script> + <script src="js/utils/TransformProperty.js"></script> <script src="js/utils/PropertyFactory.js"></script> <script src="js/utils/shapes/ShapePath.js"></script> <script src="js/utils/shapes/ShapeProperty.js"></script> @@ -58,6 +61,7 @@ <script src="js/renderers/SVGRenderer.js"></script> <script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script> <script src="js/renderers/HybridRenderer.js" data-light-skip="true"></script> + <script src="js/renderers/ThreejsRenderer.js" data-light-skip="true"></script> <script src="js/mask.js"></script> <script src="js/elements/BaseElement.js"></script> <script src="js/elements/svgElements/SVGBaseElement.js"></script> @@ -88,6 +92,11 @@ <script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script> <script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script> <script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script> + <script src="js/elements/threejsElements/TBaseElement.js" data-light-skip="true"></script> + <script src="js/elements/threejsElements/TCameraElement.js" data-light-skip="true"></script> + <script src="js/elements/threejsElements/TSolidElement.js" data-light-skip="true"></script> + <script src="js/elements/threejsElements/TImageElement.js" data-light-skip="true"></script> + <script src="js/elements/threejsElements/TMaskElement.js" data-light-skip="true"></script> <script src="js/animation/AnimationManager.js"></script> <script src="js/animation/AnimationItem.js"></script> <!-- Expressions --> @@ -119,8 +128,8 @@ var elem = document.getElementById('bodymovin') var animData = { container: elem, - renderer: 'svg', - loop: true, + renderer: 'three', + loop: false, autoplay: true, rendererSettings: { progressiveLoad:false
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js index 7df5f96..f5ec04d 100644 --- a/player/js/animation/AnimationItem.js +++ b/player/js/animation/AnimationItem.js
@@ -48,6 +48,9 @@ case 'svg': this.renderer = new SVGRenderer(this, params.rendererSettings); break; + case 'three': + this.renderer = new ThreejsRenderer(this, params.rendererSettings); + break; case 'hybrid': case 'html': default:
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js index 833c499..3ca9ab6 100644 --- a/player/js/elements/BaseElement.js +++ b/player/js/elements/BaseElement.js
@@ -186,7 +186,7 @@ this.lastNum = -99999; if(this.data.ks){ this.finalTransform = { - mProp: PropertyFactory.getProp(this,this.data.ks,2,null,this.dynamicProperties), + mProp: new TransformProperty(this,this.data.ks, this.dynamicProperties, this.elementType === 'three'), matMdf: false, opMdf: false, mat: new Matrix(),
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js index 1c278ac..31e9051 100644 --- a/player/js/elements/ShapeElement.js +++ b/player/js/elements/ShapeElement.js
@@ -184,7 +184,7 @@ data[i] = { transform : { op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties), - mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties) + mProps: new TransformProperty(this,arr[i], dynamicProperties) }, elements: [] };
diff --git a/player/js/elements/ShapeItemElement.js b/player/js/elements/ShapeItemElement.js index f6f8371..db1f60f 100644 --- a/player/js/elements/ShapeItemElement.js +++ b/player/js/elements/ShapeItemElement.js
@@ -111,7 +111,7 @@ matMdf:false, opMdf:false, op: PropertyFactory.getProp(this.elemData,arr[i].o,0,0.01,dynamicProperties), - mProps: PropertyFactory.getProp(this.elemData,arr[i],2,null,dynamicProperties) + mProps: new TransformProperty(this.elemData,arr[i], dynamicProperties) }, elements: [] };
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js index c09a6dd..b411906 100644 --- a/player/js/elements/canvasElements/CVShapeElement.js +++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -86,7 +86,7 @@ matMdf:false, opMdf:false, op: PropertyFactory.getProp(this,arr[i].o,0,0.01,dynamicProperties), - mProps: PropertyFactory.getProp(this,arr[i],2,null,dynamicProperties) + mProps: new TransformProperty(this,arr[i], dynamicProperties) }, elements: [] };
diff --git a/player/js/elements/canvasElements/CVShapeItemElement.js b/player/js/elements/canvasElements/CVShapeItemElement.js index 5069285..06b1101 100644 --- a/player/js/elements/canvasElements/CVShapeItemElement.js +++ b/player/js/elements/canvasElements/CVShapeItemElement.js
@@ -72,7 +72,7 @@ matMdf:false, opMdf:false, op: PropertyFactory.getProp(this.elemData,arr[i].o,0,0.01,dynamicProperties), - mProps: PropertyFactory.getProp(this.elemData,arr[i],2,null,dynamicProperties) + mProps: new TransformProperty(this.elemData,arr[i], dynamicProperties) }, elements: [] };
diff --git a/player/js/elements/threejsElements/TBaseElement.js b/player/js/elements/threejsElements/TBaseElement.js new file mode 100644 index 0000000..c7a4976 --- /dev/null +++ b/player/js/elements/threejsElements/TBaseElement.js
@@ -0,0 +1,147 @@ +function TBaseElement(data,parentContainer,globalData,comp, placeholder){ + this.globalData = globalData; + this.elementType = 'three'; + this.comp = comp; + this.data = data; + this.matteElement = null; + this.parentContainer = parentContainer; + this.layerId = placeholder ? placeholder.layerId : 'ly_'+randomString(10); + this.placeholder = placeholder; + this.init(); +}; + +createElement(BaseElement, TBaseElement); +TBaseElement.prototype.checkBlendMode = function(){ + +}; +TBaseElement.prototype.setBlendMode = BaseElement.prototype.setBlendMode; + + +TBaseElement.prototype.getBaseElement = function(){ + return this.baseElement; +}; + +TBaseElement.prototype.createElements = function(){ + if(this.data.hasMask){ + this.layerElement = document.createElementNS(svgNS,'svg'); + styleDiv(this.layerElement); + //this.appendNodeToParent(this.layerElement); + this.baseElement = this.layerElement; + this.maskedElement = this.layerElement; + }else{ + this.layerElement = this.parentContainer; + } + this.transformedElement = this.layerElement; + if(this.data.ln && (this.data.ty === 4 || this.data.ty === 0)){ + if(this.layerElement === this.parentContainer){ + this.layerElement = document.createElementNS(svgNS,'g'); + //this.appendNodeToParent(this.layerElement); + this.baseElement = this.layerElement; + } + this.layerElement.setAttribute('id',this.data.ln); + } + this.setBlendMode(); + if(this.layerElement !== this.parentContainer){ + this.placeholder = null; + } + this.checkParenting(); +}; + +TBaseElement.prototype.renderFrame = function(parentTransform){ + if(this.data.ty === 3){ + return false; + } + + if(this.currentFrameNum === this.lastNum || !this.isVisible){ + return this.isVisible; + } + this.lastNum = this.currentFrameNum; + + this.finalTransform.opMdf = this.finalTransform.op.mdf; + this.finalTransform.matMdf = this.finalTransform.mProp.mdf; + this.finalTransform.opacity = this.finalTransform.op.v; + if(this.firstFrame){ + this.finalTransform.opMdf = true; + this.finalTransform.matMdf = true; + } + + var mat; + var finalMat = this.finalTransform.mat; + + if(this.hierarchy){ + var i, len = this.hierarchy.length; + + mat = this.finalTransform.mProp.v.props; + finalMat.cloneFromProps(mat); + for(i=0;i<len;i+=1){ + this.finalTransform.matMdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : this.finalTransform.matMdf; + mat = this.hierarchy[i].finalTransform.mProp.v.props; + finalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]); + } + }else{ + if(this.isVisible && this.finalTransform.matMdf){ + if(!parentTransform){ + finalMat.cloneFromProps(this.finalTransform.mProp.v.props); + }else{ + mat = this.finalTransform.mProp.v.props; + finalMat.cloneFromProps(mat); + } + } + } + if(this.data.hasMask){ + this.maskManager.renderFrame(finalMat); + } + + if(parentTransform){ + mat = parentTransform.mat.props; + finalMat.cloneFromProps(mat); + this.finalTransform.opacity *= parentTransform.opacity; + this.finalTransform.opMdf = parentTransform.opMdf ? true : this.finalTransform.opMdf; + this.finalTransform.matMdf = parentTransform.matMdf ? true : this.finalTransform.matMdf + } + + if(this.finalTransform.matMdf){ + var threeFinalMat = new Matrix(); + threeFinalMat.translate(-this.globalData.compSize.w/2,-this.globalData.compSize.h/2,0); + mat = finalMat.props; + threeFinalMat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],mat[12],mat[13],mat[14],mat[15]); + this.finalMat = finalMat; + } + if(this.finalTransform.opMdf){ + //this.transformedElement.style.opacity = this.finalTransform.opacity; + } + return this.isVisible; +}; + +TBaseElement.prototype.destroy = function(){ + this.layerElement = null; + this.transformedElement = null; + this.parentContainer = null; + if(this.matteElement) { + this.matteElement = null; + } + if(this.maskManager) { + this.maskManager.destroy(); + this.maskManager = null; + } +}; + +TBaseElement.prototype.getDomElement = function(){ + return this.layerElement; +}; +TBaseElement.prototype.addMasks = function(data){ + this.maskManager = new MaskElement(data,this,this.globalData); +}; + +TBaseElement.prototype.hide = function(){ +}; + +TBaseElement.prototype.addMasks = function(data){ + this.maskManager = new TMaskElement(data,this,this.globalData); +}; + +TBaseElement.prototype.setMatte = function(){ + +} + +TBaseElement.prototype.buildElementParenting = ThreejsRenderer.prototype.buildElementParenting; \ No newline at end of file
diff --git a/player/js/elements/threejsElements/TCameraElement.js b/player/js/elements/threejsElements/TCameraElement.js new file mode 100644 index 0000000..6cfa87c --- /dev/null +++ b/player/js/elements/threejsElements/TCameraElement.js
@@ -0,0 +1,119 @@ +function TCameraElement(data,parentContainer,globalData,comp, placeholder){ + this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder); + this.pe = PropertyFactory.getProp(this,data.pe,0,0,this.dynamicProperties); + if(data.ks.p.s){ + this.px = PropertyFactory.getProp(this,data.ks.p.x,1,0,this.dynamicProperties); + this.py = PropertyFactory.getProp(this,data.ks.p.y,1,0,this.dynamicProperties); + this.pz = PropertyFactory.getProp(this,data.ks.p.z,1,0,this.dynamicProperties); + }else{ + this.p = PropertyFactory.getProp(this,data.ks.p,1,0,this.dynamicProperties); + } + if(data.ks.a){ + this.a = PropertyFactory.getProp(this,data.ks.a,1,0,this.dynamicProperties); + } + if(data.ks.or.k.length && data.ks.or.k[0].to){ + var i,len = data.ks.or.k.length; + for(i=0;i<len;i+=1){ + data.ks.or.k[i].to = null; + data.ks.or.k[i].ti = null; + } + } + this.or = PropertyFactory.getProp(this,data.ks.or,1,degToRads,this.dynamicProperties); + this.or.sh = true; + this.rx = PropertyFactory.getProp(this,data.ks.rx,0,degToRads,this.dynamicProperties); + this.ry = PropertyFactory.getProp(this,data.ks.ry,0,degToRads,this.dynamicProperties); + this.rz = PropertyFactory.getProp(this,data.ks.rz,0,degToRads,this.dynamicProperties); + this.mat = new Matrix(); + + var vFOV = 2 * Math.atan( globalData.compSize.h / ( 2 * 1111 ) ); + vFOV = vFOV * 180 / Math.PI; + //console.log('vFOV:', vFOV) + var camera = new THREE.PerspectiveCamera( vFOV, globalData.compSize.w / globalData.compSize.h, 1, 10000 ); + camera.matrixAutoUpdate = false; + /*camera.position.x = 0; + camera.position.y = 0;*/ + //camera.position.z = 1111; + this.threeCamera = camera; +} +createElement(TBaseElement, TCameraElement); + +TCameraElement.prototype.setup = function() { + var i, len = this.comp.threeDElements.length, comp; + for(i=0;i<len;i+=1){ + //[perspectiveElem,container] + comp = this.comp.threeDElements[i]; + comp.perspectiveElem.style.perspective = comp.perspectiveElem.style.webkitPerspective = this.pe.v+'px'; + comp.container.style.transformOrigin = comp.container.style.mozTransformOrigin = comp.container.style.webkitTransformOrigin = "0px 0px 0px"; + comp.perspectiveElem.style.transform = comp.perspectiveElem.style.webkitTransform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)'; + } +}; + +TCameraElement.prototype.createElements = function(){ +}; + +TCameraElement.prototype.hide = function(){ +}; + +TCameraElement.prototype.renderFrame = function(){ + var mdf = this.firstFrame; + var i, len; + if(this.hierarchy){ + len = this.hierarchy.length; + for(i=0;i<len;i+=1){ + mdf = this.hierarchy[i].finalTransform.mProp.mdf ? true : mdf; + } + } + if(mdf || (this.p && this.p.mdf) || (this.px && (this.px.mdf || this.py.mdf || this.pz.mdf)) || this.rx.mdf || this.ry.mdf || this.rz.mdf || this.or.mdf || (this.a && this.a.mdf)) { + this.mat.reset(); + //this.mat.translate(-this.globalData.compSize.w/2,-this.globalData.compSize.h/2,0); + + if(this.p){ + this.mat.translate(this.p.v[0],-this.p.v[1],this.p.v[2]); + }else{ + this.mat.translate(this.px.v,-this.py.v,this.pz.v); + } + if(this.a){ + var diffVector = [this.p.v[0]-this.a.v[0],this.p.v[1]-this.a.v[1],this.p.v[2]-this.a.v[2]]; + var mag = Math.sqrt(Math.pow(diffVector[0],2)+Math.pow(diffVector[1],2)+Math.pow(diffVector[2],2)); + //var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v)); + var lookDir = [diffVector[0]/mag,diffVector[1]/mag,diffVector[2]/mag]; + var lookLengthOnXZ = Math.sqrt( lookDir[2]*lookDir[2] + lookDir[0]*lookDir[0] ); + var m_rotationX = (Math.atan2( lookDir[1], lookLengthOnXZ )); + var m_rotationY = (Math.atan2( lookDir[0], -lookDir[2])); + this.mat.rotateY(m_rotationY).rotateX(-m_rotationX); + + } + this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v); + this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]); + if(this.hierarchy){ + var mat; + len = this.hierarchy.length; + for(i=0;i<len;i+=1){ + mat = this.hierarchy[i].finalTransform.mProp.iv.props; + this.mat.transform(mat[0],mat[1],mat[2],mat[3],mat[4],mat[5],mat[6],mat[7],mat[8],mat[9],mat[10],mat[11],-mat[12],-mat[13],mat[14],mat[15]); + } + } + } + var mat = this.mat.props; + //console.log(this.globalData.compSize.w); + //console.log(mat); + /*this.threeCamera.matrix.set(mat[0],mat[1],mat[2],mat[3] + ,mat[4],mat[5],mat[6],mat[7] + ,mat[8],mat[9],mat[10],mat[11] + ,mat[12],mat[13],mat[14],mat[15]); + this.threeCamera.updateMatrixWorld( true );*/ + /*this.threeCamera.matrix.set(1,0,0,_count + ,0,1,0,0 + ,0,0,1, 1111 + ,0,0,0, 1);*/ + //console.log('mat:', mat); + this.threeCamera.matrix.set(mat[0],mat[4],mat[8],mat[12] + ,mat[1],mat[5],mat[9],mat[13] + ,mat[2],mat[6],mat[10], -mat[14] + ,mat[3],mat[7],mat[11], mat[15]); + this.threeCamera.updateMatrixWorld( true ); + this.firstFrame = false; +}; + +TCameraElement.prototype.destroy = function(){ +}; \ No newline at end of file
diff --git a/player/js/elements/threejsElements/TImageElement.js b/player/js/elements/threejsElements/TImageElement.js new file mode 100644 index 0000000..9a5aa24 --- /dev/null +++ b/player/js/elements/threejsElements/TImageElement.js
@@ -0,0 +1,66 @@ +function TImageElement(data,parentContainer,globalData,comp, placeholder){ + this.threeMatrix = new THREE.Matrix4(); + this.assetData = globalData.getAssetData(data.refId); + this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder); +} +createElement(TBaseElement, TImageElement); + +TImageElement.prototype.createElements = function(){ + + var assetPath = this.globalData.getAssetsPath(this.assetData); + var img = new Image(); + //// + var squareShape = new THREE.Shape(); + squareShape.moveTo( 0,0 ); + squareShape.lineTo( 0, 50 ); + squareShape.lineTo( 20, 80 ); + squareShape.lineTo( 50, 50 ); + squareShape.lineTo( 0, 0 ); + var geometry = new THREE.Geometry(); + var shapePoints = squareShape.extractPoints(); + var faces = THREE.ShapeUtils.triangulateShape(shapePoints.shape, shapePoints.holes); + for (var i = 0; i < shapePoints.shape.length; i++) { + geometry.vertices.push(new THREE.Vector3(shapePoints.shape[i].x, 0, shapePoints.shape[i].y)); + } + for (var i = 0; i < faces.length ; i++) { + var a = faces[i][2] , b = faces[i][1] , c = faces[i][0] ; + var v1 = shapePoints.shape[a], v2 = shapePoints.shape[b], v3 = shapePoints.shape[c]; + + geometry.faces.push( new THREE.Face3(a, b, c) ); + geometry.faceVertexUvs[0].push( + [ new THREE.Vector2(v1.x ,v1.y ), new THREE.Vector2(v2.x, v2.y), new THREE.Vector2(v3.x, v3.y)]); + } + //geometry.computeCentroids(); + //geometry.computeFaceNormals(); + //// + + //var geometry = new THREE.PlaneGeometry( this.assetData.w, this.assetData.h, 32 ); + //this.threeMatrix.makeTranslation(this.assetData.w/2, -this.assetData.h/2,0); + //geometry.applyMatrix(this.threeMatrix); + //geometry.center(); + var texture = THREE.ImageUtils.loadTexture(assetPath); + + + b|SA":L|>nbzxbb======ju5//-var material = new THREE.MeshBasicMaterial({map: texture}); /n + var material = new THREE.MeshBasicMaterial( {color: '#ff0000', side: THREE.DoubleSide} ); + var plane = new THREE.Mesh( geometry, material ); + plane.matrixAutoUpdate = false; + this.layerElement = plane; + this.transformedElement = plane; + this.baseElement = plane; + this.innerElem = plane; + if(this.data.hasMask){ + this.maskedElement = plane; + } + + img.onload = function(){ + console.log('loaded') + } + img.src = assetPath; + this.checkParenting(); +}; + +TImageElement.prototype.renderTransformFrame = TSolidElement.prototype.renderTransformFrame; +TImageElement.prototype.hide = TSolidElement.prototype.hide; +TImageElement.prototype.renderFrame = TSolidElement.prototype.renderFrame; +TImageElement.prototype.destroy = TSolidElement.prototype.destroy; \ No newline at end of file
diff --git a/player/js/elements/threejsElements/TMaskElement.js b/player/js/elements/threejsElements/TMaskElement.js new file mode 100644 index 0000000..0c3856b --- /dev/null +++ b/player/js/elements/threejsElements/TMaskElement.js
@@ -0,0 +1,81 @@ + +function TMaskElement(data,element){ + this.data = data; + this.element = element; + this.dynamicProperties = []; + this.masksProperties = this.data.masksProperties; + this.viewData = new Array(this.masksProperties.length); + var i, len = this.masksProperties.length; + for (i = 0; i < len; i++) { + this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element,this.masksProperties[i],3,this.dynamicProperties,null); + } +} + +TMaskElement.prototype.getMaskProperty = function(pos){ + return this.viewData[pos]; +}; + +TMaskElement.prototype.prepareFrame = function(num){ + var i, len = this.dynamicProperties.length; + for(i=0;i<len;i+=1){ + this.dynamicProperties[i].getValue(num); + if(this.dynamicProperties[i].mdf){ + this.element.globalData.mdf = true; + } + } +}; + +TMaskElement.prototype.renderFrame = function (transform) { + /*var ctx = this.element.canvasContext; + var i, len = this.data.masksProperties.length; + var pt,pt2,pt3,data, hasMasks = false; + for (i = 0; i < len; i++) { + if(this.masksProperties[i].mode === 'n'){ + continue; + } + if(hasMasks === false){ + ctx.beginPath(); + hasMasks = true; + } + if (this.masksProperties[i].inv) { + ctx.moveTo(0, 0); + ctx.lineTo(this.element.globalData.compWidth, 0); + ctx.lineTo(this.element.globalData.compWidth, this.element.globalData.compHeight); + ctx.lineTo(0, this.element.globalData.compHeight); + ctx.lineTo(0, 0); + } + data = this.viewData[i].v; + pt = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0):data.v[0]; + ctx.moveTo(pt[0], pt[1]); + var j, jLen = data._length; + for (j = 1; j < jLen; j++) { + pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1]; + pt2 = transform ? transform.applyToPointArray(data.i[j][0],data.i[j][1],0) : data.i[j]; + pt3 = transform ? transform.applyToPointArray(data.v[j][0],data.v[j][1],0) : data.v[j]; + ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]); + } + pt = transform ? transform.applyToPointArray(data.o[j - 1][0],data.o[j - 1][1],0) : data.o[j - 1]; + pt2 = transform ? transform.applyToPointArray(data.i[0][0],data.i[0][1],0) : data.i[0]; + pt3 = transform ? transform.applyToPointArray(data.v[0][0],data.v[0][1],0) : data.v[0]; + ctx.bezierCurveTo(pt[0], pt[1], pt2[0], pt2[1], pt3[0], pt3[1]); + } + if(hasMasks){ + ctx.clip(); + }*/ +}; + +TMaskElement.prototype.getMask = function(nm){ + var i = 0, len = this.masksProperties.length; + while(i<len){ + if(this.masksProperties[i].nm === nm){ + return { + maskPath: this.viewData[i].pv + } + } + i += 1; + } +}; + +TMaskElement.prototype.destroy = function(){ + this.element = null; +}; \ No newline at end of file
diff --git a/player/js/elements/threejsElements/TSolidElement.js b/player/js/elements/threejsElements/TSolidElement.js new file mode 100644 index 0000000..8f68b9e --- /dev/null +++ b/player/js/elements/threejsElements/TSolidElement.js
@@ -0,0 +1,55 @@ +function TSolidElement(data,parentContainer,globalData,comp, placeholder){ + this.threeMatrix = new THREE.Matrix4(); + this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder); +} +createElement(TBaseElement, TSolidElement); + +TSolidElement.prototype.createElements = function(){ + + var geometry = new THREE.PlaneGeometry( this.data.sw, this.data.sh, 32 ); + this.threeMatrix.makeTranslation(this.data.sw/2, -this.data.sh/2,0); + geometry.applyMatrix(this.threeMatrix); + //geometry.center(); + var material = new THREE.MeshBasicMaterial( {color: this.data.sc, side: THREE.DoubleSide} ); + var plane = new THREE.Mesh( geometry, material ); + plane.matrixAutoUpdate = false; + + this.layerElement = plane; + this.transformedElement = plane; + //this.appendNodeToParent(parent); + this.baseElement = plane; + this.innerElem = plane; + if(this.data.bm !== 0){ + this.setBlendMode(); + } + if(this.data.hasMask){ + this.maskedElement = plane; + } + this.checkParenting(); +}; + +TSolidElement.prototype.renderTransformFrame = TBaseElement.prototype.renderFrame; + +TSolidElement.prototype.renderFrame = function() { + this.renderTransformFrame(); + //console.log(this.finalMat); + //console.log(this.layerElement.geometry); + var props = this.finalMat.props; + //console.log(props); + /*this.threeMatrix.set(props[0],props[1],props[2],props[3], + props[4],props[5],props[6],props[7], + props[8],props[9],props[10],props[11], + 0.1,0,0,props[15])*/ + //this.threeMatrix.identity(); + this.layerElement.matrix.set(props[0],props[4],props[8],props[12], + props[1],props[5],props[9],props[13], + props[2],props[6],props[10],props[14], + props[3],props[7],props[11],props[15]); + + this.layerElement.updateMatrixWorld( true ); +} + + + +TSolidElement.prototype.hide = IImageElement.prototype.hide; +TSolidElement.prototype.destroy = IImageElement.prototype.destroy; \ No newline at end of file
diff --git a/player/js/renderers/ThreejsRenderer.js b/player/js/renderers/ThreejsRenderer.js new file mode 100644 index 0000000..1c60595 --- /dev/null +++ b/player/js/renderers/ThreejsRenderer.js
@@ -0,0 +1,119 @@ +function ThreejsRenderer(animationItem, config){ + this.animationItem = animationItem; + this.layers = null; + this.renderedFrame = -1; + this.globalData = { + frameNum: -1 + }; + this.pendingElements = []; + this.elements = []; + this.threeDElements = []; + this.destroyed = false; + this.camera = null; + this.supports3d = true; +} + +extendPrototype(BaseRenderer,ThreejsRenderer); +ThreejsRenderer.prototype.buildItem = SVGRenderer.prototype.buildItem; + +ThreejsRenderer.prototype.checkPendingElements = function(){ + while(this.pendingElements.length){ + var element = this.pendingElements.pop(); + element.checkParenting(); + } +}; + +ThreejsRenderer.prototype.appendElementInPos = function(element, pos){ + var newElement = element.getBaseElement(); + if(!newElement){ + return; + } + var layer = this.layers[pos]; + if(!layer.ddd || !this.supports3d){ + var i = 0; + var nextElement; + while(i<pos){ + if(this.elements[i] && this.elements[i]!== true && this.elements[i].getBaseElement){ + nextElement = this.elements[i].getBaseElement(); + } + i += 1; + } + if(nextElement){ + if(!layer.ddd || !this.supports3d){ + this.layerElement.insertBefore(newElement, nextElement); + } + } else { + if(!layer.ddd || !this.supports3d){ + this.layerElement.appendChild(newElement); + } + } + } else { + this.scene.add( newElement ); + } +}; + +ThreejsRenderer.prototype.createSolid = function (data) { + return new TSolidElement(data, this.layerElement,this.globalData,this); +}; + +ThreejsRenderer.prototype.createImage = function (data) { + return new TImageElement(data, this.layerElement,this.globalData,this); +}; + +ThreejsRenderer.prototype.createCamera = function (data) { + this.camera = new TCameraElement(data, this.layerElement,this.globalData,this); + return this.camera; +}; + +ThreejsRenderer.prototype.configAnimation = function(animData){ + var wrapper = this.animationItem.wrapper; + var scene = new THREE.Scene(); + var renderer = new THREE.WebGLRenderer(); + renderer.setSize( animData.w, animData.h ); + wrapper.appendChild( renderer.domElement ); + + var svg = document.createElementNS(svgNS,'svg'); + svg.setAttribute('width','1'); + svg.setAttribute('height','1'); + styleDiv(svg); + wrapper.appendChild(svg); + var defs = document.createElementNS(svgNS,'defs'); + svg.appendChild(defs); + this.globalData.defs = defs; + this.data = animData; + //Mask animation + this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem); + this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem); + this.globalData.elementLoaded = this.animationItem.elementLoaded.bind(this.animationItem); + this.globalData.frameId = 0; + this.globalData.compSize = { + w: animData.w, + h: animData.h + }; + this.globalData.frameRate = animData.fr; + this.layers = animData.layers; + this.globalData.fontManager = new FontManager(); + this.globalData.fontManager.addChars(animData.chars); + this.globalData.fontManager.addFonts(animData.fonts,svg); + this.scene = scene; + this.renderer = renderer; +}; + +ThreejsRenderer.prototype._renderLayersFrame = SVGRenderer.prototype.renderFrame; +ThreejsRenderer.prototype.renderFrame = function(num) { + this._renderLayersFrame(num); + //this.scene.updateMatrixWorld( true ); + this.renderer.render(this.scene, this.camera.threeCamera); +} + +ThreejsRenderer.prototype.searchExtraCompositions = function(assets){ + var i, len = assets.length; + var floatingContainer = document.createElement('div'); + for(i=0;i<len;i+=1){ + if(assets[i].xt){ + var comp = this.createComp(assets[i],floatingContainer,this.globalData.comp,null); + comp.initExpressions(); + this.globalData.projectInterface.registerComposition(comp); + } + } +}; \ No newline at end of file
diff --git a/player/js/utils/FontManager.js b/player/js/utils/FontManager.js index 21fa53e..53503eb 100644 --- a/player/js/utils/FontManager.js +++ b/player/js/utils/FontManager.js
@@ -96,7 +96,6 @@ var tCanvasHelper = document.createElement('canvas').getContext('2d'); tCanvasHelper.font = '100px '+ fontData.fFamily; return tCanvasHelper; - return tHelper; } function addFonts(fontData, defs){
diff --git a/player/js/utils/PropertyFactory.js b/player/js/utils/PropertyFactory.js index 40ba8fa..d6a1f0e 100644 --- a/player/js/utils/PropertyFactory.js +++ b/player/js/utils/PropertyFactory.js
@@ -263,238 +263,7 @@ this.lastFrame = initFrame; } - var TransformProperty = (function() { - function positionGetter() { - return ExpressionValue(this.p); - } - function xPositionGetter() { - return ExpressionValue(this.px); - } - function yPositionGetter() { - return ExpressionValue(this.py); - } - function zPositionGetter() { - return ExpressionValue(this.pz); - } - function anchorGetter() { - return ExpressionValue(this.a); - } - function orientationGetter() { - return ExpressionValue(this.or); - } - function rotationGetter() { - return ExpressionValue(this.r, 1/degToRads); - } - function scaleGetter() { - return ExpressionValue(this.s, 100); - } - function opacityGetter() { - return ExpressionValue(this.o, 100); - } - function skewGetter() { - return ExpressionValue(this.sk); - } - function skewAxisGetter() { - return ExpressionValue(this.sa); - } - function applyToMatrix(mat) { - var i, len = this.dynamicProperties.length; - for(i = 0; i < len; i += 1) { - this.dynamicProperties[i].getValue(); - if (this.dynamicProperties[i].mdf) { - this.mdf = true; - } - } - if (this.a) { - mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); - } - if (this.s) { - mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]); - } - if (this.r) { - mat.rotate(-this.r.v); - } else { - mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); - } - if (this.data.p.s) { - if (this.data.p.z) { - mat.translate(this.px.v, this.py.v, -this.pz.v); - } else { - mat.translate(this.px.v, this.py.v, 0); - } - } else { - mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]); - } - } - function processKeys(){ - if (this.elem.globalData.frameId === this.frameId) { - return; - } - - this.mdf = false; - var i, len = this.dynamicProperties.length; - - for(i = 0; i < len; i += 1) { - this.dynamicProperties[i].getValue(); - if (this.dynamicProperties[i].mdf) { - this.mdf = true; - } - } - if (this.mdf) { - this.v.reset(); - if (this.a) { - this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); - } - if(this.s) { - this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]); - } - if (this.sk) { - this.v.skewFromAxis(-this.sk.v, this.sa.v); - } - if (this.r) { - this.v.rotate(-this.r.v); - } else { - this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); - } - if (this.autoOriented && this.p.keyframes && this.p.getValueAtTime) { - var v1,v2; - if (this.p.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) { - v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / this.elem.globalData.frameRate,0); - v2 = this.p.getValueAtTime(this.p.keyframes[0].t / this.elem.globalData.frameRate, 0); - } else if(this.p.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) { - v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / this.elem.globalData.frameRate), 0); - v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / this.elem.globalData.frameRate, 0); - } else { - v1 = this.p.pv; - v2 = this.p.getValueAtTime((this.p.lastFrame+this.p.offsetTime - 0.01) / this.elem.globalData.frameRate, this.p.offsetTime); - } - this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0])); - } - if(this.data.p.s){ - if(this.data.p.z) { - this.v.translate(this.px.v, this.py.v, -this.pz.v); - } else { - this.v.translate(this.px.v, this.py.v, 0); - } - }else{ - this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); - } - } - //console.log(this.v.to2dCSS()) - this.frameId = this.elem.globalData.frameId; - } - - function setInverted(){ - this.inverted = true; - this.iv = new Matrix(); - if(!this.k){ - if(this.data.p.s){ - this.iv.translate(this.px.v,this.py.v,-this.pz.v); - }else{ - this.iv.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); - } - if(this.r){ - this.iv.rotate(-this.r.v); - }else{ - this.iv.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v); - } - if(this.s){ - this.iv.scale(this.s.v[0],this.s.v[1],1); - } - if(this.a){ - this.iv.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]); - } - } - } - - function autoOrient(){ - // - //var prevP = this.getValueAtTime(); - } - - return function TransformProperty(elem,data,arr){ - this.elem = elem; - this.frameId = -1; - this.type = 'transform'; - this.dynamicProperties = []; - this.mdf = false; - this.data = data; - this.getValue = processKeys; - this.applyToMatrix = applyToMatrix; - this.setInverted = setInverted; - this.autoOrient = autoOrient; - this.v = new Matrix(); - if(data.p.s){ - this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this.dynamicProperties); - this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this.dynamicProperties); - if(data.p.z){ - this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this.dynamicProperties); - } - }else{ - this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties); - } - if(data.r) { - this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this.dynamicProperties); - } else if(data.rx) { - this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this.dynamicProperties); - this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this.dynamicProperties); - this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this.dynamicProperties); - this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this.dynamicProperties); - } - if(data.sk){ - this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this.dynamicProperties); - this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this.dynamicProperties); - } - if(data.a) { - this.a = PropertyFactory.getProp(elem,data.a,1,0,this.dynamicProperties); - } - if(data.s) { - this.s = PropertyFactory.getProp(elem,data.s,1,0.01,this.dynamicProperties); - } - if(data.o){ - this.o = PropertyFactory.getProp(elem,data.o,0,0.01,arr); - } else { - this.o = {mdf:false,v:1}; - } - if(this.dynamicProperties.length){ - arr.push(this); - }else{ - if(this.a){ - this.v.translate(-this.a.v[0],-this.a.v[1],this.a.v[2]); - } - if(this.s){ - this.v.scale(this.s.v[0],this.s.v[1],this.s.v[2]); - } - if(this.sk){ - this.v.skewFromAxis(-this.sk.v,this.sa.v); - } - if(this.r){ - this.v.rotate(-this.r.v); - }else{ - this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); - } - if(this.data.p.s){ - if(data.p.z) { - this.v.translate(this.px.v, this.py.v, -this.pz.v); - } else { - this.v.translate(this.px.v, this.py.v, 0); - } - }else{ - this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); - } - } - Object.defineProperty(this, "position", { get: positionGetter}); - Object.defineProperty(this, "xPosition", { get: xPositionGetter}); - Object.defineProperty(this, "yPosition", { get: yPositionGetter}); - Object.defineProperty(this, "orientation", { get: orientationGetter}); - Object.defineProperty(this, "anchorPoint", { get: anchorGetter}); - Object.defineProperty(this, "rotation", { get: rotationGetter}); - Object.defineProperty(this, "scale", { get: scaleGetter}); - Object.defineProperty(this, "opacity", { get: opacityGetter}); - Object.defineProperty(this, "skew", { get: skewGetter}); - Object.defineProperty(this, "skewAxis", { get: skewAxisGetter}); - } - }()); + function getProp(elem,data,type, mult, arr) { var p;
diff --git a/player/js/utils/TransformProperty.js b/player/js/utils/TransformProperty.js new file mode 100644 index 0000000..deaac36 --- /dev/null +++ b/player/js/utils/TransformProperty.js
@@ -0,0 +1,233 @@ +var TransformProperty = (function() { + function positionGetter() { + return ExpressionValue(this.p); + } + function xPositionGetter() { + return ExpressionValue(this.px); + } + function yPositionGetter() { + return ExpressionValue(this.py); + } + function zPositionGetter() { + return ExpressionValue(this.pz); + } + function anchorGetter() { + return ExpressionValue(this.a); + } + function orientationGetter() { + return ExpressionValue(this.or); + } + function rotationGetter() { + return ExpressionValue(this.r, 1/degToRads); + } + function scaleGetter() { + return ExpressionValue(this.s, 100); + } + function opacityGetter() { + return ExpressionValue(this.o, 100); + } + function skewGetter() { + return ExpressionValue(this.sk); + } + function skewAxisGetter() { + return ExpressionValue(this.sa); + } + function applyToMatrix(mat) { + var i, len = this.dynamicProperties.length; + for(i = 0; i < len; i += 1) { + this.dynamicProperties[i].getValue(); + if (this.dynamicProperties[i].mdf) { + this.mdf = true; + } + } + if (this.a) { + mat.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); + } + if (this.s) { + mat.scale(this.s.v[0], this.s.v[1], this.s.v[2]); + } + if (this.r) { + mat.rotate(-this.r.v); + } else { + mat.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); + } + if (this.data.p.s) { + if (this.data.p.z) { + mat.translate(this.px.v, this.py.v, -this.pz.v); + } else { + mat.translate(this.px.v, this.py.v, 0); + } + } else { + mat.translate(this.p.v[0], this.p.v[1], -this.p.v[2]); + } + } + function processKeys(){ + if (this.elem.globalData.frameId === this.frameId) { + return; + } + + this.mdf = false; + var i, len = this.dynamicProperties.length; + + for(i = 0; i < len; i += 1) { + this.dynamicProperties[i].getValue(); + if (this.dynamicProperties[i].mdf) { + this.mdf = true; + } + } + if (this.mdf) { + this.v.reset(); + if (this.a) { + if(this.inverted){ + this.v.translate(-this.a.v[0], this.a.v[1], this.a.v[2]); + } else { + this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); + } + } + if(this.s) { + this.v.scale(this.s.v[0], this.s.v[1], this.s.v[2]); + } + if (this.sk) { + this.v.skewFromAxis(-this.sk.v, this.sa.v); + } + if (this.r) { + this.v.rotate(-this.r.v); + } else { + if(this.inverted){ + this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(-this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); + } else { + this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); + } + } + if (this.autoOriented && this.p.keyframes && this.p.getValueAtTime) { + var v1,v2; + if (this.p.lastFrame+this.p.offsetTime <= this.p.keyframes[0].t) { + v1 = this.p.getValueAtTime((this.p.keyframes[0].t + 0.01) / this.elem.globalData.frameRate,0); + v2 = this.p.getValueAtTime(this.p.keyframes[0].t / this.elem.globalData.frameRate, 0); + } else if(this.p.lastFrame+this.p.offsetTime >= this.p.keyframes[this.p.keyframes.length - 1].t) { + v1 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t / this.elem.globalData.frameRate), 0); + v2 = this.p.getValueAtTime((this.p.keyframes[this.p.keyframes.length - 1].t - 0.01) / this.elem.globalData.frameRate, 0); + } else { + v1 = this.p.pv; + v2 = this.p.getValueAtTime((this.p.lastFrame+this.p.offsetTime - 0.01) / this.elem.globalData.frameRate, this.p.offsetTime); + } + this.v.rotate(-Math.atan2(v1[1] - v2[1], v1[0] - v2[0])); + } + if(this.data.p.s){ + if(this.data.p.z) { + this.v.translate(this.px.v, this.py.v, -this.pz.v); + } else { + this.v.translate(this.px.v, this.py.v, 0); + } + }else{ + if(this.inverted){ + this.v.translate(this.p.v[0],-this.p.v[1],-this.p.v[2]); + } else { + this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); + } + + } + } + this.frameId = this.elem.globalData.frameId; + } + + function autoOrient(){ + // + //var prevP = this.getValueAtTime(); + } + + return function TransformProperty(elem,data,arr,inverted){ + this.elem = elem; + this.inverted = inverted || false; + this.frameId = -1; + this.type = 'transform'; + this.dynamicProperties = []; + this.mdf = false; + this.data = data; + this.getValue = processKeys; + this.applyToMatrix = applyToMatrix; + this.autoOrient = autoOrient; + this.v = new Matrix(); + if(data.p.s){ + this.px = PropertyFactory.getProp(elem,data.p.x,0,0,this.dynamicProperties); + this.py = PropertyFactory.getProp(elem,data.p.y,0,0,this.dynamicProperties); + if(data.p.z){ + this.pz = PropertyFactory.getProp(elem,data.p.z,0,0,this.dynamicProperties); + } + }else{ + this.p = PropertyFactory.getProp(elem,data.p,1,0,this.dynamicProperties); + } + if(data.r) { + this.r = PropertyFactory.getProp(elem, data.r, 0, degToRads, this.dynamicProperties); + } else if(data.rx) { + this.rx = PropertyFactory.getProp(elem, data.rx, 0, degToRads, this.dynamicProperties); + this.ry = PropertyFactory.getProp(elem, data.ry, 0, degToRads, this.dynamicProperties); + this.rz = PropertyFactory.getProp(elem, data.rz, 0, degToRads, this.dynamicProperties); + this.or = PropertyFactory.getProp(elem, data.or, 1, degToRads, this.dynamicProperties); + } + if(data.sk){ + this.sk = PropertyFactory.getProp(elem, data.sk, 0, degToRads, this.dynamicProperties); + this.sa = PropertyFactory.getProp(elem, data.sa, 0, degToRads, this.dynamicProperties); + } + if(data.a) { + this.a = PropertyFactory.getProp(elem,data.a,1,0,this.dynamicProperties); + } + if(data.s) { + this.s = PropertyFactory.getProp(elem,data.s,1,0.01,this.dynamicProperties); + } + if(data.o){ + this.o = PropertyFactory.getProp(elem,data.o,0,0.01,arr); + } else { + this.o = {mdf:false,v:1}; + } + if(this.dynamicProperties.length){ + arr.push(this); + }else{ + if(this.a){ + if(this.inverted){ + this.v.translate(-this.a.v[0], this.a.v[1], this.a.v[2]); + } else { + this.v.translate(-this.a.v[0], -this.a.v[1], this.a.v[2]); + } + } + if(this.s){ + this.v.scale(this.s.v[0],this.s.v[1],this.s.v[2]); + } + if(this.sk){ + this.v.skewFromAxis(-this.sk.v,this.sa.v); + } + if(this.r){ + this.v.rotate(-this.r.v); + }else{ + if(this.inverted){ + this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(-this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); + } else { + this.v.rotateZ(-this.rz.v).rotateY(this.ry.v).rotateX(this.rx.v).rotateZ(-this.or.v[2]).rotateY(this.or.v[1]).rotateX(this.or.v[0]); + } + } + if(this.data.p.s){ + if(data.p.z) { + this.v.translate(this.px.v, this.py.v, -this.pz.v); + } else { + this.v.translate(this.px.v, this.py.v, 0); + } + }else{ + if(this.inverted){ + this.v.translate(this.p.v[0],-this.p.v[1],-this.p.v[2]); + } else { + this.v.translate(this.p.v[0],this.p.v[1],-this.p.v[2]); + } + } + } + Object.defineProperty(this, "position", { get: positionGetter}); + Object.defineProperty(this, "xPosition", { get: xPositionGetter}); + Object.defineProperty(this, "yPosition", { get: yPositionGetter}); + Object.defineProperty(this, "orientation", { get: orientationGetter}); + Object.defineProperty(this, "anchorPoint", { get: anchorGetter}); + Object.defineProperty(this, "rotation", { get: rotationGetter}); + Object.defineProperty(this, "scale", { get: scaleGetter}); + Object.defineProperty(this, "opacity", { get: opacityGetter}); + Object.defineProperty(this, "skew", { get: skewGetter}); + Object.defineProperty(this, "skewAxis", { get: skewAxisGetter}); + } +}()); \ No newline at end of file
diff --git a/player/js/utils/common.js b/player/js/utils/common.js index 05a3632..a5452f0 100644 --- a/player/js/utils/common.js +++ b/player/js/utils/common.js
@@ -1,4 +1,4 @@ -var subframeEnabled = true; +var subframeEnabled = false; var expressionsPlugin; var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); var cachedColors = {};
diff --git a/player/js/utils/shapes/RepeaterModifier.js b/player/js/utils/shapes/RepeaterModifier.js index 87cb7cc..37582f9 100644 --- a/player/js/utils/shapes/RepeaterModifier.js +++ b/player/js/utils/shapes/RepeaterModifier.js
@@ -19,7 +19,7 @@ this.getValue = this.processKeys; this.c = PropertyFactory.getProp(elem,data.c,0,null,this.dynamicProperties); this.o = PropertyFactory.getProp(elem,data.o,0,null,this.dynamicProperties); - this.tr = PropertyFactory.getProp(elem,data.tr,2,null,this.dynamicProperties); + this.tr = new TransformProperty(elem,data.tr, this.dynamicProperties); if(!this.dynamicProperties.length){ this.getValue(true); }