Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Open Detail Window on Map Annotation rightButton Click using Slide in from Right Animation

How do I use an animation to slide a detail window in from the right when a map annotation rightButton is clicked? Currently my detail window is just opening as normal with no slide animation.

Here's my code:

var mainWindow = Titanium.UI.createWindow({  
  title:'Main'
});

var detailWindow = Titanium.UI.createWindow({  
  backButtonTitle: 'Back'
});

var detailView = Titanium.UI.createTableView({
  style: Titanium.UI.iPhone.TableViewStyle.GROUPED
});

detailWindow.add(detailView);

var mapView = Titanium.Map.createView({
    mapType: Titanium.Map.STANDARD_TYPE,
    region: {latitude: latitude, longitude: longitude, latitudeDelta:0.5, longitudeDelta:0.5},
    animate: true,
    regionFit: true,
    userLocation: true
});

mainWindow.add(mapView);
mainWindow.open();

//code to add annotations here

mapView.addEventListener('click', function(e) {
    if (e.clicksource == 'rightButton') {
      var annotation = e.annotation;

      if (annotation) {
        var title = annotation.title;

        // keep it simple just for testing
        var tableData = [
          {title: title}
        ];
      }

      detailView.data = tableData;

      detailWindow.title = title;

      detailWindow.open({
        animate: true,
        fullscreen: true
      });
    }
});
— asked June 12th 2010 by Slim McKinsley
  • animation
  • annotation
  • clicksource
  • map
  • rightbutton
  • slide
0 Comments

6 Answers

  • You can do that using:

    Ti.UI.currentTab.open(detailWindow,{animated:true});
    

    instead of using the detailWindow.open() call.

    — answered March 3rd 2011 by Ketan Majmudar
    permalink
    0 Comments
  • You can also try to use:

    detailWindow.open({modal:true});
    
    — answered June 22nd 2011 by Rafael Cardoso
    permalink
    0 Comments
  • I am also interested in that one…

    — answered November 11th 2010 by Czar
    permalink
    1 Comment
    • Me 3 - sliding transition would be frosting on the cake…

      — commented February 22nd 2011 by Liz Myers
  • not certain if this is the "perfect solution", but I solved a similar problem by putting the animation on the close of the previous window.

    so something like this for you, pick your animation…

    mainWindow.close({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
    
    detailWindow.open({
        animate: true,
        fullscreen: true
    });
    
    — answered November 11th 2010 by Aaron Saunders
    permalink
    0 Comments
  • var m = Ti.UI.create2DMatrix();
    m.translate({x: 1050, y:0});
    
    var m1 = Ti.UI.create2DMatrix();
    m1.translate({x: 525, y:0});
    
    detailWindow.transform = m;
    var anim = Ti.UI.createAnimation({
        transform: m1,
        duration: 200
    });
    
    detailWindow.open(anim);
    
    — answered March 5th 2011 by Michael Peng
    permalink
    0 Comments
  • this works fine for me:

    detailWindow.open({
        animate: true,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
    });
    
    — answered July 1st 2011 by Paul Lunow
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.