Demonstration of the various easing types in GameClosure

Application.js

import device;
import animate;
import ui.View as View;
import ui.TextView as TextView;

// A list of all easing types
var easings = [
	'linear',
	'easeInQuad',
	'easeIn',
	'easeOutQuad',
	'easeOut',
	'easeInOutQuad',
	'easeInCubic',
	'easeOutCubic',
	'easeInOutCubic',
	'easeInOut',
	'easeInQuart',
	'easeOutQuart',
	'easeInOutQuart',
	'easeInQuint',
	'easeOutQuint',
	'easeInOutQuint',
	'easeInSine',
	'easeOutSine',
	'easeInOutSine',
	'easeInExpo',
	'easeOutExpo',
	'easeInOutExpo',
	'easeInCirc',
	'easeOutCirc',
	'easeInOutCirc',
	'easeInElastic',
	'easeOutElastic',
	'easeInOutElastic',
	'easeInBack',
	'easeOutBack',
	'easeInOutBack',
	'easeOutBounce',
	'easeInBounce',
	'easeInOutBounce'
];

exports = Class(GC.Application, function () {

	this.initUI = function () {

		// Create a view to animate
		var view = new View({
			superview:       this.view,
			width:           100,
			height:          100,
			offsetX:         -50,
			x:               (device.width / 2),
			y:               70,
			backgroundColor: '#ABCDEF'
		});

		// And a textview to show which easing we're using
		var textview = new TextView({
			superview:       this.view,
			width:           device.width,
			height:          50,
			color:           '#FFFFFF',
			backgroundColor: '#222222',
			text:            '  click to animate  '
		});

		// Use these to track which easing we're using and the animation object
		var easingLength = easings.length;
		var easingIndex  = 0;
		var ani;

		// When we click the view...
		this.on("InputSelect", function (){
			// Not if we're already animating!
			if(ani && ani.hasFrames()){
				return;
			}
			// Reference the new easing type
			var easing = easings[easingIndex];
			textview.setText(easing);
			// And animate
			ani = animate(view)
				.now({ y: ( device.height - 120 ) }, 1000, animate[easing])
				.wait(300)
				.then(function(){
					view.style.y = 70;
					textview.setText('  click to animate  ');
				});
			// Now cycle our index, modulus means it resets back to the start
			easingIndex = (easingIndex + 1) % easingLength;
		});
	};
	
	this.launchUI = function () {};
});