Skip to content
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}
@@ -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

@@ -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.