Separate the css from keyframe generation

src/animation.coffee

@@ -29,8 +29,8 @@ class Animation extends EventEmitter
 
 	AnimationProperties: [
 		"view", "properties", "curve", "time",
-		"origin", "tolerance", "precision", "modifiers", "limits"
-		"debug", "profile", "callback"
+		"origin", "tolerance", "precision", "modifiers", 
+		"limits", "debug", "profile", "callback"
 	]
 	AnimatableCSSProperties: {
 		opacity: "",
@@ -186,11 +186,12 @@ class Animation extends EventEmitter
 
 		########################################################
 		# Finalize
-
-		if @debug
-			endTime = new Date().getTime() - startTime
-			console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
-			console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 0}ms"
+
+		@view.once "webkitAnimationStart", =>
+			if @debug
+				endTime = new Date().getTime() - startTime
+				console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
+				console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 0}ms"
 
 		console.profileEnd @animationName if @profile
 
@@ -273,58 +274,66 @@ class Animation extends EventEmitter
 		@callback? @
 		@emit "end"
 
-	_css: ->
+	_keyFrames: ->
 
-		# Build the css for the keyframe animation. I wish there was a nicer
-		# way to do this, but this will work for now.
+		# Build keyframes based on our values
 
 		stepIncrement = 0
 		stepDelta = 100 / (@curveValues.length - 1)
 
-		cssString = []
-		cssString.push "@-webkit-keyframes #{@animationName} {\n"
-
 		deltas = @_deltas()
+		keyFrames = {}
 
-		# 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
-
+		for curveValue in @curveValues
+
 			position = stepIncrement * stepDelta
+			position = utils.round position, config.roundingDecimals
+
+			currentKeyFrame = {}
+
+			for propertyName of @propertiesA
+				currentKeyFrame[propertyName] = curveValue * deltas[propertyName] + @propertiesA[propertyName]
+
+			keyFrames[position] = currentKeyFrame
+
+			stepIncrement++
+
+		keyFrames
 
-			cssString.push "\t#{utils.round position, config.roundingDecimals}%\t{ -webkit-transform: "
+	_css: ->
+
+		# Create the css from a set of keyframes
+
+		keyFrames = @_keyFrames()
+
+		cssString = []
+		cssString.push "@-webkit-keyframes #{@animationName} {\n"
+
+		matrix = new Matrix()
+
+		for position, values of keyFrames
+
+			cssString.push "\t#{position}%\t{ -webkit-transform: "
 
 			# Add the matrix based values
 			for propertyName in @AnimatableMatrixProperties
-
-				# Calculate the clean spring value for this point
-				value = springValue * deltas[propertyName] + @propertiesA[propertyName]
-
-				# Modify the value if we have a modifier set up. This let's us do 
-				# special stuff like drop the friction once we run into the scroll 
-				# bounds for a scrollview.
-				if @modifiers?[propertyName]?
-					value = @modifiers[propertyName](value)
-
-				m[propertyName] = value
-
-			cssString.push m.matrix().cssValues() + "; "
+				if values.hasOwnProperty propertyName
+					matrix[propertyName] = values[propertyName]
+				else
+					matrix[propertyName] = @view[propertyName]
+
+			cssString.push matrix.matrix().cssValues() + "; "
 
+			# Add the css based values
 			for propertyName, unit of @AnimatableCSSProperties
-				continue if not @propertiesA.hasOwnProperty propertyName
-				value = springValue * deltas[propertyName] + @propertiesA[propertyName]
-				cssString.push "#{propertyName}:#{ utils.round value, config.roundingDecimals}#{unit}; "
+				continue if not values.hasOwnProperty propertyName
+				cssString.push "#{propertyName}:#{ utils.round values[propertyName], config.roundingDecimals}#{unit}; "
 
 			cssString.push "}\n"
 
-			stepIncrement++
-
 		cssString.push "}\n"
 		cssString.join ""
-	
+
 	_deltas: ->
 
 		deltas = {}