Merge branch 'master' into tisho/animation-paths

Signed-off-by: Niels van Hoorn <[email protected]>

# Conflicts:
#	framer/Animation.coffee
#	framer/Layer.coffee
#	test/tests/LayerAnimationTest.coffee

Makefile

@@ -2,6 +2,10 @@
 
 BIN = $(CURDIR)/node_modules/.bin
 
+DEFAULT_TARGET = extras/Studio.framer
+TARGET ?= $(DEFAULT_TARGET)
+TARGET_EXPANDED = $(shell echo $(TARGET)) # For ~ in paths, gulp needs this
+
 .PHONY: watch test debug release
 
 default: lazy_bootstrap lazy_build test
@@ -26,7 +30,8 @@ clean:
 # Building and testing
 
 watch: lazy_bootstrap
-	$(BIN)/gulp watch
+	-cp $(DEFAULT_TARGET)/index.html $(TARGET)
+	TARGET='$(strip $(TARGET_EXPANDED))' $(BIN)/gulp watch
 
 build: lazy_bootstrap
 	$(BIN)/gulp webpack:debug
@@ -43,7 +48,7 @@ release: lazy_bootstrap
 # Framer Studio
 
 studio:
-	open -a "Framer Beta" extras/Studio.framer
+	open -a "Framer Beta" ${TARGET}
 	make watch
 
 perf: debug

extras/Perf.framer/app.coffee

@@ -2,62 +2,62 @@ class FPS
 
 	constructor: ->
 		@start()
-		
+
 	start: ->
 		@_start = Utils.getTime()
 		@_time = @_start
 		@_frames = []
 		Framer.Loop.on("update", @tick)
-	
+
 	stop: ->
 		Framer.Loop.off("update", @tick)
 
 	tick: =>
 		now = Utils.getTime()
 		@_frames.push(now - @_time)
 		@_time = now
-	
+
 	totalTime: ->
 		@_time - @_start
-	
+
 	droppedFrames: ->
 		_.filter @_frames, (t) -> t > (1 / 60) * 1.1
-	
+
 	droppedFrameRate: ->
 		Utils.round(@droppedFrames().length / @totalTime(), 1)
-		
+
 	averageFPS: ->
 		Utils.round(@_frames.length / Utils.sum(@_frames), 1)
 
 testLayers = (n, options={}, callback) ->
-		
+
 	options = _.defaults options,
 		width: 500
 		height: 500
 		time: 1
-	
+
 	Framer.CurrentContext.reset()
 
 	counter = 0
-	
+
 	endGame = ->
-		
+
 		counter++
-		
+
 		if counter == n
 			fps.stop()
 			callback?(fps)
-	
+
 	root = new Layer
 		width: options.width
 		height: options.height
 		backgroundColor: "rgba(0, 0, 0, .1)"
 		clip: true
-	
+
 	root.center()
-			
+
 	layers = for i in [0..n]
-		
+
 		layer = new Layer
 			width: 100, height: 100,
 			x: Math.random() * options.width - (.5 * 100)
@@ -74,9 +74,9 @@ testLayers = (n, options={}, callback) ->
 				x: Math.random() * options.width
 				y: Math.random() * options.height
 			time: options.time
-		
+
 		animation.on(Events.AnimationEnd, endGame)
-		
+
 
 
 start = 40
@@ -87,12 +87,12 @@ stats = []
 next = ->
 
 	testLayers current, {}, (fps) ->
-		
+
 		print "#{current} layers at #{fps.averageFPS()} fps"
-		
+
 		stats.push([current, fps.averageFPS()])
 		current = current + start
-		
+
 		if fps.averageFPS() > minFPS
 			next()
 		else
@@ -103,39 +103,37 @@ next()
 
 
 drawChart = (stats) ->
-	
+
 	canvasLayer = new Layer
 		width: 500
 		height: 300
 		backgroundColor: "white"
-		
+
 	canvasLayer.center()
-	canvasLayer.html = """<canvas 
-		width='#{canvasLayer.width - 20}px' 
+	canvasLayer.html = """<canvas
+		width='#{canvasLayer.width - 20}px'
 		height='#{canvasLayer.height-20}px'>
 	</canvas>"""
-	
+
 	canvasElement = canvasLayer.querySelectorAll("canvas")[0]
-	
+
 	data =
-	    labels: stats.map (i) -> i[0].toString()
-	    datasets: [
-	        {
-	            fillColor: "rgba(220,220,220,0.2)"
-	            strokeColor: "rgba(220,220,220,1)"
-	            pointColor: "rgba(220,220,220,1)"
-	            pointStrokeColor: "#fff"
-	            pointHighlightFill: "#fff"
-	            pointHighlightStroke: "rgba(220,220,220,1)"
-	            data: stats.map (i) -> i[1]
-	        }
-	    ]
-	
+			labels: stats.map (i) -> i[0].toString()
+			datasets: [
+					{
+							fillColor: "rgba(220, 220, 220, 0.2)"
+							strokeColor: "rgba(220, 220, 220, 1)"
+							pointColor: "rgba(220, 220, 220, 1)"
+							pointStrokeColor: "#fff"
+							pointHighlightFill: "#fff"
+							pointHighlightStroke: "rgba(220, 220, 220, 1)"
+							data: stats.map (i) -> i[1]
+					}
+			]
+
 	options = {}
 
-	
+
 	lineChart = new Chart(canvasElement.getContext("2d")).Line(data, options)
-
-	print Framer.Version
 
-
+	print Framer.Version

extras/Studio.framer/app.coffee

@@ -1,2 +0,0 @@
-Framer.Device.deviceType = "sony-w85Oc"
-Screen.backgroundColor = "28affa"

extras/Studio.framer/framer/config.json

@@ -5,7 +5,7 @@
   "deviceOrientation" : 0,
   "sharedPrototype" : 1,
   "contentScale" : 1,
-  "deviceType" : "custom",
+  "deviceType" : "apple-macbook",
   "selectedHand" : "",
   "updateDelay" : 0.3,
   "deviceScale" : "fit",

extras/Studio.framer/framer/version

@@ -1 +1 @@
-3
+4

extras/templates/Project/app.js

@@ -6,18 +6,18 @@ imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/Icon.png"
 imageLayer.center()
 
 // Define a set of states with names (the original state is 'default')
-imageLayer.states.add({
+imageLayer.states = {
 	second: {y:100, scale:0.6, rotationZ:100},
 	third:  {y:300, scale:1.3},
-	fourth:	{y:200, scale:0.9, rotationZ:200},
-})
+	fourth:	{y:200, scale:0.9, rotationZ:200}
+}
 
 // Set the default animation options
-imageLayer.states.animationOptions = {
+imageLayer.options = {
 	curve: "spring(500,12,0)"
 }
 
 // On a click, go to the next state
 imageLayer.on(Events.Click, function() {
-	imageLayer.states.next()
+	imageLayer.animateToNext()
 })