Merge pull request #385 from koenbok/feature/animation-refactor

add `animateTo` with different argument behaviour

framer/Layer.coffee

@@ -879,12 +879,25 @@ class exports.Layer extends BaseClass
 	## ANIMATION
 
 	animate: (options) ->
+		# console.warn "Layer.animate is deprecated: please use Layer.animateTo instead"
+		properties = options.properties
+		delete options.properties
+		@animateTo(properties, options)
+
+	animateTo: (properties,options={}) ->
+		_.defaults(options,properties.options)
+		delete properties.options
+		options.properties = Animation.filterAnimatableProperties(properties)
+		options.layer = @
 
 		start = options.start
 		start ?= true
 		delete options.start
 
-		options.layer = @
+		if options.instant
+			options.animate = false
+		delete options.instant
+
 		animation = new Animation options
 		animation.start() if start
 		animation
@@ -1007,20 +1020,20 @@ class exports.Layer extends BaseClass
 		# would break nested ScrollComponents.
 
 		if @_cancelClickEventInDragSession and not @_draggable
-			
+
 			if eventName in [
 				Events.Click, Events.Tap, Events.TapStart, Events.TapEnd,
 				Events.LongPress, Events.LongPressStart, Events.LongPressEnd]
-				
+
 				parentDraggableLayer = @_parentDraggableLayer()
-				
+
 				if parentDraggableLayer
 
 					# If we had a reasonable scrolling offset we cancel the click
 					offset = parentDraggableLayer.draggable.offset
 					return if Math.abs(offset.x) > @_cancelClickEventInDragSessionOffset
 					return if Math.abs(offset.y) > @_cancelClickEventInDragSessionOffset
-					
+
 					# If there is still some velocity (scroll is moving) we cancel the click
 					velocity = parentDraggableLayer.draggable.velocity
 					return if Math.abs(velocity.x) > @_cancelClickEventInDragSessionVelocity

framer/LayerStates.coffee

@@ -80,7 +80,7 @@ class exports.LayerStates extends BaseClass
 			# Allow dynamic properties as functions
 			if _.isFunction(value)
 				value = value.call(@layer, @layer, propertyName, stateName)
-			
+
 			# Set the new value
 			properties[propertyName] = value
 
@@ -93,7 +93,7 @@ class exports.LayerStates extends BaseClass
 			# We can animate numbers
 			if _.isNumber(v)
 				animatablePropertyKeys.push(k)
-			
+
 			# We can animate colors
 			else if Color.isColorObject(v)
 				animatablePropertyKeys.push(k)
@@ -109,10 +109,9 @@ class exports.LayerStates extends BaseClass
 
 		# If there are, we start the animation here
 		animationOptions ?= @animationOptions
-		animationOptions.properties = properties
 
 		@_animation?.stop()
-		@_animation = @layer.animate(animationOptions)
+		@_animation = @layer.animateTo(properties,animationOptions)
 
 		# Once the animation is done, we set all the keys that we could not animate
 		@_animation.once "stop", =>

test/tests/ContextTest.coffee

@@ -132,9 +132,8 @@ describe "Context", ->
 
 			context.run ->
 				layer = new Layer
-				animation = layer.animate
-					properties:
-						x: 100
+				animation = layer.animateTo
+					x: 100
 
 			# We should have a click listener
 			context.animations.should.eql [animation]
@@ -163,11 +162,11 @@ describe "Context", ->
 	describe "Layers", ->
 
 		it "should add and remove layers", ->
-			
+
 			context = new Framer.Context(name:"Test")
-			
+
 			context.run ->
-				
+
 				layerA = new Layer
 				layerB = new Layer
 				layerC = new Layer
@@ -178,11 +177,11 @@ describe "Context", ->
 				context.layers.should.eql []
 
 		it "should list root layers", ->
-			
+
 			context = new Framer.Context(name:"Test")
-			
+
 			context.run ->
-				
+
 				layerA = new Layer
 				layerB = new Layer parent:layerA
 
@@ -193,15 +192,15 @@ describe "Context", ->
 		it "should get layers by id", ->
 
 			context = new Framer.Context(name:"Test")
-			
+
 			context.run ->
 				layerA = new Layer
 				context.layerForId(layerA.id).should.equal layerA
 
 		it "should get layers by element", ->
 
 			context = new Framer.Context(name:"Test")
-			
+
 			context.run ->
 				layerA = new Layer
 				context.layerForElement(layerA._element).should.equal layerA

test/tests/LayerAnimationTest.coffee

@@ -33,7 +33,7 @@ describe "LayerAnimation", ->
 
 		AnimationProperties.map (p) ->
 
-			it "should animate property #{p}", (done) ->
+			it "should still support the deprecated API for property #{p}", (done) ->
 
 				layer = new Layer()
 
@@ -49,6 +49,38 @@ describe "LayerAnimation", ->
 					layer[p].should.equal 100
 					done()
 
+			it "should animate property #{p}", (done) ->
+
+				layer = new Layer()
+
+				properties = {}
+				properties[p] = 100
+				options =
+					curve: "linear"
+					time: AnimationTime
+
+				animation = layer.animateTo properties, options
+				animation.options.curve.should.equal "linear"
+				layer.on "end", ->
+					layer[p].should.equal 100
+					done()
+
+			it "should support options key for property #{p}", (done) ->
+				layer = new Layer()
+
+				properties = {}
+				properties[p] = 100
+				properties.options =
+					curve: "linear"
+					time: AnimationTime
+
+				animation = layer.animateTo properties
+				animation.options.curve.should.equal "linear"
+
+				layer.on "end", ->
+					layer[p].should.equal 100
+					done()
+
 			it "should animate property #{p} with positive offset from current value", (done) ->
 
 				layer = new Layer()
