expressions update
diff --git a/player/index.html b/player/index.html
index 7a8076a..4a97732 100644
--- a/player/index.html
+++ b/player/index.html
@@ -71,7 +71,7 @@
var animData = {
container: document.getElementById('bodymovin'),
- renderer: 'svg',
+ renderer: 'canvas',
loop: false,
prerender: false,
autoplay: true,
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 1dd4e4f..8d302d2 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -212,9 +212,9 @@
this.firstFrame = Math.round(this.animationData.ip);
this.frameMult = this.animationData.fr / 1000;
/*
- this.firstFrame = 67;
- this.totalFrames = 1;
- this.animationData.tf = 1;
+ this.firstFrame = 187;
+ this.totalFrames = 2;
+ this.animationData.tf = 2;
//this.frameMult = 10000/1000;
//*/////
this.trigger('config_ready');
diff --git a/player/js/effects/SliderEffect.js b/player/js/effects/SliderEffect.js
new file mode 100644
index 0000000..d760076
--- /dev/null
+++ b/player/js/effects/SliderEffect.js
@@ -0,0 +1,24 @@
+function SliderEffect(data,elem, dynamicProperties){
+ this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
+}
+function AngleEffect(data,elem, dynamicProperties){
+ this.p = PropertyFactory.getProp(elem,data.v,0,0,dynamicProperties);
+}
+function ColorEffect(data,elem, dynamicProperties){
+ this.p = PropertyFactory.getProp(elem,data.v,1,1/255,dynamicProperties);
+}
+function PointEffect(data,elem, dynamicProperties){
+ this.p = PropertyFactory.getProp(elem,data.v,1,0,dynamicProperties);
+}
+function CheckboxEffect(data,elem, dynamicProperties){
+ this.p = PropertyFactory.getProp(elem,data.v,1,0,dynamicProperties);
+}
+
+SliderEffect.prototype.proxyFunction = function(){
+ return this.p.v;
+}
+
+AngleEffect.prototype.proxyFunction = SliderEffect.prototype.proxyFunction;
+ColorEffect.prototype.proxyFunction = SliderEffect.prototype.proxyFunction;
+PointEffect.prototype.proxyFunction = SliderEffect.prototype.proxyFunction;
+CheckboxEffect.prototype.proxyFunction = SliderEffect.prototype.proxyFunction;
\ No newline at end of file
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index da2a90c..a14d91b 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -52,13 +52,13 @@
this.effect = this.effectsManager.getEffect.bind(this.effectsManager);
}
this.finalTransform = {
- op: PropertyFactory.getProp(this,this.data.ks.o,0,0.01,this.dynamicProperties),
mProp: PropertyFactory.getProp(this,this.data.ks,2,null,this.dynamicProperties),
matMdf: false,
opMdf: false,
mat: new Matrix(),
opacity: 1
};
+ this.finalTransform.op = this.finalTransform.mProp.o;
this.transform = this.finalTransform.mProp;
this.createElements();
if(this.data.hasMask){
diff --git a/player/js/elements/ShapeElement.js b/player/js/elements/ShapeElement.js
index 1b2a84a..ee452a0 100644
--- a/player/js/elements/ShapeElement.js
+++ b/player/js/elements/ShapeElement.js
@@ -130,6 +130,9 @@
}else if(arr[i].ty == 'el'){
ty = 6;
}
+ if(addedTrims.length){
+ arr[i].trimmed = true;
+ }
data[i].sh = PropertyFactory.getShapeProp(this,arr[i],ty,dynamicProperties, addedTrims, this.comp);
jLen = this.stylesList.length;
var element, hasStrokes = false, hasFills = false;
@@ -159,6 +162,9 @@
closed: false,
trimProp: PropertyFactory.getProp(this,arr[i],7,null,dynamicProperties)
};
+ data[i] = {
+ tr : trimOb.trimProp
+ };
addedTrims.push(trimOb);
ownTrims.push(trimOb);
}
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index 7afaed3..f696947 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -26,7 +26,7 @@
this.parent.createElements.call(this);
this.searchShapes(this.shapesData,this.viewData,this.dynamicProperties,[]);
- //this.mainShape = new CVShapeItemElement(this.data,this.dynamicProperties,this.globalData);
+ this.buildExpressionInterface();
};
CVShapeElement.prototype.searchShapes = function(arr,data,dynamicProperties,addedTrims){
var i, len = arr.length - 1;
@@ -96,6 +96,9 @@
}else if(arr[i].ty == 'el'){
ty = 6;
}
+ if(addedTrims.length){
+ arr[i].trimmed = true;
+ }
data[i].sh = PropertyFactory.getShapeProp(this,arr[i],ty,dynamicProperties, addedTrims);
jLen = this.stylesList.length;
var hasStrokes = false, hasFills = false;
@@ -414,4 +417,7 @@
this.stylesList.length = 0;
this.viewData.length = 0;
this.parent.destroy.call();
-};
\ No newline at end of file
+};
+for (var attr in ShapeInterface.prototype) {
+ if (ShapeInterface.prototype.hasOwnProperty(attr)) CVShapeElement.prototype[attr] = ShapeInterface.prototype[attr];
+}
\ No newline at end of file
diff --git a/player/js/utils/PropertyFactory.js b/player/js/utils/PropertyFactory.js
index af57664..4b3f7d0 100644
--- a/player/js/utils/PropertyFactory.js
+++ b/player/js/utils/PropertyFactory.js
@@ -338,6 +338,12 @@
}
return this.s.pv;
}
+ function opacityGetter(){
+ if(this.o.k){
+ this.o.getValue();
+ }
+ return this.o.pv;
+ }
function processKeys(){
if(this.elem.globalData.frameId === this.frameId){
return;
@@ -368,6 +374,7 @@
this.p = getProp(elem,data.p,1,0,this.dynamicProperties);
this.s = getProp(elem,data.s,1,0.01,this.dynamicProperties);
this.r = getProp(elem,data.r,0,degToRads,this.dynamicProperties);
+ this.o = getProp(elem,data.o,0,0.01,arr);
if(this.dynamicProperties.length){
arr.push(this);
}else{
@@ -377,6 +384,7 @@
Object.defineProperty(this, "anchorPoint", { get: anchorGetter});
Object.defineProperty(this, "rotation", { get: rotationGetter});
Object.defineProperty(this, "scale", { get: scaleGetter});
+ Object.defineProperty(this, "opacity", { get: opacityGetter});
}
}());
@@ -411,7 +419,7 @@
this.k = false;
this.mdf = false;
this.closed = type === 3 ? data.cl : data.closed;
- this.shapeData = data.ks;
+ this.numNodes = type === 3 ? data.pt.k.v : data.ks.k.v.length;
this.v = type === 3 ? data.pt.k : data.ks.k;
this.pv = this.v;
checkExpressions.bind(this)(elem,data);
@@ -508,6 +516,7 @@
o: new Array(4),
c: true
};
+ this.numNodes = 4;
this.d = data.d;
this.dynamicProperties = [];
data.closed = true;
@@ -630,6 +639,7 @@
o: new Array(8),
c: true
};
+ this.numNodes = 8;
this.elem = elem;
this.comp = elem.comp;
this.frameId = -1;
@@ -748,6 +758,9 @@
function processKeys(forceRender){
this.mdf = forceRender ? true : false;
+ if(this.prop.k){
+ this.prop.getValue();
+ }
var i = 0, len = this.trims.length;
this.pathStarted = false;
while(i<len) {
@@ -857,6 +870,7 @@
this.trims = [];
this.k = false;
this.mdf = false;
+ this.ty = 'tm';
////this.comp = elem.comp;
this.pathStarted = false;
this.segments = [
@@ -880,7 +894,7 @@
}
}
this.prop = prop;
- len = this.prop.shapeData.k.v.length - 1;
+ len = this.prop.numNodes - 1;
len += this.prop.closed ? 1:0;
this.lengths = new Array(len);
this.k = prop.k ? true : this.k;
@@ -889,6 +903,7 @@
this.addSegment = addSegment;
this.getSegmentsLength = getSegmentsLength;
if(!this.k){
+ this.prop.getValue();
this.getValue(true);
}
}
@@ -904,7 +919,7 @@
prop = new ShapeProperty(elem, data, type);
}
}else if(type === 5){
- prop = new RectShapeProperty(elem, data, arr);
+ prop = new RectShapeProperty(elem, data);
}else if(type === 6){
prop = new EllShapeProperty(elem, data);
}
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index f273591..6cc7055 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -1,4 +1,4 @@
-var subframeEnabled = false;
+var subframeEnabled = true;
var cachedColors = {};
var bm_rounder = Math.round;
var bm_rnd;
diff --git a/player/js/utils/expressions/ExpressionManager.js b/player/js/utils/expressions/ExpressionManager.js
index 448b870..73e3358 100644
--- a/player/js/utils/expressions/ExpressionManager.js
+++ b/player/js/utils/expressions/ExpressionManager.js
@@ -472,7 +472,7 @@
ind -= 1;
var ob = {
time: data.k[ind].t
- }
+ };
var arr;
if(ind === data.k.length - 1){
arr = data.k[ind-1].e;
@@ -490,7 +490,7 @@
if(!transform){
transform = elem.transform;
}
- if(!content){
+ if(!content && elem.content){
content = elem.content.bind(elem);
}
if(this.getPreValue){
@@ -503,7 +503,6 @@
if(typeof this.v === 'number'){
this.v *= this.mult;
}else{
- console.log(this);
var i, len = this.v.length;
for(i = 0; i < len; i += 1){
this.v[i] *= this.mult;
diff --git a/player/js/utils/expressions/ShapeInterface.js b/player/js/utils/expressions/ShapeInterface.js
index 3a15ca7..685e472 100644
--- a/player/js/utils/expressions/ShapeInterface.js
+++ b/player/js/utils/expressions/ShapeInterface.js
@@ -1,12 +1,12 @@
function ShapeInterface(){}
-ShapeInterface.prototype.fillInterface = function(shape,view) {
+ShapeInterface.prototype.fillInterface = function(view) {
var ob = {
get color(){
if(view.c.k){
view.c.getValue();
}
- return view.c.pv;
+ return [view.c.pv[0],view.c.pv[1],view.c.pv[2]];
},
get opacity(){
if(view.o.k){
@@ -24,7 +24,7 @@
if(view.c.k){
view.c.getValue();
}
- return view.c.pv;
+ return [view.c.pv[0],view.c.pv[1],view.c.pv[2]];
},
get opacity(){
if(view.o.k){
@@ -55,7 +55,7 @@
return ob;
};
-ShapeInterface.prototype.shapeInterface = function(shape,view) {
+ShapeInterface.prototype.shapeInterface = function(view) {
var ob = {
get shape(){
if(view.sh.k){
@@ -67,25 +67,140 @@
return ob;
};
+ShapeInterface.prototype.ellipseInterface = function(view) {
+ var ob = {
+ get size(){
+ if(view.sh.s.k){
+ view.sh.s.getValue();
+ }
+ return [view.sh.s.pv[0],view.sh.s.pv[1]];
+ },
+ get position(){
+ if(view.sh.p.k){
+ view.sh.p.getValue();
+ }
+ return [view.sh.p.pv[0],view.sh.p.pv[1]];
+ }
+ };
+ return ob;
+};
+
+ShapeInterface.prototype.rectangleInterface = function(view) {
+ var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+ var ob = {
+ get size(){
+ if(prop.s.k){
+ prop.s.getValue();
+ }
+ return [prop.s.pv[0],prop.s.pv[1]];
+ },
+ get position(){
+ if(prop.p.k){
+ prop.p.getValue();
+ }
+ return [prop.p.pv[0],prop.p.pv[1]];
+ },
+ get roundness(){
+ if(prop.r.k){
+ prop.r.getValue();
+ }
+ return prop.r.pv;
+ }
+ };
+ return ob;
+};
+
+ShapeInterface.prototype.trimInterface = function(view) {
+ var ob = {
+ get start(){
+ if(view.tr.s.k){
+ view.tr.s.getValue();
+ }
+ return view.tr.s.pv;
+ },
+ get end(){
+ if(view.tr.e.k){
+ view.tr.e.getValue();
+ }
+ return view.tr.e.pv;
+ },
+ get offset(){
+ if(view.tr.o.k){
+ view.tr.o.getValue();
+ }
+ return view.tr.o.pv;
+ }
+ };
+ return ob;
+};
+
+ShapeInterface.prototype.transformInterface = function(view) {
+ var ob = {
+ get opacity(){
+ if(view.transform.mProps.o.k){
+ view.transform.mProps.o.getValue();
+ }
+ return view.transform.mProps.o.pv;
+ },
+ get position(){
+ if(view.transform.mProps.p.k){
+ view.transform.mProps.p.getValue();
+ }
+ return [view.transform.mProps.p.pv[0],view.transform.mProps.p.pv[1]];
+ },
+ get anchorPoint(){
+ if(view.transform.mProps.a.k){
+ view.transform.mProps.a.getValue();
+ }
+ return [view.transform.mProps.a.pv[0],view.transform.mProps.a.pv[1]];
+ },
+ get scale(){
+ if(view.transform.mProps.s.k){
+ view.transform.mProps.s.getValue();
+ }
+ return [view.transform.mProps.s.pv[0],view.transform.mProps.s.pv[1]];
+ },
+ get rotation(){
+ if(view.transform.mProps.r.k){
+ view.transform.mProps.r.getValue();
+ }
+ return view.transform.mProps.r.pv;
+ }
+ }
+ return ob;
+};
+
ShapeInterface.prototype.groupInterface = function(shapes,view,container){
var interfaceArr = [];
var i, len = shapes.length,interfaceOb;
for(i=0;i<len;i+=1){
- interfaceOb = {};
if(shapes[i].ty === 'gr'){
+ interfaceOb = {};
this.groupInterface(shapes[i].it,view[i].it,interfaceOb);
interfaceArr.push(interfaceOb);
}else if(shapes[i].ty === 'sh'){
- interfaceOb = this.shapeInterface(shapes[i],view[i]);
+ interfaceOb = this.shapeInterface(view[i]);
interfaceArr.push(interfaceOb);
}else if(shapes[i].ty === 'fl'){
- interfaceOb = this.fillInterface(shapes[i],view[i]);
+ interfaceOb = this.fillInterface(view[i]);
interfaceArr.push(interfaceOb);
}else if(shapes[i].ty === 'st'){
interfaceOb = this.strokeInterface(shapes[i],view[i]);
interfaceArr.push(interfaceOb);
- }else{
+ }else if(shapes[i].ty === 'el'){
+ interfaceOb = this.ellipseInterface(view[i]);
interfaceArr.push(interfaceOb);
+ }else if(shapes[i].ty === 'rc'){
+ interfaceOb = this.rectangleInterface(view[i]);
+ interfaceArr.push(interfaceOb);
+ }else if(shapes[i].ty === 'tr'){
+ container.transform = this.transformInterface(view[i]);
+ }else if(shapes[i].ty === 'tm'){
+ interfaceOb = this.trimInterface(view[i]);
+ interfaceArr.push(interfaceOb);
+ }else{
+ console.log(shapes[i].ty);
+ interfaceArr.push('');
}
}
container.content = function(nm){
