Fix for animation timing

koenbok · Mar 18, 2013 · 98ca654d6b8c57df915f813520e399db64b16a07 · 98ca654
1 parent 37cd9ec
commit 98ca654d6b8c57df915f813520e399db64b16a07
Unified Split

Showing with 22 additions and 18 deletions.

+8 −7 build/framer.js

+6 −4 src/animation.coffee

+8 −7 template/framer.js
diff --git a/build/framer.js b/build/framer.js
@@ -1,6 +1,6 @@
-// Framer 0.5.0-29-gf74c9eb (c) 2013 Koen Bok
+// Framer 0.5.0-30-g37cd9ec (c) 2013 Koen Bok

-window.FramerVersion = "0.5.0-29-gf74c9eb";
+window.FramerVersion = "0.5.0-30-g37cd9ec";


 (function(){var require = function (file, cwd) {
@@ -3052,7 +3052,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
        this.curve = "linear";
      }
      if ((_ref3 = this.precision) == null) {
-        this.precision = 30;
+        this.precision = 40;
      }
      this.curveValues = this._parseCurve(this.curve);
      this.count = 0;
@@ -3061,7 +3061,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
    }

    Animation.prototype.start = function(callback) {
-      var finalize, k, propertiesA, propertiesB, v, _i, _len, _ref, _ref1,
+      var finalize, k, propertiesA, propertiesB, totalTime, v, _i, _len, _ref, _ref1,
        _this = this;
      this.count++;
      this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
@@ -3096,7 +3096,8 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
        }
      }
      this.keyFrameAnimationCSS = this._css();
-      css.addStyle("			" + this.keyFrameAnimationCSS + "					." + this.animationName + " {				-webkit-animation-duration: " + (this.time / 1000) + "s;				-webkit-animation-name: " + this.animationName + ";				-webkit-animation-timing-function: linear;				-webkit-animation-fill-mode: both;			}");
+      totalTime = this.curveValues.length / this.precision;
+      css.addStyle("			" + this.keyFrameAnimationCSS + "					." + this.animationName + " {				-webkit-animation-duration: " + totalTime + "s;				-webkit-animation-name: " + this.animationName + ";				-webkit-animation-timing-function: linear;				-webkit-animation-fill-mode: both;			}");
      if (this.graph) {
        this._graphView = this.graphView(this, 10, 20, 20, this.time);
      }
@@ -3177,7 +3178,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
      for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
        springValue = _ref1[_i];
        position = stepIncrement * stepDelta;
-        cssString.push("\t" + (position.toFixed(2)) + "%\t{ -webkit-transform: ");
+        cssString.push("\t" + position + "%\t{ -webkit-transform: ");
        _ref2 = this.AnimatableMatrixProperties;
        for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
          propertyName = _ref2[_j];
@@ -3192,7 +3193,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
            continue;
          }
          value = springValue * deltas[propertyName] + this.propertiesA[propertyName];
-          cssString.push("" + propertyName + ":" + (value.toFixed(5)) + unit + "; ");
+          cssString.push("" + propertyName + ":" + value + unit + "; ");
        }
        cssString.push("}\n");
        stepIncrement++;
diff --git a/src/animation.coffee b/src/animation.coffee
@@ -51,7 +51,7 @@ class Animation extends EventEmitter
 		# Set all the defaults
 		@time ?= 1000
 		@curve ?= "linear"
-		@precision ?= 30
+		@precision ?= 40
 		
 		@curveValues = @_parseCurve @curve
 		@count = 0
@@ -130,11 +130,13 @@ class Animation extends EventEmitter
 		# 	if @propertiesA[k] isnt @propertiesB[k]
 		# 		console.log " .#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
 		
+		totalTime = @curveValues.length / @precision
+		
 		css.addStyle "
 			#{@keyFrameAnimationCSS}
 		
 			.#{@animationName} {
-				-webkit-animation-duration: #{@time/1000}s;
+				-webkit-animation-duration: #{totalTime}s;
 				-webkit-animation-name: #{@animationName};
 				-webkit-animation-timing-function: linear;
 				-webkit-animation-fill-mode: both;
@@ -242,7 +244,7 @@ class Animation extends EventEmitter
 		
 			position = stepIncrement * stepDelta

-			cssString.push "\t#{position.toFixed(2)}%\t{ -webkit-transform: "
+			cssString.push "\t#{position}%\t{ -webkit-transform: "
 			
 			# Add the matrix based values
 			for propertyName in @AnimatableMatrixProperties
@@ -254,7 +256,7 @@ class Animation extends EventEmitter
 			for propertyName, unit of @AnimatableCSSProperties
 				continue if not @propertiesA.hasOwnProperty propertyName
 				value = springValue * deltas[propertyName] + @propertiesA[propertyName]
-				cssString.push "#{propertyName}:#{value.toFixed 5}#{unit}; "
+				cssString.push "#{propertyName}:#{value}#{unit}; "
 				
 			cssString.push "}\n"
 			
diff --git a/template/framer.js b/template/framer.js
@@ -1,6 +1,6 @@
-// Framer 0.5.0-29-gf74c9eb (c) 2013 Koen Bok
+// Framer 0.5.0-30-g37cd9ec (c) 2013 Koen Bok

-window.FramerVersion = "0.5.0-29-gf74c9eb";
+window.FramerVersion = "0.5.0-30-g37cd9ec";


 (function(){var require = function (file, cwd) {
@@ -3052,7 +3052,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
        this.curve = "linear";
      }
      if ((_ref3 = this.precision) == null) {
-        this.precision = 30;
+        this.precision = 40;
      }
      this.curveValues = this._parseCurve(this.curve);
      this.count = 0;
@@ -3061,7 +3061,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
    }

    Animation.prototype.start = function(callback) {
-      var finalize, k, propertiesA, propertiesB, v, _i, _len, _ref, _ref1,
+      var finalize, k, propertiesA, propertiesB, totalTime, v, _i, _len, _ref, _ref1,
        _this = this;
      this.count++;
      this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
@@ -3096,7 +3096,8 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
        }
      }
      this.keyFrameAnimationCSS = this._css();
-      css.addStyle("			" + this.keyFrameAnimationCSS + "					." + this.animationName + " {				-webkit-animation-duration: " + (this.time / 1000) + "s;				-webkit-animation-name: " + this.animationName + ";				-webkit-animation-timing-function: linear;				-webkit-animation-fill-mode: both;			}");
+      totalTime = this.curveValues.length / this.precision;
+      css.addStyle("			" + this.keyFrameAnimationCSS + "					." + this.animationName + " {				-webkit-animation-duration: " + totalTime + "s;				-webkit-animation-name: " + this.animationName + ";				-webkit-animation-timing-function: linear;				-webkit-animation-fill-mode: both;			}");
      if (this.graph) {
        this._graphView = this.graphView(this, 10, 20, 20, this.time);
      }
@@ -3177,7 +3178,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
      for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
        springValue = _ref1[_i];
        position = stepIncrement * stepDelta;
-        cssString.push("\t" + (position.toFixed(2)) + "%\t{ -webkit-transform: ");
+        cssString.push("\t" + position + "%\t{ -webkit-transform: ");
        _ref2 = this.AnimatableMatrixProperties;
        for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
          propertyName = _ref2[_j];
@@ -3192,7 +3193,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
            continue;
          }
          value = springValue * deltas[propertyName] + this.propertiesA[propertyName];
-          cssString.push("" + propertyName + ":" + (value.toFixed(5)) + unit + "; ");
+          cssString.push("" + propertyName + ":" + value + unit + "; ");
        }
        cssString.push("}\n");
        stepIncrement++;