I'm studying Three20 now and want to implement facebook iphone client myself as a practice.
In the main screen of facebook iphone client, there are several items below search bar.I think it is a combination of scroll view and pagecontrol. when you click a long time on certain item, it will look like what you do the same on the app icon of your iphone:you can drag the item to the new position and even delete your added items.
So my questions are:
What kind of control of the items is,custom TTButton? and how can implement the animation,especially the dragging?
when you click one item, one new view comes in.how to implement the animation like shade?
thanks!
The Three20 class that implements the main screen you are talking about is TTLauncherView.
It includes TTLauncherButtons as its internal elements, that derives directly from UIControl (as UIButton also does). If you want to implement yourself (not simply use) the dragging animation, you should study the source code available in src/Three20UI/Sources/TTLauncherView.m, which is quite complex to explain here since many method are involved. I would suggest starting with buttonTouchedDown:withEvent and startDraggingButton: and follow the flow from there. If you interested in the editing mode animation, check the wobble selector.
As to the animation when you select a button, this is nothing specific to Three20. You can study how they do this in src/Three20UINavigator/Sources/TTBaseNavigationController.m, searching for pushViewController:animatedWithTransition;
This is the code, for your reference:
- (void)pushViewController: (UIViewController*)controller
animatedWithTransition: (UIViewAnimationTransition)transition {
[self pushViewController:controller animated:NO];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:TT_FLIP_TRANSITION_DURATION];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(pushAnimationDidStop)];
[UIView setAnimationTransition:transition forView:self.view cache:YES];
[UIView commitAnimations];
}
the final block is the one responsible for the animation effect.
Related
I'm trying to mimic the UITextField-keyboard relation in Whatsapp app.
As most of you know, there is a fixed UITextField at the bottom of the screen and keyboard comes up as you tap the UITextField. While keyboard is coming up, UITextField stick to the keyboard and they slide together very smoothly.
Read Apple's documentation pages which is about moving views under the keyboard several times.
What I have tried so far:
Listened to keyboard notifications. I used both setFrame: and setContentOffset:animated: method within animation block. Didn't work as good as expected. The UIViewAnimationCurve value that keyboard animation has is 7, I couldn't find what it means as UIViewAnimationCurve has only 4 integer enum type. I think animation curve of keyboard animation is not provided to developers, I hope I'm wrong.
Using custom inputAccessoryView with lower z-index value. I had two exact UIViews, one is fixed at the bottom and the other is custom inputAccessoryView that was going to hide beneath the fixed one since it has lower zPosition value. Therefore, user wasn't going to see the inputAccessoryView was coming up from outside of the screen but fixed view was being pushed up by keyboard. But no use, again. Changing zPosition value does not change anything.
At last, I thought Whatsapp might not be using system keyboard but a custom one. But if this is the case, it is a very very bad choice of design so that option is eliminated.
Anyone has an idea of how Whatsapp (or Hangouts) implemented that?
The most straightforward way of doing that turned out to be the correct way.
I should have listened to keyboardWillShow/keyboardWillHide notifications and animateWithDuration: as they are triggered. The point I missed was casting UIViewAnimationCurve into UIViewAnimationOptionCurve by shifting (<<16).
NSDictionary *notification = [aNotification userInfo];
UIViewAnimationOptions curveValue = [[info objectForKey:UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue] << 16;
...
[UIView animateWithDuration:{animation duration}
delay:0
options:curveValue
animations:^{
//animation code
}
completion:nil];
The value '7' is not a power of 2, so it's not a specific animation value, rather it could be the sum (or the bitwise or) of more than one animation values.
The solution (working for me) is:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:[info[UIKeyboardAnimationDurationUserInfoKey] floatValue]];
[UIView setAnimationCurve:[userInfo[UIKeyboardAnimationCurveUserInfoKey] intValue]];
// set view frame here
[UIView commitAnimations];
Good luck :)
Anybody have any idea how this is done?
http://youtu.be/r_cII4_aq_A
In general, the idea is awesome, but I would like to know how to do each specific thing. In the video, the pages are being swiped too fast so you can't see, but as you transition from one page to the next, each pixel smoothly transitions to it's new color. Also, it's really cool how the icon gets smaller to a minimum size as you transition away from a screen.
Maybe there's some 3rd party library that provides a protocol and it's relatively easy to implement, but I can't find it. If there's not, I'm thinking it's just one view controller with many views side by side and as you drag your finger, it calculates where each view needs to be..and what color every pixel needs to be.
I imagine you already have it by now. But in case you still have any doubts, I made gist that does the animation: https://gist.github.com/mnmaraes/9536364
Anyways, have fun.
It's a fade animation, so:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
_backgroundImageView.image = nextImage;
} completion:nil];
should do the trick for the background part.
For the foreground/icon part you can animate the transform to scale and translate the views as they slide in and out.
Part of my UIView is covering the iPad's keyboard.
The view you're seeing is simply a UIView I've added as a subview to my main view. When the keyboard is shown, I do shift the view up.
Has anyone ever seen this before?
EDIT
When the keyboard is shown, I move the view up:
[UIView animateWithDuration:SHOW_KEYBOARD_ANIMATION_DURATION animations:^{
CGRect frame = self.currentViewController.view.frame;
frame.origin.y -= SHOW_KEYBOARD_OFFSET;
self.currentViewController.view.frame = frame;
}];
EDIT
I use the follow code to add the view:
[UIView transitionFromView:fromView toView:toView duration:0.3f options:UIViewAnimationOptionTransitionCrossDissolve completion:nil];
Are you calling the code to move the view out of the way before or after the keyboard is displayed? In other words, are you registering for UIKeyboardWillShowNotification or UIKeyboardDidShowNotification?
I'm not sure where you are getting the keyboard size? Take a look at Apple's sample code again, see http://developer.apple.com/library/ios/#documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html, scroll down to the section on moving content that is located under the keyboard.
Where are you getting SHOW_KEYBOARD_OFFSET from? I bet that's the problem.
You should be catching the notifications, just as Kate said, and using the userInfo from them to work out what to do about moving your view around. Any hard coded values will break the second Apple change the keyboard size on you. In short, don't assume what the frameworks can so easily tell you.
I have a question regarding Xcode.
I found a tutorial on the net that allowed me to move an image around the screen.
Could you please explain how I can make my button move to the left and back to right with one click (I can't find this anywhere...), and immediately after that run another IBAction that allows me to switch to another subview? (I already have this code naturally...). I tried to add both IBActions in 1 centralized one, but it didn't seem to work :-( It opens in this case immediately the subview without showing me the animation.
What I tried:
The code obtained until now:
-(IBAction) aMove: (id) sender{
if (bMove == NO) {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
btnTarget.transform = CGAffineTransformMakeTranslation(-30,0);
[UIView commitAnimations];
bMove = YES;
}else{
btnTarget.transform = CGAffineTransformIdentity;
bMove = NO;
}
}
-(IBAction) aAnimateActivate: (id) sender {
[self aMove:nil];
[self targetOpenView:nil]; //Opens the subview
}
I appreciate your help! Thanks!
concatenate works to combine animations and I just put two blocks of animations (two of the one shown below) after each other... :
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:.3];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
CGAffineTransform transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1, 1),CGAffineTransformMakeTranslation(10, -50));
btnGuide.transform = transform;
[btnGuide setAlpha:0.0];
[UIView commitAnimations];
Basically implementing this code did the trick... Easy!
However... I needed some additional pieces of code for the further implementation such as:
[self performSelector:#selector(aGuide) withObject:self afterDelay:0.0];
(don't mind the selector name)
and:
[NSTimer scheduledTimerWithTimeInterval:.5 target:self selector:#selector(targetOpenView:) userInfo:nil repeats:NO];
Without looking at all of your program flow nor doing any actual testing (and I find when using Core Animation that the only way to be sure it works right is to code it and see if it does) the problem with the subview opening right away occurs because right after you invoke your "aMove" method to set up the first animation the thread continues with the next line of code, i.e., the [self] targetOpenView:nil statement, which immediately opens the subview and thus doesn't allow the first animation sequence to be shown. There is no pause to wait for the first animation to be completed. The animation, once commited, runs on its own thread while your code continues to run on the current thread (probably the application's main thread). That might not seem to be the most sensible way but you have to think of the code you write as the process to set up an animation that, once committed, is a separate entity that is free to run on its own (beside your code). The advantage to Apple's implementation is that you can set up a whole bunch of different animations which occur at the same time. One of Core Animation's design goals is to take away the need for the programmer to be handling all the starting and stopping of various animations and instead let the animation coordination be done using various methods of delay and duration or providing the means for one animations events to be observed (and acted upon) by other animations.
In order to do the animation(s) the way you want you will need use a method which only allows the second animation to begin once the first is over. One way (assuming that the subview change would be set up as an animation itself) is to use a completion: handler, an animation block that only begins upon completion of the first animation. Another way is to let the two animations "start together" but include a delay: parameter in the second animation that is equal to the length of the first animation. If the subview change is not done with an animation but is just done with code in the main thread then you need to set up a an animation delegate that is called when certain events occur in your animation, one of which is it's completion. Parameter(s) are passed to your delegate to tell you what is occurring and to which animation.
All of this is discussed, with examples, in the Animations section of the View Programming Guide to iOS (about 10 pages that will probably show you almost exactly how to do what you want):
http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html#//apple_ref/doc/uid/TP40009503-CH6
Also, in order to set up the first animation to move the button somewhere and back again you might want to read the subtopic in that same section of the guide mentioned above: Implementing Animations That Reverse Themselves. I think it would be the cleanest way to do what you want.
(FYI, I'm better with the MacOS side of Core Animation than the iOS side but the "why did this happen immediately?" problem you have is a common pitfall when getting up to speed with how it works. Hope this explanation helps.)
I've scoured blogs and Apple documentation and can't find an answer. Hope someone can lend their expertise.
I have a simple UIView animation that acts upon a container view 'gameContainer'. If I create this container view in a method called previously, all is well and good.
However, when I create 'gameContainer' immediately prior to the animation calls (code below) then the subView 'viewGrid' just appears without any animation effect.
-(IBAction) onInfoUp: (id) sender {
//Add a container UIView for animation
[self.view addSubview:gameContainer]; // Moving this line to 'viewDidLoad' cures problem
//Call animation methods
[UIView beginAnimations:#"newGrid" context:nil];
[UIView setAnimationDuration:1.3];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
forView:gameContainer cache:YES];
[gameContainer addSubview:viewGrid];
[UIView commitAnimations];
}
I'm stumped as to why I must define the subview container in a separate method! Thanks in advance.
I believe this is due how UIKit updates the visual contents on the screen. All actual modifications to the screen happens at the end of the current run loop if it's running on the main thread, or at the end of the next run loop on the main thread otherwise. If you add gameContainer as shown in the code, it's not on the representation layer for the screen.