Merge branch 'master' of github.com:koenbok/Framer

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"

framer/Layer.coffee

@@ -123,6 +123,10 @@ class exports.Layer extends BaseClass
 	@define "scaleZ", layerProperty "scaleZ", "webkitTransform", 1, _.isNumber
 	@define "scale", layerProperty "scale", "webkitTransform", 1, _.isNumber
 
+	@define "skewX", layerProperty "skewX", "webkitTransform", 0, _.isNumber
+	@define "skewY", layerProperty "skewY", "webkitTransform", 0, _.isNumber
+	@define "skew", layerProperty "skew", "webkitTransform", 0, _.isNumber
+
 	# @define "scale",
 	# 	get: -> (@scaleX + @scaleY + @scaleZ) / 3.0
 	# 	set: (value) -> @scaleX = @scaleY = @scaleZ = value

framer/LayerStyle.coffee

@@ -88,7 +88,10 @@ exports.LayerStyle =
 		"
 		translate3d(#{layer.x}px,#{layer.y}px,#{layer.z}px) 
 		scale(#{layer.scale})
-		scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ}) 
+		scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})
+		skew(#{layer.skew}deg,#{layer.skew}deg) 
+		skewX(#{layer.skewX}deg)  
+		skewY(#{layer.skewY}deg) 
 		rotateX(#{layer.rotationX}deg) 
 		rotateY(#{layer.rotationY}deg) 
 		rotateZ(#{layer.rotationZ}deg) 

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) ->

test/tests/LayerTest.coffee

@@ -84,7 +84,7 @@ describe "Layer", ->
 			layer.y.should.equal 50
 
 			# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
-			layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
+			layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
 
 		it "should set scale", ->
 
@@ -95,7 +95,7 @@ describe "Layer", ->
 			layer.scaleZ = 100
 
 			# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 50)"
-			layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
+			layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
 
 		it "should set origin", ->