Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 27    Views: 226

Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
04/15/13 10:03 AM (12 years ago)

Animate tab bar transitions

I've bumped this post up just in case the original was missed. The idea is to add transitions to the tab bar. In the appDelegate file around the line 900 mark look for //tab-bar controller delegate methods (we don't use these if we don't have a tabbed app) this controls the tab bar button clicks (usually used for sound effects) dierectly under this //didSelectViewController... -(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{ [BT_debugger showIt:self theMessage:[NSString stringWithFormat:@"tabBarController selected: %i", [tabBarController selectedIndex]]]; add // Create transitions for each tab CATransition *transition0 = [CATransition animation]; transition0.type = @"cube"; transition0.subtype = @"fromLeft"; transition0.duration = 1.5; CATransition *transition1 = [CATransition animation]; transition1.type = @"cube"; transition1.subtype = @"fromRight"; transition1.duration = 1.5; CATransition *transition2 = [CATransition animation]; transition2.type = @"cube"; transition2.subtype = @"fromTop"; transition2.duration = 1.5; CATransition *transition3 = [CATransition animation]; transition3.type = @"cube"; transition3.subtype = @"fromLeft"; transition3.duration = 1.5; CATransition *transition4 = [CATransition animation]; transition4.type = @"cube"; transition4.subtype = @"fromRight"; transition4.duration = 1.5; This sets up the transitions in the next post I will show you how to alter the transitions. I have set up 5 different transitions because if I post for a transition for all someone will ask "How do you get a seperate one for each tab blah blah blah" Around line 980 now diectly under //remember the screen we are loading in the rootApp add these lines if ([tabBarController selectedIndex] == 0 ) { [[[tabBarController view]layer]addAnimation:transition0 forKey:nil]; } else if ([tabBarController selectedIndex] == 1){ [[[tabBarController view]layer]addAnimation:transition1 forKey:nil]; } else if ([tabBarController selectedIndex] == 2){ [[[tabBarController view]layer]addAnimation:transition2 forKey:nil]; } else if ([tabBarController selectedIndex] == 3){ [[[tabBarController view]layer]addAnimation:transition3 forKey:nil]; } else if ([tabBarController selectedIndex] == 4){ [[[tabBarController view]layer]addAnimation:transition4 forKey:nil]; } This code checks which button has been pressed and loads the transition type You should now have a cool cube effect added to your app
 
aquila198
buzztouch Evangelist
Profile
Posts: 473
Reg: Jul 22, 2011
location unknow...
10,330
like
04/15/13 10:07 AM (12 years ago)
Thanks for sharing! Any chance you might have one of your quick awesome videos showcasing/showing this?
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:10 AM (12 years ago)
Each transition is controlled by these 4 lines CATransition *transition0 = [CATransition animation]; //This sets the transition no need to change transition0.type = @"cube"; //This is the transition type I will list these next make sure its typed as a string i.e. @"blahblah" transition0.subtype = @"fromLeft"; //this is to further amend transition transition0.duration = 1.5; // The transition time in seconds Some transitions: dont forget to put them in a string @"cameraIris" cameraIris cube fade moveIn oglFlip pageCurl pageUnCurl push reveal rippleEffect suckEffect genieEffect rotate subTypes fromLeft fromRight fromTop fromBottom for rotate the sub types are 90cw 90ccw 180cw 180ccw There are some warnings on the net that apple may block your app for using these provate apis havent found any that have been booted off. If they do disappear it defaults to the fade. Have fun
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:12 AM (12 years ago)
Here's a vid of some of the transitions in action http://youtu.be/zpiqrlgNh3g Please don't ask me to do video tutorial the revmob one still grates me lol
 
aquila198
buzztouch Evangelist
Profile
Posts: 473
Reg: Jul 22, 2011
location unknow...
10,330
like
04/15/13 10:17 AM (12 years ago)
lol!! Thanks Kitts!! That's super slick!
 
Antonios
Apple Fan
Profile
Posts: 381
Reg: Feb 12, 2013
Korinthos, Gree...
4,610
like
04/15/13 10:23 AM (12 years ago)
what a great share from you Kittsy....thank you so so so much for this...It's amazing
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
04/15/13 10:27 AM (12 years ago)
very cool kittsy, checked it out on youtube, looks great. Btw, what was wrong with your Revmob video? I thought it was very good.
 
Antonios
Apple Fan
Profile
Posts: 381
Reg: Feb 12, 2013
Korinthos, Gree...
4,610
like
04/15/13 10:32 AM (12 years ago)
One question, are there other transitions except these you mentioned?
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:33 AM (12 years ago)
that's it there were more but they have been depreciated, you can make your own there are a few tutorials out there. Is that not enough anyway greedy arse
 
