Cleanup, add shift key for slow animations

src/animation.coffee

@@ -1,4 +1,5 @@
 _ = require "underscore"
+{config} = require "./config"
 utils = require "./utils"
 css = require "./css"
 
@@ -53,8 +54,11 @@ class Animation extends EventEmitter
 		# Set all the defaults
 		@time ?= 1000
 		@curve ?= "linear"
-		@precision ?= 30
 		@count = 0
+
+		@precision ?= config.animationPrecision
+		@debug ?= config.animationDebug
+		@profile ?= config.animationProfile
 
 		AnimationCounter += 1
 		@animationId = AnimationCounter
@@ -72,7 +76,8 @@ class Animation extends EventEmitter
 		@count++
 		@animationName = "framer-animation-#{@animationId}-#{@count}"
 
-		console.log "Animation.start #{@animationName}" if @debug
+		console.log "Animation[#{@animationId}].start" if @debug
+		console.log "Animation[#{@animationId}].view = #{@view.name}" if @debug
 		console.profile @animationName if @profile
 
 
@@ -158,7 +163,8 @@ class Animation extends EventEmitter
 
 		if @debug
 			endTime = new Date().getTime() - startTime
-			console.log "Animation.setupTime = #{endTime}ms"
+			console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
+			console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 2}ms"
 
 		console.profileEnd @animationName if @profile
 
@@ -182,7 +188,7 @@ class Animation extends EventEmitter
 
 	stop: =>
 
-		console.log "Animation.stop #{@animationName}" if @debug
+		console.log "Animation[#{@animationId}].stop #{@animationName}" if @debug
 
 		@_canceled = true
 
@@ -198,7 +204,7 @@ class Animation extends EventEmitter
 		if @_canceled is true
 			return
 
-		console.log "Animation.end #{@animationName}" if @debug
+		console.log "Animation[#{@animationId}].end #{@animationName}" if @debug
 
 		@_cleanup true
 
@@ -260,7 +266,7 @@ class Animation extends EventEmitter
 
 			position = stepIncrement * stepDelta
 
-			cssString.push "\t#{position}%\t{ -webkit-transform: "
+			cssString.push "\t#{utils.round position, config.roundingDecimals}%\t{ -webkit-transform: "
 
 			# Add the matrix based values
 			for propertyName in @AnimatableMatrixProperties
@@ -281,7 +287,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}:#{ utils.round value, 5}#{unit}; "
+				cssString.push "#{propertyName}:#{ utils.round value, config.roundingDecimals}#{unit}; "
 
 			cssString.push "}\n"
 
@@ -305,77 +311,33 @@ class Animation extends EventEmitter
 		curve ?= ""
 		curve = curve.toLowerCase()
 
+		# If the shift key is pressed, we would like to play the animation slowly.
+		factor = config.timeSpeedFactor
+
+		precision = @precision * factor
+		time = @time * factor
+
 		if curve in ["linear"]
-			return bezier.defaults.Linear @precision, @time
+			return bezier.defaults.Linear @precision, time
 		else if curve in ["ease"]
-			return bezier.defaults.Ease @precision, @time
+			return bezier.defaults.Ease @precision, time
 		else if curve in ["ease-in"]
-			return bezier.defaults.EaseIn @precision, @time
+			return bezier.defaults.EaseIn @precision, time
 		else if curve in ["ease-out"]
-			return bezier.defaults.EaseOut @precision, @time
+			return bezier.defaults.EaseOut @precision, time
 		else if curve in ["ease-in-out"]
-			return bezier.defaults.EaseInOut @precision, @time
+			return bezier.defaults.EaseInOut @precision, time
 		else if curve[.."cubic-bezier".length-1] is "cubic-bezier"
 			v = parseCurve curve, "cubic-bezier"
-			return bezier.BezierCurve v[0], v[1], v[2], v[3], @precision, @time
+			return bezier.BezierCurve v[0], v[1], v[2], v[3], precision, time
 		else if curve[.."spring".length-1] is "spring"
 			v = parseCurve curve, "spring"
-			return spring.SpringCurve v[0], v[1], v[2], @precision
+			return spring.SpringCurve v[0], v[1], v[2], precision
 		else
 
 			# The default curve is linear
 			console.log "Animation.parseCurve: could not parse curve '#{curve}'"
 			return bezier.defaults.Linear @precision, @time
 
-	graphView: (animation, x, y, h, time) ->
-
-		color = "rgba(50,150,200,.35)"
-		values = animation.curveValues
-
-		width = 300
-
-		graph = new View
-			y: y
-			x: x
-			width:100
-			height:h
-
-		# graph.style.backgroundColor = "rgba(0, 0, 0, 1)"
-		graph.clip = false
-
-		background = new View
-			y: 0 - h
-			height:h * 2 + 3
-			superView: graph
-
-		background.style.backgroundColor = "rgba(255,255,255,.85)"
-
-
-		for value, i in values
-			dot = new View
-				width:3, height:3
-				x: i * widthFactor, y: (100 - value) * (h / 100)
-				superView: graph
-			dot.style.borderRadius = "5px"
-			dot.style.backgroundColor = color
-
-		graph.width = dot.x
-		background.width = dot.x
-
-		if time
-			player = new View
-				x:0, y:-h
-				width: 2, height: h * 2
-				superView: graph
-
-			player.style.backgroundColor = color
-
-			player.animate
-				properties: {x:graph.width}
-				time: time
-
-		return graph
-
-
 
 exports.Animation = Animation