Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13134

Android: Animation - Parent window becomes transparent when animated object moves off screen.

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Low
    • Resolution: Cannot Reproduce
    • Affects Version/s: Release 2.1.2, Release 3.0.2, Release 3.1.0
    • Fix Version/s: 2013 Sprint 11
    • Component/s: Android
    • Environment:

      Ti SDK 2.1.2 GA, 3.0.2 GA
      Android 2.2

      Description

      this code is from Lab340 of the TCMD course lab

      var an = {}; // namespace an=animation
       
      (function() {
      	an.ui = {};
      	
      	an.ui.createApplicationWindow = function(){
      		// we've laid out most of the UI for you; here's the window
      		var win = Ti.UI.createWindow({
      			backgroundColor:'#fff'
      		});
      		// and a heading
      		win.add(Ti.UI.createLabel({
      			text:'Click the boxes for fun!',
      			color:'#000',
      			font:{
      				fontSize:20,
      				fontWeight:'bold'
      			},
      			height:'auto',
      			width:'auto',
      			top:10
      		}));
      		var box = function(color, whatsItDo) {
      			// helper function for making colored boxes
      			var bx = Ti.UI.createView({
      				height:50,
      				width:100,
      				backgroundColor:color
      			});
      			// box contains a centered label
      			bx.add(Ti.UI.createLabel({
      				height:'auto',
      				width:'auto',
      				text: whatsItDo,
      				color:'#fff',
      				font:{
      					fontWeight:'bold'
      				}
      			}));
      			return bx;
      		};
      		
      		// now we'll add four colored boxes and set a helper variable you'll need later
      		var box1 = box('red', 'fade out/in'),
      			box2 = box('green', 'fly out/in'),
      			box3 = box('yellow', 'transition'),
      			box4 = box('blue', 'transition'),
      			selectedIndex = 0;
      		box1.top = 50;
      		box2.top = 120;
      		box3.children[0].color="#000";
      		win.add(box1);
      		win.add(box2);
      		
      		// this container holds the two boxes you'll transition between
      		var container = Ti.UI.createView({
      			width:'auto',
      			height: 70,
      			top: 180
      		});
      		container.add(box3);
      		container.add(box4);
      		win.add(container);
      		
      		// **************************************************
      		// Here's where you come in:
      		//
      		// add an event listener to box1 so that when clicked, it fades out of view in 2 seconds, then fades back into view
      		box1.addEventListener('click', function(){
      			box1.animate({
      				opacity:0,
      				duration:2000
      			}, function(){
      				box1.animate({
      					opacity:1,
      					duration:2000
      				});
      			});
      		});
       
      		// add an event listener to box2 so that when clicked, it slides off the bottom edge of the screen in 2 seconds, then returns
      		box2.addEventListener('click', function(){
      			box2.animate({
      				top:800,
      				duration:2000
      			}, function(){
      				box2.animate({
      					top:120,
      					duration:2000
      				});
      			});
      		});
      		
      		// add an event listener to container that tracks odd/even numbered clicks. 
      		// with odd-numbered clicks, box4 transitions into view using the flip-from-right style
      		// for even-numbered clicks, box3 transitions into view using the flip-from-left style
      		// this effect will work on only iOS
      			// **************************************************
      		// all done, return the window
      		return win;
      	};
      })();
      an.mainWin = an.ui.createApplicationWindow();
      an.mainWin.open();
      

      when running inside the emulator and on a device, box2 animates correctly but as soon as it moves off the screen, the parent window disappears and makes way to the default appcelerator 'splash' screen that is usually bundled with these Labs.

        Attachments

          Activity

            People

            • Assignee:
              shameerj Shameer Jan
              Reporter:
              francoisb Francois Brosseau
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-15950
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration