Merge pull request #84 from tisho/tisho/relative-property-values

Support for relative values in animation/state properties

framer/Animation.coffee

@@ -21,6 +21,20 @@ AnimatorClasses =
 AnimatorClasses["spring"] = AnimatorClasses["spring-rk4"]
 AnimatorClasses["cubic-bezier"] = AnimatorClasses["bezier-curve"]
 
+numberRE = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/
+relativePropertyRE = new RegExp('^(?:([+-])=|)(' + numberRE.source + ')([a-z%]*)$', 'i')
+
+isRelativeProperty = (v) ->
+	_.isString(v) and relativePropertyRE.test(v)
+
+evaluateRelativeProperty = (target, k, v) ->
+	[match, sign, number, unit, rest...] = relativePropertyRE.exec(v)
+
+	if sign
+		return target[k] + (sign + 1) * number
+	else
+		return +number
+
 _runningAnimations = []
 
 # Todo: this would normally be BaseClass but the properties keyword
@@ -65,7 +79,7 @@ class exports.Animation extends EventEmitter
 
 		# Only animate numeric properties for now
 		for k, v of properties
-			animatableProperties[k] = v if _.isNumber v
+			animatableProperties[k] = v if _.isNumber(v) or isRelativeProperty(v)
 
 		animatableProperties
 
@@ -133,16 +147,19 @@ class exports.Animation extends EventEmitter
 		stateA = @_currentState()
 		stateB = {}
 
-		# Filter out the properties that are equal
 		for k, v of @options.properties
+			# Evaluate relative properties
+			v = evaluateRelativeProperty(target, k, v) if isRelativeProperty(v)
+
+			# Filter out the properties that are equal
 			stateB[k] = v if stateA[k] != v
 
 		if _.isEqual stateA, stateB
 			console.warn "Nothing to animate"
 
 		if @options.debug
 			console.log "Animation.start"
-			console.log "\t#{k}: #{stateA[k]} -> #{stateB[k]}" for k, v of stateB 
+			console.log "\t#{k}: #{stateA[k]} -> #{stateB[k]}" for k, v of stateB
 
 		@_animator.on "start", => @emit "start"
 		@_animator.on "stop",  => @emit "stop"

test/tests/LayerAnimationTest.coffee

@@ -49,6 +49,41 @@ describe "LayerAnimation", ->
 					layer[p].should.equal 100
 					done()
 
+			it "should animate property #{p} with positive offset from current value", (done) ->
+
+				layer = new Layer()
+				layer[p] = 50
+
+				properties = {}
+				properties[p] = '+=50'
+
+				layer.animate
+					properties: properties
+					curve: "linear"
+					time: AnimationTime
+
+				layer.on "end", ->
+					layer[p].should.equal 100
+					done()
+
+			it "should animate property #{p} with negative offset from current value", (done) ->
+
+				layer = new Layer()
+				layer[p] = 50
+
+				properties = {}
+				properties[p] = '+=50'
+
+				layer.animate
+					properties: properties
+					curve: "linear"
+					time: AnimationTime
+
+				layer.on "end", ->
+					layer[p].should.equal 100
+					done()
+
+
 	describe "Basic", ->
 
 		it "should stop", (done) ->