text animator expression fix
diff --git a/player/index.html b/player/index.html
index bb524e4..84142af 100644
--- a/player/index.html
+++ b/player/index.html
@@ -130,6 +130,7 @@
<!-- Expressions -->
<script src="js/utils/expressions/Expressions.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/ExpressionManager.js" data-builds="full,svg,canvas,html"></script>
+ <script src="js/utils/expressions/expressionHelpers.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/ExpressionPropertyDecorator.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/ExpressionTextPropertyDecorator.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/ShapeInterface.js" data-builds="full,svg,canvas,html"></script>
@@ -141,6 +142,7 @@
<script src="js/utils/expressions/EffectInterface.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/MaskInterface.js" data-builds="full,svg,canvas,html"></script>
<script src="js/utils/expressions/ExpressionValueFactory.js" data-builds="full,svg,canvas,html"></script>
+ <script src="js/utils/expressions/TextSelectorPropertyDecorator.js" data-builds="full,svg,canvas,html"></script>
<script src="js/effects/SliderEffect.js" data-builds="full,svg,canvas,html"></script>
<script src="js/effects/EffectsManagerPlaceholder.js" ></script>
<script src="js/EffectsManager.js" data-builds="full,svg,canvas,html"></script>
@@ -161,8 +163,8 @@
var elem = document.getElementById('lottie');
var animData = {
container: elem,
- renderer: 'html',
- loop: false,
+ renderer: 'svg',
+ loop: true,
autoplay: true,
rendererSettings: {
progressiveLoad:true,
diff --git a/player/js/utils/expressions/ExpressionPropertyDecorator.js b/player/js/utils/expressions/ExpressionPropertyDecorator.js
index 5a0b4fb..1266192 100644
--- a/player/js/utils/expressions/ExpressionPropertyDecorator.js
+++ b/player/js/utils/expressions/ExpressionPropertyDecorator.js
@@ -1,9 +1,5 @@
(function addPropertyDecorator() {
- function getStaticValueAtTime() {
- return this.pv;
- }
-
function loopOut(type,duration,durationFlag){
if(!this.k || !this.keyframes){
return this.pv;
@@ -184,60 +180,6 @@
}
- function getSpeedAtTime(frameNum) {
- var delta = -0.01;
- var v1 = this.getValueAtTime(frameNum);
- var v2 = this.getValueAtTime(frameNum + delta);
- var speed = 0;
- if(v1.length){
- var i;
- for(i=0;i<v1.length;i+=1){
- speed += Math.pow(v2[i] - v1[i], 2);
- }
- speed = Math.sqrt(speed) * 100;
- } else {
- speed = 0;
- }
- return speed;
- }
-
- function getVelocityAtTime(frameNum) {
- if(this.vel !== undefined){
- return this.vel;
- }
- var delta = -0.001;
- //frameNum += this.elem.data.st;
- var v1 = this.getValueAtTime(frameNum);
- var v2 = this.getValueAtTime(frameNum + delta);
- var velocity;
- if(v1.length){
- velocity = createTypedArray('float32', v1.length);
- var i;
- for(i=0;i<v1.length;i+=1){
- //removing frameRate
- //if needed, don't add it here
- //velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
- velocity[i] = (v2[i] - v1[i])/delta;
- }
- } else {
- velocity = (v2 - v1)/delta;
- }
- return velocity;
- }
-
- function setGroupProperty(propertyGroup){
- this.propertyGroup = propertyGroup;
- }
-
- function searchExpressions(elem,data,prop){
- if(data.x){
- prop.k = true;
- prop.x = true;
- prop.initiateExpression = ExpressionManager.initiateExpression;
- prop.effectsSequence.push(prop.initiateExpression(elem,data,prop).bind(prop));
- }
- }
-
function getTransformValueAtTime(time) {
console.warn('Transform at time not supported');
}
@@ -246,36 +188,6 @@
}
- var TextExpressionSelectorProp = (function(){
-
- function getValueProxy(index,total){
- this.textIndex = index+1;
- this.textTotal = total;
- this.getValue();
- return this.v;
- }
-
- return function TextExpressionSelectorProp(elem,data){
- this.pv = 1;
- this.comp = elem.comp;
- this.elem = elem;
- this.mult = 0.01;
- this.propType = 'textSelector';
- this.textTotal = data.totalChars;
- this.selectorValue = 100;
- this.lastValue = [1,1,1];
- searchExpressions.bind(this)(elem,data,this);
- this.getMult = getValueProxy;
- this.getVelocityAtTime = getVelocityAtTime;
- if(this.kf){
- this.getValueAtTime = getValueAtTime.bind(this);
- } else {
- this.getValueAtTime = getStaticValueAtTime.bind(this);
- }
- this.setGroupProperty = setGroupProperty;
- };
- }());
-
var getTransformProperty = TransformPropertyFactory.getTransformProperty;
TransformPropertyFactory.getTransformProperty = function(elem, data, container) {
var prop = getTransformProperty(elem, data, container);
@@ -284,7 +196,7 @@
} else {
prop.getValueAtTime = getTransformStaticValueAtTime.bind(prop);
}
- prop.setGroupProperty = setGroupProperty;
+ prop.setGroupProperty = expressionHelpers.setGroupProperty;
return prop;
};
@@ -295,16 +207,16 @@
//prop.loopOut = loopOut;
//prop.loopIn = loopIn;
if(prop.kf){
- prop.getValueAtTime = getValueAtTime.bind(prop);
+ prop.getValueAtTime = expressionHelpers.getValueAtTime.bind(prop);
} else {
- prop.getValueAtTime = getStaticValueAtTime.bind(prop);
+ prop.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(prop);
}
- prop.setGroupProperty = setGroupProperty;
+ prop.setGroupProperty = expressionHelpers.setGroupProperty;
prop.loopOut = loopOut;
prop.loopIn = loopIn;
prop.smooth = smooth;
- prop.getVelocityAtTime = getVelocityAtTime.bind(prop);
- prop.getSpeedAtTime = getSpeedAtTime.bind(prop);
+ prop.getVelocityAtTime = expressionHelpers.getVelocityAtTime.bind(prop);
+ prop.getSpeedAtTime = expressionHelpers.getSpeedAtTime.bind(prop);
prop.numKeys = data.a === 1 ? data.k.length : 0;
prop.propertyIndex = data.ix;
var value = 0;
@@ -316,7 +228,7 @@
lastIndex: 0,
value: value
};
- searchExpressions(elem,data,prop);
+ expressionHelpers.searchExpressions(elem,data,prop);
if(prop.k){
container.addDynamicProperty(prop);
}
@@ -432,8 +344,8 @@
normalOnPath: function(perc, time){
return this.vectorOnPath(perc, time, 'normal');
},
- setGroupProperty: setGroupProperty,
- getValueAtTime: getStaticValueAtTime
+ setGroupProperty: expressionHelpers.setGroupProperty,
+ getValueAtTime: expressionHelpers.getStaticValueAtTime
};
extendPrototype([ShapeExpressions], ShapePropertyConstructorFunction);
extendPrototype([ShapeExpressions], KeyframedShapePropertyConstructorFunction);
@@ -446,22 +358,13 @@
prop.propertyIndex = data.ix;
prop.lock = false;
if(type === 3){
- searchExpressions(elem,data.pt,prop);
+ expressionHelpers.searchExpressions(elem,data.pt,prop);
} else if(type === 4){
- searchExpressions(elem,data.ks,prop);
+ expressionHelpers.searchExpressions(elem,data.ks,prop);
}
if(prop.k){
elem.addDynamicProperty(prop);
}
return prop;
};
-
- var propertyGetTextProp = TextSelectorProp.getTextSelectorProp;
- TextSelectorProp.getTextSelectorProp = function(elem, data,arr){
- if(data.t === 1){
- return new TextExpressionSelectorProp(elem, data,arr);
- } else {
- return propertyGetTextProp(elem,data,arr);
- }
- };
}());
\ No newline at end of file
diff --git a/player/js/utils/expressions/ExpressionValueFactory.js b/player/js/utils/expressions/ExpressionValueFactory.js
index c05f57f..ca70dcf 100644
--- a/player/js/utils/expressions/ExpressionValueFactory.js
+++ b/player/js/utils/expressions/ExpressionValueFactory.js
@@ -93,4 +93,4 @@
return MultidimensionalPropertyInterface(property);
}
}
-}())
+}());
diff --git a/player/js/utils/expressions/TextSelectorPropertyDecorator.js b/player/js/utils/expressions/TextSelectorPropertyDecorator.js
new file mode 100644
index 0000000..194b57b
--- /dev/null
+++ b/player/js/utils/expressions/TextSelectorPropertyDecorator.js
@@ -0,0 +1,43 @@
+(function(){
+
+ var TextExpressionSelectorProp = (function(){
+
+ function getValueProxy(index,total){
+ this.textIndex = index+1;
+ this.textTotal = total;
+ this.v = this.getValue() * this.mult;
+ return this.v;
+ }
+
+ return function TextExpressionSelectorProp(elem,data){
+ this.pv = 1;
+ this.comp = elem.comp;
+ this.elem = elem;
+ this.mult = 0.01;
+ this.propType = 'textSelector';
+ this.textTotal = data.totalChars;
+ this.selectorValue = 100;
+ this.lastValue = [1,1,1];
+ this.k = true;
+ this.x = true;
+ this.getValue = ExpressionManager.initiateExpression.bind(this)(elem,data,this);
+ this.getMult = getValueProxy;
+ this.getVelocityAtTime = expressionHelpers.getVelocityAtTime;
+ if(this.kf){
+ this.getValueAtTime = expressionHelpers.getValueAtTime.bind(this);
+ } else {
+ this.getValueAtTime = expressionHelpers.getStaticValueAtTime.bind(this);
+ }
+ this.setGroupProperty = expressionHelpers.setGroupProperty;
+ };
+ }());
+
+ var propertyGetTextProp = TextSelectorProp.getTextSelectorProp;
+ TextSelectorProp.getTextSelectorProp = function(elem, data,arr){
+ if(data.t === 1){
+ return new TextExpressionSelectorProp(elem, data,arr);
+ } else {
+ return propertyGetTextProp(elem,data,arr);
+ }
+ };
+}());
\ No newline at end of file
diff --git a/player/js/utils/expressions/expressionHelpers.js b/player/js/utils/expressions/expressionHelpers.js
new file mode 100644
index 0000000..4c3ffc2
--- /dev/null
+++ b/player/js/utils/expressions/expressionHelpers.js
@@ -0,0 +1,81 @@
+var expressionHelpers = (function(){
+
+ function searchExpressions(elem,data,prop){
+ if(data.x){
+ prop.k = true;
+ prop.x = true;
+ prop.initiateExpression = ExpressionManager.initiateExpression;
+ prop.effectsSequence.push(prop.initiateExpression(elem,data,prop).bind(prop));
+ }
+ }
+
+ function getValueAtTime(frameNum) {
+ frameNum *= this.elem.globalData.frameRate;
+ frameNum -= this.offsetTime;
+ if(frameNum !== this._cachingAtTime.lastFrame) {
+ this._cachingAtTime.lastIndex = this._cachingAtTime.lastFrame < frameNum ? this._cachingAtTime.lastIndex : 0;
+ this._cachingAtTime.value = this.interpolateValue(frameNum, this._cachingAtTime);
+ this._cachingAtTime.lastFrame = frameNum;
+ }
+ return this._cachingAtTime.value;
+
+ }
+
+ function getSpeedAtTime(frameNum) {
+ var delta = -0.01;
+ var v1 = this.getValueAtTime(frameNum);
+ var v2 = this.getValueAtTime(frameNum + delta);
+ var speed = 0;
+ if(v1.length){
+ var i;
+ for(i=0;i<v1.length;i+=1){
+ speed += Math.pow(v2[i] - v1[i], 2);
+ }
+ speed = Math.sqrt(speed) * 100;
+ } else {
+ speed = 0;
+ }
+ return speed;
+ }
+
+ function getVelocityAtTime(frameNum) {
+ if(this.vel !== undefined){
+ return this.vel;
+ }
+ var delta = -0.001;
+ //frameNum += this.elem.data.st;
+ var v1 = this.getValueAtTime(frameNum);
+ var v2 = this.getValueAtTime(frameNum + delta);
+ var velocity;
+ if(v1.length){
+ velocity = createTypedArray('float32', v1.length);
+ var i;
+ for(i=0;i<v1.length;i+=1){
+ //removing frameRate
+ //if needed, don't add it here
+ //velocity[i] = this.elem.globalData.frameRate*((v2[i] - v1[i])/delta);
+ velocity[i] = (v2[i] - v1[i])/delta;
+ }
+ } else {
+ velocity = (v2 - v1)/delta;
+ }
+ return velocity;
+ }
+
+ function getStaticValueAtTime() {
+ return this.pv;
+ }
+
+ function setGroupProperty(propertyGroup){
+ this.propertyGroup = propertyGroup;
+ }
+
+ return {
+ searchExpressions: searchExpressions,
+ getSpeedAtTime: getSpeedAtTime,
+ getVelocityAtTime: getVelocityAtTime,
+ getValueAtTime: getValueAtTime,
+ getStaticValueAtTime: getStaticValueAtTime,
+ setGroupProperty: setGroupProperty,
+ }
+}());
\ No newline at end of file