@@ -57,11 +89,11 @@ describe "LayerAnimation", ->
 				properties = {}
 				properties[p] = '+=50'
 
-				layer.animate
-					properties: properties
+				layer.animateTo properties,
 					curve: "linear"
 					time: AnimationTime
 
+
 				layer.on "end", ->
 					layer[p].should.equal 100
 					done()
@@ -74,24 +106,25 @@ describe "LayerAnimation", ->
 				properties = {}
 				properties[p] = '+=50'
 
-				layer.animate
-					properties: properties
+				layer.animateTo properties,
 					curve: "linear"
 					time: AnimationTime
 
+
 				layer.on "end", ->
 					layer[p].should.equal 100
 					done()
 
+
 		it "should animate dynamic properties", (done) ->
 
 			layer = new Layer()
 
-			layer.animate
-				properties:
-					scale: -> layer.scale + 1
-				curve: "linear"
-				time: AnimationTime
+			layer.animateTo
+				scale: -> layer.scale + 1
+				options:
+					curve: "linear"
+					time: AnimationTime
 
 			layer.on "end", ->
 				layer.scale.should.equal 2
@@ -102,11 +135,11 @@ describe "LayerAnimation", ->
 			color = "red"
 			layer = new Layer()
 
-			layer.animate
-				properties:
-					backgroundColor: color
-				curve: "linear"
-				time: AnimationTime
+			layer.animateTo
+				backgroundColor: color
+				options:
+					curve: "linear"
+					time: AnimationTime
 
 			layer.on "end", ->
 				layer.backgroundColor.toName().should.eql color
@@ -160,9 +193,10 @@ describe "LayerAnimation", ->
 		it "should list running animations", ->
 
 			layer = new Layer()
-			animation = layer.animate
-				properties: {x: 100}
-				time: 0.5
+			animation = layer.animateTo
+				x: 100
+				options:
+					time: 0.5
 
 			(animation in layer.animations()).should.be.true
 			layer.animateStop()
@@ -172,9 +206,10 @@ describe "LayerAnimation", ->
 
 			layer = new Layer()
 
-			animation = layer.animate
-				properties: {x: 100}
-				time: 0.5
+			animation = layer.animateTo
+				x: 100
+				options:
+					time: 0.5
 
 			count = 0
 
@@ -191,9 +226,10 @@ describe "LayerAnimation", ->
 		it "should tell you if animations are running", ->
 
 			layer = new Layer()
-			animation = layer.animate
-				properties: {x: 100}
-				time: 0.5
+			animation = layer.animateTo
+				x: 100
+				options:
+					time: 0.5
 
 			layer.isAnimating.should.equal(true)
 			layer.animateStop()
@@ -313,22 +349,25 @@ describe "LayerAnimation", ->
 
 			layerA = new Layer width:80, height:80
 			layerA.name = "layerA"
-			layerA.animate
-				properties: {y:300}
-				time: 2 * AnimationTime
+			layerA.animateTo
+				y:300
+				options:
+					time: 2 * AnimationTime
 
 			layerB = new Layer width:80, height:80, x:100, backgroundColor:"red"
 			layerB.name = "layerB"
-			layerB.animate
-				properties: {y:300}
-				time: 5 * AnimationTime
+			layerB.animateTo
+				y:300
+				options:
+					time: 5 * AnimationTime
 
 			layerC = new Layer width:80, height:80, x:200, backgroundColor:"orange"
 			layerC.name = "layerC"
-			layerC.animate
-				properties: {y:300}
-				time: 2 * AnimationTime
-				curve: "cubic-bezier"
+			layerC.animateTo
+				y:300
+				options:
+					time: 2 * AnimationTime
+					curve: "cubic-bezier"
 
 			readyLayers = []
 
@@ -474,3 +513,22 @@ describe "LayerAnimation", ->
 
 				@layer.x.should.equal 100
 				calledEvents.should.eql(["start", "end", "stop"])
+
+			it "should listen to instant: true to disable animation", ->
+				animation = @layer.animateTo
+					x: 100
+					options:
+						curve: "spring"
+						time: 2
+						instant: true
+
+				calledEvents = []
+
+				["start", "stop", "end"].map (eventName) ->
+					animation.on eventName, ->
+						calledEvents.push(eventName)
+
+				animation.start()
+
+				@layer.x.should.equal 100
+				calledEvents.should.eql(["start", "end", "stop"])

test/tests/LayerTest.coffee

@@ -1131,9 +1131,9 @@ describe "Layer", ->
 			layer = new Layer
 			layer.draggable.enabled = true
 
-			a1 = layer.animate properties: {x:100}
-			a2 = layer.animate properties: {y:100}
-			a3 = layer.animate properties: {blur:1}
+			a1 = layer.animateTo x:100
+			a2 = layer.animateTo y:100
+			a3 = layer.animateTo blur:1
 
 			a1.isAnimating.should.equal true
 			a2.isAnimating.should.equal true