Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

UI States Manager for Appcelerator Titanium

UIStatesManager is a component that enables you define states for your user interface components. It changes the properties from one state to another with smooth ease animation. All you need is to define state specific styles and UIStatesManager will do the trasition automatically.

enter image description here

Quick Start

Get it

Add lib/ti.states.js to your lib folder inside your project.

Use it

First you have to add state specific styles to your tss like this:

"#view": {
	backgroundColor: "red",
	// default
	top: '80%',
	right: '10%',
	width: '20%',
	height: '13%'

"#view:state1": {
	top: '80%',
	right: '10%',
	width: '20%',
	height: '13%'

"#view:state2": {
	top: '25%',
	right: '25%',
	width: '50%',
	height: '50%'

Then require and initalize ti.states in your controller

var Manager = require('ti.states');
var stateManager = new Manager($)

Then you can easily change your UI to any of your states

* state: the new state
* duration: animation duration time in milliseconds
* callback: to be called after animation complete
stateManager.changeToState('state2', 500, function(){
	// animations is done

Code and documentation copyright 2015 Codly, Inc. Code released under the MIT license.