Permalink
Browse files

Update test and readme to new api

  • Loading branch information...
nvh committed Jul 26, 2016
1 parent 68fc9ba commit 4511a7ae5ecc67c374272d388ca2af718bd91961
@@ -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()
})
View
@@ -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
@@ -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"
@@ -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"

0 comments on commit 4511a7a

Please sign in to comment.