Skip to content
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()
})
@@ -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.
You can’t perform that action at this time.