Permalink
Browse files

Allow non animatable properties in states

Like scroll, backgroundColor etc. Transition will be instant.
  • Loading branch information...
koenbok committed Dec 12, 2014
1 parent 6cc6def commit 3f9411ec36d7e80d2416a173f9c8f044223e459a
@@ -1,15 +1,13 @@
Framer.Device = new Framer.DeviceView()
Framer.Device.setupContext()
layer = new Layer
layer.states.add
stateA: {backgroundColor:"red", x:500}
Framer.Device.deviceType = "desktop-browser-1440"
# layer.scroll.should.equal false
# layer.x.should.equal 0
f = false
l = new Layer
layer.states.on Events.StateDidSwitch, ->
print "done", layer.backgroundColor
l.on Events.Click, ->
if f is true
Framer.Device.deviceType = "desktop-browser-1440"
f = false
else
Framer.Device.deviceType = "fullscreen"
f = true
layer.states.switch "stateA", {curve:"ease-in-out", time:1}
View
@@ -121,6 +121,7 @@ class exports.Layer extends BaseClass
layer.ignoreEvents = false if value is true
@define "scroll",
exportable: true
get: -> @scrollHorizontal is true or @scrollVertical is true
set: (value) -> @scrollHorizontal = @scrollVertical = value
View
@@ -63,12 +63,12 @@ class exports.LayerStates extends BaseClass
# if stateName is @_currentState
# return
if not @_states.hasOwnProperty stateName
if not @_states.hasOwnProperty(stateName)
throw Error "No such state: '#{stateName}'"
@emit Events.StateWillSwitch, @_currentState, stateName, @
@emit(Events.StateWillSwitch, @_currentState, stateName, @)
@_previousStates.push @_currentState
@_previousStates.push(@_currentState)
@_currentState = stateName
properties = {}
@@ -89,6 +89,16 @@ class exports.LayerStates extends BaseClass
# Set the new value
properties[propertyName] = value
# If we are only transitioning to non-animatable (numeric) properties
# we fallback to an instant switch
animatablePropertyKeys = []
for k, v of properties
animatablePropertyKeys.push(k) if _.isNumber(v)
if animatablePropertyKeys.length == 0
instant = true
if instant is true
# We want to switch immediately without animation
@layer.properties = properties
@@ -102,9 +112,15 @@ class exports.LayerStates extends BaseClass
@_animation?.stop()
@_animation = @layer.animate animationOptions
@_animation.on "stop", =>
# Set all the values for keys that we couldn't animate
for k, v of properties
@layer[k] = v if not _.isNumber(v)
@emit Events.StateDidSwitch, _.last(@_previousStates), stateName, @
switchInstant: (stateName) ->
@switch stateName, null, true
@@ -117,11 +133,13 @@ class exports.LayerStates extends BaseClass
animatingKeys: ->
# Get a list of all the propeties controlled by states
keys = []
for stateName, state of @_states
continue if stateName is "default"
keys = _.union keys, _.keys state
keys = _.union(keys, _.keys(state))
keys
@@ -69,3 +69,56 @@ describe "LayerStates", ->
layer.states.switchInstant "stateB"
layer.states.current.should.equal "stateB"
layer.y.should.equal 123
describe "Properties", ->
it "should set scroll property", ->
layer = new Layer
layer.states.add
stateA: {scroll:true}
stateB: {scroll:false}
layer.states.switchInstant "stateA"
layer.scroll.should.equal true
layer.states.switchInstant "stateB"
layer.scroll.should.equal false
layer.states.switchInstant "stateA"
layer.scroll.should.equal true
it "should set non numeric properties with animation", (done) ->
layer = new Layer
layer.states.add
stateA: {scroll:true, backgroundColor:"red"}
layer.scroll.should.equal false
layer.states.on Events.StateDidSwitch, ->
layer.scroll.should.equal true
layer.backgroundColor.should.equal "red"
done()
layer.states.switch "stateA"
it "should set non and numeric properties with animation", (done) ->
layer = new Layer
layer.states.add
stateA: {x:200, backgroundColor:"red"}
# layer.scroll.should.equal false
layer.x.should.equal 0
layer.states.on Events.StateDidSwitch, ->
# layer.scroll.should.equal true
layer.x.should.equal 200
layer.backgroundColor.should.equal = "red"
done()
layer.states.switch "stateA", {curve:"linear", time:0.1}
@@ -228,6 +228,14 @@ describe "Layer", ->
layer.scroll.should.equal false
layer.style["overflow"].should.equal "hidden"
it "should set scroll from properties", ->
layer = new Layer
layer.properties = {scroll:false}
layer.scroll.should.equal false
layer.properties = {scroll:true}
layer.scroll.should.equal true
it "should set scrollHorizontal", ->
layer = new Layer

0 comments on commit 3f9411e

Please sign in to comment.