Update test and readme to new api

koenbok · Sep 15, 2016 · 4511a7a · 4511a7a
1 parent 68fc9ba
commit 4511a7a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 36 deletions.
diff --git a/extras/templates/Project/app.js b/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()
 })
diff --git a/readme.md b/readme.md
@@ -25,22 +25,22 @@ imageLayer.center()
 ```
 ###### Add states
 ```javascript  
-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 default animation options
 ```javascript
-imageLayer.states.animationOptions = {
+imageLayer.options = {
 	curve: "spring(500,12,0)"
 }
 ```
 ###### Toggle states on click
 ```javascript
 imageLayer.onClick(function(event) {
-	imageLayer.states.next()
+	imageLayer.animateToNext()
 })
 ```
 #### Features

diff --git a/test/studio/SliderComponentMin.framer/app.coffee b/test/studio/SliderComponentMin.framer/app.coffee
@@ -13,11 +13,11 @@ sliderA.knob.width = sliderA.knob.height = 40
 
 # Visualize value
 sliderA.knob.clip = false
-valueLayer = new Layer 
+valueLayer = new Layer
 	width:60, height:72, image:"images/value.png"
 	superLayer: sliderA.knob
 	y: sliderA.knob.y - 70, scale: 0
-	
+
 valueLayer.x -= 10
 
 # Style
@@ -35,28 +35,28 @@ valueLayer.style = {
 valueLayer.originY = 1
 
 # States
-valueLayer.states.add 
+valueLayer.states =
 	fade25:    {opacity: 0.25}
 	fade50:    {opacity: 0.50}
 	fade75:    {opacity: 0.75}
 	nofade:    {opacity: 1}
 	scaleDown: {scale: 0}
 	scaleUp:   {scale: 0.8}
-		
-valueLayer.states.animationOptions = curve: "spring(300,30,0)"
+
+valueLayer.options = curve: "spring(300,30,0)"
 
 # Visualize output
 sliderA.knob.on Events.DragStart, ->
-	valueLayer.states.switch "scaleUp"
+	valueLayer.animateTo "scaleUp"
 
-# Test proper output		
+# Test proper output
 sliderA.on "change:value", ->
-	valueLayer.html = Math.round(this.value) 
-	valueLayer.states.switch "fade25" if this.value is 0 
-	valueLayer.states.switch "fade50" if this.value >= 25
-	valueLayer.states.switch "fade75" if this.value >= 50
-	valueLayer.states.switch "nofade" if this.value >= 75
+	valueLayer.html = Math.round(this.value)
+	valueLayer.animateTo "fade25" if this.value is 0
+	valueLayer.animateTo "fade50" if this.value >= 25
+	valueLayer.animateTo "fade75" if this.value >= 50
+	valueLayer.animateTo "nofade" if this.value >= 75
 
 # Return after DragEnd
 sliderA.knob.on Events.DragAnimationEnd, ->
-	valueLayer.states.switch "scaleDown"
+	valueLayer.animateTo "scaleDown"
diff --git a/test/studio/SliderComponentValue.framer/app.coffee b/test/studio/SliderComponentValue.framer/app.coffee
@@ -13,11 +13,11 @@ sliderA.knob.width = sliderA.knob.height = 40
 
 # Visualize value
 sliderA.knob.clip = false
-valueLayer = new Layer 
+valueLayer = new Layer
 	width:60, height:72, image:"images/value.png"
 	superLayer: sliderA.knob
 	y: sliderA.knob.y - 70, scale: 0
-	
+
 valueLayer.x -= 10
 
 # Style
@@ -35,28 +35,28 @@ valueLayer.style = {
 valueLayer.originY = 1
 
 # States
-valueLayer.states.add 
+valueLayer.states =
 	fade25:    {opacity: 0.25}
 	fade50:    {opacity: 0.50}
 	fade75:    {opacity: 0.75}
 	nofade:    {opacity: 1}
 	scaleDown: {scale: 0}
 	scaleUp:   {scale: 0.8}
-		
-valueLayer.states.animationOptions = curve: "spring(300,30,0)"
+
+valueLayer.options = curve: "spring(300,30,0)"
 
 # Visualize output
 sliderA.knob.on Events.DragStart, ->
-	valueLayer.states.switch "scaleUp"
+	valueLayer.animateTo "scaleUp"
 
-# Test proper output		
+# Test proper output
 sliderA.on "change:value", ->
-	valueLayer.html = Math.round(this.value) 
-	valueLayer.states.switch "fade25" if this.value is 0 
-	valueLayer.states.switch "fade50" if this.value >= 25
-	valueLayer.states.switch "fade75" if this.value >= 50
-	valueLayer.states.switch "nofade" if this.value >= 75
+	valueLayer.html = Math.round(this.value)
+	valueLayer.animateTo "fade25" if this.value is 0
+	valueLayer.animateTo "fade50" if this.value >= 25
+	valueLayer.animateTo "fade75" if this.value >= 50
+	valueLayer.animateTo "nofade" if this.value >= 75
 
 # Return after DragEnd
 sliderA.knob.on Events.DragAnimationEnd, ->
-	valueLayer.states.switch "scaleDown"
+	valueLayer.animateTo "scaleDown"