Initial support for animation graphs

src/animation.coffee

@@ -24,19 +24,19 @@ parseCurve = (a, prefix) ->
 class Animation extends EventEmitter
 
 	AnimationProperties: [
-		"view", "properties", "curve", "time", 
-		"origin", "tolerance", "precision"
+		"view", "properties", "curve", "time",
+		"origin", "tolerance", "precision", "graph"
 	]
 	AnimatableCSSProperties: {
 		opacity: "",
 		width: "px",
 		height: "px",
 	}
 	AnimatableMatrixProperties: [
-		"x", "y", "z", 
-		"scaleX", "scaleY", "scaleZ", # "scale",  
+		"x", "y", "z",
+		"scaleX", "scaleY", "scaleZ", # "scale",
 		"rotateX", "rotateY", "rotateZ", # "rotate"
-	] # width, height, opacity
+	]
 
 	constructor: (args) ->
 
@@ -49,7 +49,7 @@ class Animation extends EventEmitter
 		# Set all the defaults
 		@time ?= 1000
 		@curve ?= "linear"
-		@precision ?= 30
+		@precision ?= 40
 
 		@curveValues = @_parseCurve @curve
 		@count = 0
@@ -66,7 +66,8 @@ class Animation extends EventEmitter
 
 		# See if we have other animations running on this view
 		# if @view._currentAnimations.length > 0
-		# 	console.log "Warning: Animation.start #{@animationName} already animations running on view #{@view.name}"
+		# 	console.log "Warning: Animation.start #{@animationName} already
+		# 	 animations running on view #{@view.name}"
 
 
 		# We stop all other animations on this view. Maybe we should revisit
@@ -79,7 +80,7 @@ class Animation extends EventEmitter
 
 		# if @_running is true
 		# 	throw Error "Animation.start #{@animationName} already running"
-		# 
+		#
 		# @_running = true
 
 		# TODO: test if we are trying to animate something that cannot animate
@@ -100,7 +101,7 @@ class Animation extends EventEmitter
 
 		# Build up the matrix animation properties
 
-		for k in @AnimatableMatrixProperties 
+		for k in @AnimatableMatrixProperties
 
 			@propertiesA[k] = propertiesA[k]
 
@@ -132,7 +133,11 @@ class Animation extends EventEmitter
 				-webkit-animation-timing-function: linear;
 				-webkit-animation-fill-mode: both;
 			}"
-
+
+
+		if @graph
+			@_graphView = @graphView @, 10, 20, 20, @time
+
 		@view.addClass @animationName
 
 		finalize = =>
@@ -171,7 +176,7 @@ class Animation extends EventEmitter
 		calculatedStyles = {}
 		computedStyles = @view.computedStyles
 		for k, v of @AnimatableCSSProperties
-			calculatedStyles[k] = computedStyles 
+			calculatedStyles[k] = computedStyles
 		@view.style = calculatedStyles
 
 		@_cleanup()
@@ -199,6 +204,8 @@ class Animation extends EventEmitter
 		@view.removeClass @animationName
 		@emit "end"
 
+		@_graphView?.visible = false
+
 		# console.log "_cleanup", @view._currentAnimations
 
 	_css: ->
@@ -216,10 +223,13 @@ class Animation extends EventEmitter
 
 		# Pre-calculate the delta values
 		for propertyName, value of @propertiesA
-			deltas[propertyName] = (@propertiesB[propertyName] - @propertiesA[propertyName]) / 100.0
+			deltas[propertyName] = (
+				@propertiesB[propertyName] - @propertiesA[propertyName]
+			) / 100.0
 
-		# We define this object outside of the loop to re-use it. In theory this should help a 
-		# bit with perfomance, in practise I'm too lazy to prove it.
+		# We define this object outside of the loop to re-use it.
+		# In theory this should help a bit with perfomance, in practise
+		# I'm too lazy to prove it.
 		m = new Matrix()
 
 		for springValue in @curveValues
@@ -275,5 +285,55 @@ class Animation extends EventEmitter
 			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