Antonios
Apple Fan
Profile
Posts: 381
Reg: Feb 12, 2013
Korinthos, Gree...
4,610
like
04/15/13 10:37 AM (12 years ago)
hehehehe...no they are more than enough...I was just wondering. Forgive my greed, your Majesty :D (just kidding)
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:40 AM (12 years ago)
@alanmac my voice is annoying scouse on youtube aint good
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
04/15/13 10:44 AM (12 years ago)
Nothing wrong with scouse (and I'm a Londoner lol), just a bit rare on the other side of the pond.
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:46 AM (12 years ago)
Come on I said easy peasy pudding and pie. I've never said that in my life yet I say it in a tutorial. Cringe facepalm and it got a comment on youtube
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
04/15/13 10:56 AM (12 years ago)
Yeah, you did. I also remember thinking my sound card was faulty until I realised your keyboard was making all the clicks. But it still showed me how to do revmob and for that, I say thanks.
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 10:59 AM (12 years ago)
yeah the bloody touchpad makes a deafening click
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
04/15/13 11:47 AM (12 years ago)
Thats pretty cool! Thanks for adding that snippet. I got a little bit dizzy watching the video tho.
 
LevensGardener
Aspiring developer
Profile
Posts: 220
Reg: Sep 30, 2012
Kendal
10,450
like
04/15/13 12:21 PM (12 years ago)
Amazing Kittsy! You must be a mindreader! I was all over the interwebs yesterday looking for this... I am working on a water safety app for a national charity and those rippleEffects looked like just the transitions I needed. Your code tweaks above will drop these effects nicely in the tab bar, but I wonder if you have any top tips for adding these effects elsewhere.... The finest of fine menus is of course the Buzz Carousel. Where and what might I add to 'make a splash' with the rippleEffect there? Thanks as always... Chris
 
feraco
Aspiring developer
Profile
Posts: 705
Reg: Jan 23, 2012
nyc
15,050
like
04/15/13 12:22 PM (12 years ago)
I cant wait to get this working!
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
04/15/13 12:28 PM (12 years ago)
Yeah Chris I'll take a look when I get the chance. I was nearly at your place on Sunday driving back from Scotland but the rain was hideous so gave it a miss. Thought you could have bunked me in
 
LevensGardener
Aspiring developer
Profile
Posts: 220
Reg: Sep 30, 2012
Kendal
10,450
like
04/15/13 12:30 PM (12 years ago)
You will be guest of honour Kittsy!
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
04/15/13 01:30 PM (12 years ago)
Kittsy a cool beverage and a warm beach awaits you in Guam! Cheers! -- Smug
 
feraco
Aspiring developer
Profile
Posts: 705
Reg: Jan 23, 2012
nyc
15,050
like
04/15/13 01:37 PM (12 years ago)
How can I get these transitions to work for other screens from a menu?
 
Dragon007
Lost but trying
Profile
Posts: 1509
Reg: Dec 17, 2011
London
20,590
like
04/15/13 01:52 PM (12 years ago)
You star! will attempt to add to my project.
 
Joe Sprott
Code is Art
Profile
Posts: 414
Reg: Aug 20, 2011
Melbourne, FL
10,290
like
04/15/13 04:22 PM (12 years ago)
kittsy that is freeking cool Joe
 
DryFrog
Lost but trying
Profile
Posts: 42
Reg: Jun 26, 2012
São Paulo
4,620
like
04/16/13 04:49 AM (12 years ago)
Fab fifth from Liverpool! Thanks Kittsy!
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
04/16/13 06:44 AM (12 years ago)
Thanks man, these are just awesome. The tips to add it are great, love how you organized that. I'm so overusing that camera Iris it's not funny. The perfect touch for a photo editing type app I've been trying to make. I def want to look into using these for menu transitions as well. I have seen people subclass these things out there - but understanding they are standard iOS CA code makes a big difference. More great work from Kittsys' App Chop Shop. Thanks!
 
aquila198
buzztouch Evangelist
Profile
Posts: 473
Reg: Jul 22, 2011
location unknow...
10,330
like
04/17/13 06:45 AM (12 years ago)
Day 2 of tab bar transitions - CAN"T GET ENUF! it's so slick. Thank you Kitts once again! Totally Pimpin out all the tabs. You are absolutely terrific!
 
feraco
Aspiring developer
Profile
Posts: 705
Reg: Jan 23, 2012
nyc
15,050
like
02/12/14 07:35 AM (11 years ago)
Has anyone ever done this with bt 3.0? I added the code. Nothing happened.
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.