Animaciones Titanium

Appcelerator

Ejemplos de animaciones en titanium:

 


function doClick(e) {
    //alert($.label.text);
    var win = $.index;//Ti.UI.currentWindow;

	var a0 = Ti.UI.createAnimation();
	a0.top = 300;
	a0.duration = 1000;
	
	var b = Ti.UI.createAnimation();
	b.top = 250;
	b.duration = 400;
	b.backgroundColor = 'green';
	
	var c = Ti.UI.createAnimation();
	c.top = 290;
	c.duration = 200;
	c.backgroundColor = 'orange';
	
	var circle = Titanium.UI.createView({
	    height:100,
	    width:100,
	    borderRadius:50,
	    backgroundColor:'#336699',
	    top:0,
	    left:0
	});
	
	win.add(circle);
	
	//setInterval(function(e)
	//{
	//    circle.animate(a);
	//},2000);
	
	circle.animate(a0);
	
	a0.addEventListener('complete',function(e){
	    circle.animate(b);    
	});
	
	b.addEventListener('complete',function(e){
	    circle.animate(c);    
	});
	
	///otro ejemplo
	var box = Ti.UI.createView({
	  backgroundColor : 'red',
	  height : '100',
	  width : '100'
	});
	win.add(box);
	
	box.addEventListener('click', function() {
	  var matrix = Ti.UI.create2DMatrix();
	  matrix = matrix.rotate(180);
	  matrix = matrix.scale(2, 2);
	  var a = Ti.UI.createAnimation({
	    transform : matrix,
	    duration : 2000,
	    autoreverse : true,
	    repeat : 3
	  });
	  box.animate(a);
	});
	
	//Otro efecto
	var animationType = [
	  { name: 'Top Left', anchorPoint: {x:0, y:0} },
	  { name: 'Top Right', anchorPoint: {x:1, y:0} },
	  { name: 'Bottom Left', anchorPoint: {x:0, y:1} },
	  { name: 'Bottom Right', anchorPoint: {x:1, y:1} },
	  { name: 'Center', anchorPoint: {x:0.5, y:0.5} }
	];
	var animationTypeLength = animationType.length;
	var animationCount = 0;
	var animationTypePointer = 0;
	
	var t = Ti.UI.create2DMatrix();
	t = t.rotate(90);
	
	// animation properties
	var a = {
	  transform: t,
	  duration: 2000,
	  autoreverse: true
	};
	
	Ti.UI.backgroundColor = 'white';
	//var win = Ti.UI.createWindow();
	
	var view = Ti.UI.createView({
	  backgroundColor:'#336699',
	  width:100, height:100, top: 99,
	});
	win.add(view);
	
	var button = Ti.UI.createButton({
	  title:'Animate ' + animationType[animationTypePointer].name,
	  height: (Ti.UI.Android) ? 80 : 40,
	  width: (Ti.UI.Android) ? 300 : 200,
	  top:30
	});
	win.add(button);
	
	function updateButton(name){
	  button.title = 'Animate ' + name;
	}
	
	button.addEventListener('click', function(){
	  // set new anchorPoint on animation for Android
	  a.anchorPoint = animationType[animationTypePointer].anchorPoint;
	
	  // set new anchorPoint on view for iOS
	  view.anchorPoint = animationType[animationTypePointer].anchorPoint;
	
	  animationCount++;
	
	  // determine position of next object in animationType array or return to first item
	  // using modulus operator
	  animationTypePointer = animationCount % animationTypeLength;
	
	  // animate view, followed by callback to set next button title
	  view.animate(a, function(){
	    updateButton(animationType[animationTypePointer].name);
	  });
	});
}

$.index.open();


fuente

video

También te podría gustar...

Deja un comentario