Three20 TTLauncher Animations / Transitions

Question

I'm currently using the Three20 TTLauncher as a base for my app.

However when tapping on a TTLaunchItem, it jumps to the mapped URL.

Is there any way that I can use the same "expanding" animation/Transition that the facebook app uses?

Answer 1

I assume you are opening your URL in your TTLauncherView like this:

- (void)launcherView:(TTLauncherView*)launcher didSelectItem:(TTLauncherItem*)item 
{
    [[TTNavigator navigator] openURLAction:[[TTURLAction actionWithURLPath:item.URL] applyAnimated:YES]];
}

To open a url with a animation you have to animate the view in and then open the URL like the following.

First you need a new variable to hold your URL. Go to your LauncherView.h file and define a new NSString *_urlToOpen;

Back in your .m file we need 2 more methods. One for the animation part (just animating the view in) and another one, which gets called, when the animation has finished.

I post the code for the animation first and explain it later on.

-(void)animateTransition:(NSNumber *)duration {
    self.view.userInteractionEnabled=NO;
    viewController = [[[TTNavigator navigator] viewControllerForURL:_urlToOpen] retain];
    [[self view] addSubview:viewController.view];
    viewController.view.frame=[[UIScreen mainScreen] bounds];
    viewController.view.transform=CGAffineTransformMakeScale(0.01, 0.01);
    viewController.view.hidden=false;

    [UIView beginAnimations:@"animationExpand" context:NULL];
    [UIView setAnimationDuration:[duration floatValue]];
    viewController.view.transform=CGAffineTransformMakeScale(1, 1);

    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
    [UIView commitAnimations];
}

First we set userInteractionEnabled to NO so the user is not able to tap any buttons while the animation runs. Then we get the viewController we want to open animated from the TTNavigator and add this to the actual view (the Launcher View). Define the frame of our new view to the screen bounds and scale it down to a very small size in the middle of the screen. Now we set up the animation to scale the view up to its original size (the screen bounds) and start the animation with a DidStopSelector.

The DidStopSelector looks like this:

-(void)animationDidStop:(NSString *)animationID finished:(BOOL)finished context:(void *)context{
    self.view.userInteractionEnabled=YES;
    viewController.view.hidden=true;
    [viewController.view removeFromSuperview];
    [viewController release];
    [[TTNavigator navigator] openURLAction:[[TTURLAction actionWithURLPath:_urlToOpen] applyAnimated:NO]];
}

The first line is self-explanatory. Then we only remove the view from the superview and open our URL but without any transition animation.

Finally edit your - (void)launcherView:(TTLauncherView*)launcher didSelectItem:(TTLauncherItem*)item method to save the URL in your new variable and the call the animateTransition method.

- (void)launcherView:(TTLauncherView*)launcher didSelectItem:(TTLauncherItem*)item 
{
    _urlToOpen = [NSString stringWithString:item.URL];
    [self performSelector:@selector(animateTransition:) withObject:[NSNumber numberWithFloat: 0.60f]];  
}

The same works in the other direction, but you have to care about what happens if your user taps the back button on your navigation bar. Normal behavior is to animate back with the standard slide animation.

This answer is based on a forum thread over at the Three20 Google Groups. Find it here.

Answer 2

I had to write something similar in one of my projects.

See https://github.com/aporat/TTLauncherView_ExpandViewTransitions

This sample project also includes the shrinking effect when going back to the launcher view & the Facebook launcher back button