UX Design for Mobile

States

A state is a set of values for some of the properties of a layer. We can use states, for example, to define the different positions an element can take, and use these states when the user makes an action on our user interface, to make the element visible on the screen area. In the next example, the movingLayer layer has two states--up and down--and changes from one to the other when the user taps on the layer:

movingLayer = new LayermovingLayer.centerX()movingLayer.states =    up:        y: 400    down:        y: 1200movingLayer.stateSwitch("up")movingLayer.onTap ->    movingLayer.stateCycle("up", "down")

Download prototype from Asset_A6462_A08_A14_Example_MovingLayer.framer.zip.

Our layer will have two states: 'up' and 'down'

Each time we call stateCycle ...