Animation loop

createAnimWin.js

(function() {

	createAnimWin = function() {

		var win = Ti.UI.createWindow({
			backgroundColor : 'white',
			navBarHidden : true,
			exitOnClose : true,
			top : '0dp',
			left : '0dp',
			right : '0dp',
			bottom : '0dp'
		});

		var rootView = Ti.UI.createView({
			top : '0dp',
			left : '0dp',
			right : '0dp',
			bottom : '0dp'
		});
		win.add(rootView);

		var wrapper = Ti.UI.createView({
			top : '0dp',
			left : '0dp',
			right : '0dp',
			bottom : '0dp',
			opacity : 0
		});
		rootView.add(wrapper);

		var img_props = [{
			image : '/images/image1.png',
			width : 211,
			height : 151,
			top : 0,
			left : 0,
			opacity : 0
		}, {
			image : '/images/image2.png',
			width : 207,
			height : 157,
			top : 0,
			right : 0,
			opacity : 0
		}, {
			image : '/images/image3.png',
			width : 182,
			height : 146,
			bottom : 0,
			left : 0,
			opacity : 0
		}, {
			image : '/images/image4.png',
			width : 186,
			height : 149,
			bottom : 0,
			right : 0,
			opacity : 0
		}];

		var imgs = [];
		for(var i = 0; i < img_props.length; i++) {
			var imgvw = Ti.UI.createImageView(img_props[i]);
			wrapper.add(imgvw);
			imgs.push(imgvw);
		}

		function animateView(index) {
			if(index == imgs.length) {
				wrapper.animate({
					opacity : 1,
					duration : 200
				}, function() {
					startLoop();
				});
			} else {
				imgs[index].animate({
					opacity : 1,
					duration : 750
				}, function() {
					animateView(index + 1);
				});
			}
		}

		function startLoop() {
			for(var i = 0; i < imgs.length; i++) {
				imgs[i].opacity = 0;
			}
			wrapper.opacity = 1;
			animateView(0);
		}


		win.addEventListener('open', function() {
			startLoop();
		});

		return win;

	};

})();