I'm trying to implement an animation that happens when a user taps one of my tableview cells. Basically, the animation is just a little label with text like "+5" or "+1" that appears, then moves upwards whilst fading (basically like points appear in video games as the user scores them).
In the tableView:didSelectRowAtIndexPath: implementation of my controller, I'm doing the following (paraphrased for simplicity here):
CGRect toastFrame = /* figure out the frame from the cell frame here */;
UILabel *toast = [[UILabel alloc] initWithFrame:toastFrame];
toast.text = [NSString stringWithFormat:#"+%d", 5];
toast.backgroundColor = [UIColor clearColor];
toast.userInteractionEnabled = NO; // hoped this would work but it doesn't
[tableView addSubview:toast];
[UIView
animateWithDuration:1.0
animations:^
{
toast.alpha = 0.0;
toast.transform = CGAffineTransformMakeTranslation( 0.0, -44.0 );
}
completion:^ (BOOL finished)
{
[toast removeFromSuperview];
}];
[toast release];
The toast is appearing nicely and looks great. The problem is that until the animation completes, the tableview stops receiving touch events. This means that for one second after tapping a cell in the tableview, you can't tap any other cells in the tableview.
Is there a way to stop this from happening and allow the user to keep interacting with the tableview as if the animations weren't happening at all?
Thanks in advance for any help with this.
Another option may be to use animateWithDuration:delay:options:animations:completion: (untested, from the top of my head)
Take a look at the options parameter and the possible flags, defined by UIViewAnimationOptions. Included there is a flag called UIViewAnimationOptionAllowUserInteraction. This could be a solution, maybe you should try it out!
Have you tried doing it the other way? For example, after adding toast as a subview, you can do something like this:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration: 1.0];
toast.alpha = 0.0;
toast.frame.origin.y -= 44.0;
[toast performSelector:#selector(removeFromSuperview) withObject: nil afterDelay: 1.0];
[UIView commitAnimations];
and then release toast. You can try it this way and see if it works.
Related
My application has VOIP calling. In that I want to implement animation like iPhone's default Phone application does when User Clicks on Call button on dial Pad and animation that is done on End call button.
I have researched alot about this but haven't find anything yet. Any help will be appreciated on this topic.
Right now I have implemented scaling animation like below:
- (void)animateFadingOut{
self.view.transform = CGAffineTransformMakeScale(1.00, 1.00);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationDelegate:self];
[self performSelector:#selector(push) withObject:nil afterDelay:0.35];
self.view.transform = CGAffineTransformMakeScale(0.00, 0.00);
//set transformation
[UIView commitAnimations];
}
- (void)push
{
self.view.transform = CGAffineTransformMakeScale(1.00, 1.00);
// push navigation controloller
CallViewController *objCallViewController = [[CallViewController alloc] initWithNibName:#"CallViewController_iPhone" bundle:nil];
[self setHidesBottomBarWhenPushed:YES];
[self.navigationController pushViewController:objCallViewController animated:NO];
[objCallViewController release];
[self setHidesBottomBarWhenPushed:NO];
[[AppDelegate shared] setTabHidden:TRUE];
}
But It is not giving me exact animation that default Phone application has
Here is what I might try if I was trying to create animations.
CGRect movementFrame = self.view.frame;
//Make position and size changes as needed to frame
movementFrame.origin.x = 0;
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
/*
Animation you want to commit go here
Apply movementFrame info to the frame
of the item we want to animate
*/
//If you wanted a fade
self.view.alpha = !self.view.alpha //Simply says I want the reverse.
self.view.frame = movementFrame;
//Example of what you could do.
self.view.transform =CGAffineTransformMakeScale(1.00, 1.00);
} completion:^(BOOL finished) {
//Things that could happen once the animation is finished
[self push];
}];
This has not been tested for your case. Therefore I am also not sure if it will help you, but hopefully it will. Good luck to you.
*Edit*
So I reviewed the animation on an iPhone and it appears to me to be a series of animations happening at once.
You have what I presume to be the UIActionSheet animating down.
The top section overlay sliding up its y-axis.
Then you have, which I haven't mastered yet, a split in the back view that animates its x-axis in opposite directions which cause the split.
Finally you have the new view scale up to take frame for the effect.
I can't say 100% this how they have done it, however if I was going to attempt to recreate this, I would likely start here.
Hello there so after just quickly coming up with an animation I got pretty close it could use some tweaks.
It took me three views to do a
topView, bottomView, and backView.
Also took into account the view that you would be loading in. viewToLoadIn
`-(void)animation{
CGRect topMovementFrame = self.topView.frame; //Set dummy frame to modify
CGRect bottomViewFrame = self.bottomview.frame;
topMovementFrame.origin.y = 0 - self.topView.frame.size.height; //modify frame's yAxis so that the frame sits above the screen.
bottomViewFrame.origin.y = self.view.frame.size.height; //modify frame's yAxis to the it will sit at the bottom of the screen.
[self.viewToLoadIn setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
//Animation
self.topView.frame = topMovementFrame; //Commit animations
self.bottomview.frame = bottomViewFrame;
self.backView.alpha = !self.backView.alpha;
self.backView.transform = CGAffineTransformMakeScale(100, 100);
self.viewToLoadIn.transform = CGAffineTransformMakeScale(2.0, 3.0);
*MAGIC*
} completion:^(BOOL finished) {
//Completion
//Clean up your views that you are done with here.
}];
}`
So then When they pressed the button I had setup this animation would happen.
Also at first I thought that the setup might contain a UIActionStyleSheet. which it still might but this is a pretty handy built in functionality. But the fact that you can interact with the screen lead me to think a custom view. It would be easier in my opinion.
I hope this helps you even if it just a little bit.
Take care ^^
I have a subView that I want to toggle between hidden and not hidden by a button. How do I fade in the subview and fade it out? For now it just appears immediately and disappear immediately when I toggle the button.
I am wondering what is the easiest way to do this animation.
Thanks
On iOS 4.0+ Apple recommends you use their new, block-based animation methods. Using these, the code would look something like this:
[UIView animateWithDuration:2.0
animations:^{myView.alpha = 0.0;}];
The properties you are animating go inside the block (the ^{...} part). Blocks are sort of like functions, so you can put multiple lines of code inside of them, if you want to animate multiple properties. For example:
[UIView animateWithDuration:0.2
animations:^{
view.alpha = 0.0;
view.backgroundColor = [UIColor redColor];
}];
If you need to perform an action after the animation is complete, use the +animateWithDuration:animations:completion: method (which also uses blocks), for example:
[UIView animateWithDuration:0.2
animations:^{view.alpha = 0.0;}
completion:^(BOOL finished){ [view removeFromSuperview]; }];
For more info, check out the UIView Class Reference 'Animations' section and 'Animating Views with Blocks' section.
This is the old pre-4.0 way:
http://objcolumnist.com/2009/07/18/simple-uiview-based-animations-on-the-iphone/
... which has the advantage of being conceptually simple and easy to implement.
float alpha = 1.0; // or 0.0 if it's already visible and you want to fade out
[UIView beginAnimations:#"" context:NULL];
[UIView setAnimationDuration:2.0]; // seconds, not ms. guess how i know?
[mySubView setAlpha:alpha];
[UIView commitAnimations];
It appears to me these two class methods are not interchangeable. I have a subview of UIView with the following code in the touchesBegan method:
if (!highlightView) {
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Highlight"]];
self.highlightView = tempImageView;
[tempImageView release];
[self addSubview:highlightView];
}
highlightView.alpha = 0.0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
highlightView.alpha = 1.0;
[UIView commitAnimations];
When I touch the Button, the highlight fades in, like you would expect. When I touch up immediately (before the animation is finished), my touchesEnded gets called. This is the behavior I want.
But now, I've become a big fan of blocks and try to use them wherever possible. So I replaced the UIView animation code with this:
[UIView animateWithDuration:0.2 animations:^{
highlightView.alpha = 1.0;
}];
Results: the highlight still fades in as expected, but if I touch up before the animation is finished, my touchesEnded does not get called. If I touch up after the animation is finished, my touchesEnded does get called. What's going on here?
The new animation blocks in iOS 4 by default disable user interaction. You can pass in an option to allow views to respond to touches during animation using bit flags in conjunction with the animateWithDuration:delay:options:animations:completion method of UIView as such:
UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction;
[UIView animateWithDuration:0.2 delay:0.0 options:options animations:^
{
highlightView.alpha = 1.0;
} completion:nil];
Documentation
One more thing is that Appple doesn't recommend to use [UIView beginAnimations:context:], you can find it in beginAnimations docs
Use of this method is discouraged in iOS 4.0 and later. You should use
the block-based animation methods to specify your animations instead.
Probably Apple can mark old methods as deprecated in the future releases and won't support them, so using block-based methods is really more preferable way for performing animation.
I am going to end up with an array of RSS feeds, and would like a label or some such to display them at the bottom of the view. I would like to animate through each feed in the array.
This is what i have so far to animate, which, works for the fade, but only animates the last item of the array.
feed = [[UILabel alloc] initWithFrame:CGRectMake(0,380,320,43)];
[self.view addSubview:feed];
feed.alpha=1;
NSArray *feeds = [NSArray arrayWithObjects:[NSString stringWithFormat:#"1234567"],[NSString stringWithFormat:#"qwerty"],[NSString stringWithFormat:#"asdfgh"],nil];
for (NSString* f in feeds){
feed.text=f;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:2.0f];
feed.alpha=0;
[UIView setAnimationDidStopSelector:#selector(animationDidStop:finished:context:)];
[UIView commitAnimations];
}
Im sure its simple.
Thanks
First off you should really consider a better naming convention. Calling a UILabel a feed isn't very helpful for the future when you have to come back and look at your code. I would name it feedLabel. Then when you iterate through your list of feeds, you can just for (NSString *feed in feeds) and it will make more sense. And so will feedLabel.text = feed;.
Anyhow, the issue I see with your code is that your are repeatedly setting the alpha to zero in your loop, but you never set it back to one. In other words, you're not making a change to the alpha value. It stays the same in every iteration.
So maybe you could clarify what you're trying to do. If you want to fade the text between changes in the text, you'll need a different animation and methodology. Instead of a loop, chain your animations such that when your didStopSelector, you set the text and start the next one. Something like:
- (void)performAnimation;
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:2.0f];
feed.alpha=0;
[UIView setAnimationDidStopSelector:#selector(animationDidStop:finished:)];
[UIView commitAnimations];
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
feed.alpha = 1.0;
NSString *nextFeed = [self getNextFeed]; // Need to implement getNextFeed
if (nextFeed)
{
// Only continue if there is a next feed.
[feed setText:nextFeed];
[self performAnimation];
}
}
i tried your code, it fades out on first feed, but it doesn't enter the animationDidStop event. thats why it cant call performAnimation again. is there any set for animation (delegate or protocol etc..)
I have a UISegmentedControl on one of my pages. I want an editbox to appear when a segment is clicked right below the clicked segment. I would like it to be animated (slide in or something)
Is this possible? What would be the best way to do this?
Damn.I forgot to mention all this action is going to occur within a cell and not a simple view.
You may try UIView animation.
Firstly set your editbox (UITextView I guess ??) to x coordinate 320 (so it will not appear).
Secondly when user hit the segmented control just translate your UITextView using UIView animation :
[UIView beginAnimation:nil context:nil];
[UIView setAnimationDuration: 1.0];
CGAffineTransform trans = CGAffineTransformMakeTranslation(-320, 0);
self.view.transform = trans;
[UIView commitAnimations];
Hope it will help you ;) .
Ok, so I will try to be more precise, I guess you are using Interface Builder ?
So you have to "link" an action to you UISegmentedController, so in your class write this method :
-(IBAction) translateMyView
{
//If the first segment is selected do translation of the cellView
if(yourSegmentedController.selectedSegmentIndex == 0)
{
[UIView beginAnimation:nil context:nil];
[UIView setAnimationDuration: 1.0];
//This will translate the view to its position from its position -320 px
CGAffineTransform trans = CGAffineTransformMakeTranslation(-320, 0);
//Replace self.view with the view you want to translate.
self.view.transform = trans;
[UIView commitAnimations];
}
else if(yourSegementedController.selectedSegmentIndex ==1)
{
//Do same thing that above but with another view
}
}
So this is the action that occure when you select an index in your segmentedController.
What you have to do is linking this action to your UISegmentedController in Interface Builder.
Hope it will be helpfull ;-)