fixes
diff --git a/parser/extras.js b/parser/extras.js
index b79c528..d795605 100644
--- a/parser/extras.js
+++ b/parser/extras.js
@@ -497,13 +497,14 @@
bezierIn.x = [];
bezierOut.x = [];
key.easeIn.forEach(function(item, index){
- bezierIn.x[index] = item.influence / 100;
+ bezierIn.x[index] = 1 - item.influence / 100;
bezierOut.x[index] = lastKey.easeOut[index].influence / 100;
});
averageSpeed = [];
for(i=0;i<len;i+=1){
averageSpeed[i] = (key.value[i] - lastKey.value[i])/duration;
+ //averageSpeed[i] = (key.easeIn[i].speed*(key.easeIn[i].influence / 100) + lastKey.easeOut[i].speed*(lastKey.easeOut[i].influence / 100))/duration;
}
break;
}
@@ -515,8 +516,13 @@
case PropertyValueType.ThreeD_SPATIAL:
case PropertyValueType.TwoD_SPATIAL:
case PropertyValueType.SHAPE:
- bezierIn.y = 1 - ((key.easeIn.speed) / averageSpeed) * (key.easeIn.influence / 100);
- bezierOut.y = ((lastKey.easeOut.speed) / averageSpeed) * bezierOut.x;
+ if(interpolationType == 'linear'){
+ bezierIn.y = bezierIn.x;
+ bezierOut.y = bezierOut.x;
+ }else{
+ bezierIn.y = 1 - ((key.easeIn.speed) / averageSpeed) * (key.easeIn.influence / 100);
+ bezierOut.y = ((lastKey.easeOut.speed) / averageSpeed) * bezierOut.x;
+ }
break;
case PropertyValueType.ThreeD:
case PropertyValueType.TwoD:
@@ -525,7 +531,7 @@
bezierIn.y = [];
bezierOut.y = [];
key.easeIn.forEach(function(item,index){
- if(averageSpeed[index] == 0 || averageSpeed[index] == item.speed){
+ if(averageSpeed[index] == 0 || interpolationType == 'linear'){
bezierIn.y[index] = bezierIn.x[index];
bezierOut.y[index] = bezierOut.x[index];
}else{
@@ -535,8 +541,6 @@
});
break;
}
- //bezierIn.y = 1 - ((key.easeIn.speed) / averageSpeed) * (key.easeIn.influence / 100);
- // bezierOut.y = ((lastKey.easeOut.speed) / averageSpeed) * bezierOut.x;
}
if(property.propertyValueType == PropertyValueType.ThreeD_SPATIAL || property.propertyValueType == PropertyValueType.TwoD_SPATIAL || property.propertyValueType == PropertyValueType.SHAPE ){
property.expression = propertyExpression;
@@ -580,6 +584,9 @@
interpolationType = 'hold';
realInfluenceReady();
}else{
+ if(property.keyOutInterpolationType(indexTime) == KeyframeInterpolationType.LINEAR){
+ interpolationType = 'linear';
+ }
buildKeyInfluence(key, lastKey, indexTime);
switch(property.propertyValueType){
case PropertyValueType.ThreeD_SPATIAL:
@@ -590,7 +597,12 @@
influenceReadyCount = 2;
var propertyExpression = property.expression;
property.expression = "velocityAtTime(time)";
- getRealInfluence(property,'in',key.time,-0.01/frameRate,indexTime+1,key.easeIn);
+ if(interpolationType != 'linear'){
+ getRealInfluence(property,'in',key.time,-0.01/frameRate,indexTime+1,key.easeIn);
+ }else{
+ influenceReadyCount = 0;
+ realInfluenceReady();
+ }
break;
default:
realInfluenceReady();
diff --git a/player/index.html b/player/index.html
index d0e93d4..2e5dd94 100644
--- a/player/index.html
+++ b/player/index.html
@@ -35,6 +35,6 @@
<!-- endbuild -->
</head>
<body style="background-color:#666; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:800px;height:600px;background-color:#000" class="bodymovin" data-bm-path="exports/complete" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="true"></div>
+<div style="width:800px;height:600px;background-color:#000" class="bodymovin" data-bm-path="exports/complete" data-bm-type="canvas" data-bm-loop="false" data-bm-prerender="false"></div>
</body>
</html>
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 8d1772e..f20852a 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -3,7 +3,7 @@
this.path = '';
this.isLoaded = false;
this.currentFrame = 0;
- this.currentRawFrame = 0;
+ this.currentRawFrame = 36;
this.totalFrames = 0;
this.frameRate = 0;
this.frameMult = 0;
diff --git a/player/js/animation/AnimationManager.js b/player/js/animation/AnimationManager.js
index 56c7369..d44e96a 100644
--- a/player/js/animation/AnimationManager.js
+++ b/player/js/animation/AnimationManager.js
@@ -59,7 +59,7 @@
var elapsedTime = nowTime - initTime;
var i;
for(i=0;i<len;i+=1){
- registeredAnimations[i].animation.advanceTime(elapsedTime);
+ //registeredAnimations[i].animation.advanceTime(elapsedTime);
}
initTime = nowTime;
requestAnimationFrame(resume);
diff --git a/player/js/elements/canvasElements/CVBaseElement.js b/player/js/elements/canvasElements/CVBaseElement.js
index b5deea2..b49059d 100644
--- a/player/js/elements/canvasElements/CVBaseElement.js
+++ b/player/js/elements/canvasElements/CVBaseElement.js
@@ -59,6 +59,7 @@
ctx.globalAlpha = ctx.globalAlpha*this.currentAnimData.tr.o;
matrixValue = this.currentAnimData.matrixArray;
ctx.transform(matrixValue[0], matrixValue[1], matrixValue[2], matrixValue[3], matrixValue[4], matrixValue[5]);
+ console.log('this.currentAnimData.tr.a: ',this.currentAnimData.tr.a);
ctx.translate(-this.currentAnimData.tr.a[0],-this.currentAnimData.tr.a[1]);
if(this.data.hasMask){
this.maskManager.draw();
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 2811910..02b502e 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -125,6 +125,7 @@
if(this.lastFrame == num){
return;
}
+ console.log('nummm: ',num);
this.lastFrame = num;
/*this.canvasContext.fillStyle= colorFlag ? colors[0] : colors[1];
colorFlag = !colorFlag;
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 9e86528..13f94f9 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -126,6 +126,7 @@
if(this.lastFrame == num){
return;
}
+ console.log('num: ',num);
this.lastFrame = num;
var i, len = this.layers.length;
for (i = 0; i < len; i++) {
diff --git a/player/js/utils/DataManager.js b/player/js/utils/DataManager.js
index a6c922f..67d9c53 100644
--- a/player/js/utils/DataManager.js
+++ b/player/js/utils/DataManager.js
@@ -623,8 +623,8 @@
flag = false;
}
}
- keyframes.__lastKey = i;
- keyframes.__lastFrameNum = frameNum;
+ //keyframes.__lastKey = i;
+ //keyframes.__lastFrameNum = frameNum;
if(keyData.to && !keyData.bezierData){
bez.buildBezierData(keyData);
@@ -716,8 +716,8 @@
}else{
propertyArray = bezierData.points[j].point;
}
- keyData.__lastPoint = j;
- keyData.__lastDistanceInLine = distanceInLine;
+ //keyData.__lastPoint = j;
+ //keyData.__lastDistanceInLine = distanceInLine;
break;
}else if(distanceInLine > addedLength && distanceInLine < addedLength + bezierData.points[j+1].partialLength){
segmentPerc = (distanceInLine-addedLength)/(bezierData.points[j+1].partialLength);
@@ -735,8 +735,8 @@
propertyArray.push(bezierData.points[j].point[k] + (bezierData.points[j+1].point[k] - bezierData.points[j].point[k])*segmentPerc);
}
}
- keyData.__lastPoint = j;
- keyData.__lastDistanceInLine = distanceInLine;
+ //keyData.__lastPoint = j;
+ //keyData.__lastDistanceInLine = distanceInLine;
break;
}
if(j < jLen - 1 && dir == 1 || j > 0 && dir == -1){
@@ -920,6 +920,7 @@
dataOb = {};
interpolatedParams.arrayFlag = false;
interpolatedParams.type = 'default';
+ console.log('item.ks.a: ',item.ks.a);
dataOb.a = getInterpolatedValue(item.ks.a,offsettedFrameNum, item.startTime,interpolatedParams);
///dataOb.a = [0,0];
interpolatedParams.arrayFlag = false;
@@ -928,9 +929,9 @@
///dataOb.o = 1;
interpolatedParams.arrayFlag = false;
interpolatedParams.type = 'p';
- ///getInterpolatedValue(item.ks.p,offsettedFrameNum, item.startTime,interpolatedParams);
- px = getInterpolatedTransform(item.ks.p,offsettedFrameNum, item.startTime,0);
- py = getInterpolatedTransform(item.ks.p,offsettedFrameNum, item.startTime,1, true);
+ getInterpolatedValue(item.ks.p,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///px = getInterpolatedTransform(item.ks.p,offsettedFrameNum, item.startTime,0);
+ ///py = getInterpolatedTransform(item.ks.p,offsettedFrameNum, item.startTime,1, true);
/*if(px != matrixParams.px || py != matrixParams.py){
console.log('diff');
console.log('px: ',px);
@@ -940,13 +941,13 @@
}*/
interpolatedParams.arrayFlag = true;
interpolatedParams.type = 'r';
- ///getInterpolatedValue(item.ks.r,offsettedFrameNum, item.startTime,interpolatedParams);
- r = getInterpolatedTransform(item.ks.r,offsettedFrameNum, item.startTime, 0);
+ getInterpolatedValue(item.ks.r,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///r = getInterpolatedTransform(item.ks.r,offsettedFrameNum, item.startTime, 0);
interpolatedParams.arrayFlag = true;
interpolatedParams.type = 's';
- ///getInterpolatedValue(item.ks.s,offsettedFrameNum, item.startTime,interpolatedParams);
- sx = getInterpolatedTransform(item.ks.s,offsettedFrameNum, item.startTime,0);
- sy = getInterpolatedTransform(item.ks.s,offsettedFrameNum, item.startTime,1, true);
+ getInterpolatedValue(item.ks.s,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///sx = getInterpolatedTransform(item.ks.s,offsettedFrameNum, item.startTime,0);
+ ///sy = getInterpolatedTransform(item.ks.s,offsettedFrameNum, item.startTime,1, true);
renderedData = {};
renderedData.an = {
tr: dataOb
@@ -1082,18 +1083,18 @@
///shapeTrOb.o = 1;
interpolatedParams.arrayFlag = true;
interpolatedParams.type = 's';
- sx = getInterpolatedTransform(shapeItem.tr.s,offsettedFrameNum, item.startTime,0);
- sy = getInterpolatedTransform(shapeItem.tr.s,offsettedFrameNum, item.startTime,1, true);
- ///getInterpolatedValue(shapeItem.tr.s,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///sx = getInterpolatedTransform(shapeItem.tr.s,offsettedFrameNum, item.startTime,0);
+ ///sy = getInterpolatedTransform(shapeItem.tr.s,offsettedFrameNum, item.startTime,1, true);
+ getInterpolatedValue(shapeItem.tr.s,offsettedFrameNum, item.startTime,interpolatedParams);
interpolatedParams.arrayFlag = true;
interpolatedParams.type = 'r';
- r = getInterpolatedTransform(shapeItem.tr.r,offsettedFrameNum, item.startTime, 0);
- ///getInterpolatedValue(shapeItem.tr.r,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///r = getInterpolatedTransform(shapeItem.tr.r,offsettedFrameNum, item.startTime, 0);
+ getInterpolatedValue(shapeItem.tr.r,offsettedFrameNum, item.startTime,interpolatedParams);
interpolatedParams.arrayFlag = false;
interpolatedParams.type = 'p';
- px = getInterpolatedTransform(shapeItem.tr.p,offsettedFrameNum, item.startTime,0);
- py = getInterpolatedTransform(shapeItem.tr.p,offsettedFrameNum, item.startTime,1, true);
- ///getInterpolatedValue(shapeItem.tr.p,offsettedFrameNum, item.startTime,interpolatedParams);
+ ///px = getInterpolatedTransform(shapeItem.tr.p,offsettedFrameNum, item.startTime,0);
+ ///py = getInterpolatedTransform(shapeItem.tr.p,offsettedFrameNum, item.startTime,1, true);
+ getInterpolatedValue(shapeItem.tr.p,offsettedFrameNum, item.startTime,interpolatedParams);
interpolatedParams.arrayFlag = false;
interpolatedParams.type = 'default';
if(renderType == 'canvas'){
diff --git a/player/js/utils/bez.js b/player/js/utils/bez.js
index 046929b..81f8deb 100644
--- a/player/js/utils/bez.js
+++ b/player/js/utils/bez.js
@@ -42,6 +42,33 @@
return easingFunctions[encodedFuncName];
}
+ function _getEasingCurve(aa,bb,cc,dd,encodedFuncName) {
+ encodedFuncName = ('bez_' + aa+'_'+bb+'_'+cc+'_'+dd).replace(/\./g, 'p');
+ if(easingFunctions[encodedFuncName]){
+ return easingFunctions[encodedFuncName];
+ }
+ var polyBez = function(p1, p2) {
+ var A = [null, null], B = [null, null], C = [null, null],
+ bezCoOrd = function(t, ax) {
+ C[ax] = 3 * p1[ax], B[ax] = 3 * (p2[ax] - p1[ax]) - C[ax], A[ax] = 1 - C[ax] - B[ax];
+ return t * (C[ax] + t * (B[ax] + t * A[ax]));
+ };
+ return function(t) {
+ var x = t, i = 0, z;
+ while (++i < 14) {
+ z = bezCoOrd(x, 0) - t;
+ if (Math.abs(z) < 1e-3) break;
+ x -= z / (C[0] + x * (2 * B[0] + 3 * A[0] * x));
+ }
+ return bezCoOrd(x, 1);
+ }
+ };
+ easingFunctions[encodedFuncName] = function(x, t, b, c, d) {
+ return c * polyBez([aa, bb], [cc, dd])(t/d) + b;
+ };
+ return easingFunctions[encodedFuncName];
+ }
+
function drawBezierCurve(pt1,pt2,pt3,pt4){
///return 0;
var bezierName = (pt1.join('_')+'_'+pt2.join('_')+'_'+pt3.join('_')+'_'+pt4.join('_')).replace(/\./g, 'p');
@@ -90,6 +117,7 @@
}
function buildBezierData(keyData){
+ console.log('buildBezierData');
///return 0;
///keyData.bezierData = drawBezierCurve(keyData.s,keyData.e,keyData.to,keyData.ti);
var pt1 = keyData.s;
