In one of my views i need to animate frame property of a UIImageView and while doing it i want to show a progress bar(UIProgressView) in the title view of the navigation bar.The problem is the if i comment out the following animation blocks the progress bar is updated as expected smoothly.On the other hand due to the following animation the progress bar stops in severals places and carries incrementing again.
//add message bubble
[UIView animateWithDuration:0.3
delay:0
options:UIViewAnimationOptionAllowUserInteraction
animations:^
{
animationBubbleImageView.alpha = 1;
}
completion:^(BOOL finished)
{
[self removeAutoCorrectionAndHighlight];
[UIView animateWithDuration:0.3
delay:0
options:UIViewAnimationOptionAllowUserInteraction
animations:^
{
CGRect bubbleFrame = CGRectMake(animationBubbleImageView.frame.origin.x,
animationBubbleImageView.frame.origin.y,
bubbleSize.width,
bubbleSize.height);
[animationBubbleImageView setFrame:bubbleFrame];
messageLabel.alpha = 1;
}
completion:^(BOOL finished)
{
[self sendSubviewToBack:textView];
[self.delegate moveBubbleToTableCell];
}];
}];
animation blocks do not block the main thread but what coudl be the reason of unsmooth beahviout of th progress view ?
UPDATE: What i want to achive is the MessagesApp bubble animation in IOS.While the typed message becomes a bubble and flies to its place the progress bar should increment slowly.
If i try the same thing withou animation progressbar increments normal.
Try putting the progress bar animation in the same animation as the bubble animation. Or put them all into an animation group.
Have you tried Instruments to see what's happening?
Wild guess: you can also check whether the two views inadvertently overlap.
If feasible you can also try to group together the animations, as suggested by "Dad".
Best, Akos
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 UIView on the screen that contains a few labels. I am trying to have a transition where flips the view, and as soon as I am half way through the nimation I want to be able to update the labels. How Can I achieve this?
[UIView transitionWithView:self.myView
duration:.7
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
// It doesn't update the labels here, until I scoll the tableview (containing the view)
//[self.myView update];
}
completion:^(BOOL finished){
// It doesn't look nice here because it doesn't look smooth, the label flashes and changes after the animation is complete
//[self.myView update];
}];
The problem was that I had shouldRasterize enabled which was not allowing the content to be updated during an animaton. Solution was to turn off rasterization before the animation and turn it back on after animation completion.
The reason why I didn't get rid of rasterization is that the view is inside a tableView, and rasterization still helps while scrolling through the tableView.
self.layer.shouldRasterize = NO;
[UIView transitionWithView:self
duration:animationDuration
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{/*update the content here, I did it outside of the transition method though*/}
completion:^(BOOL finished){
if (finished)
{
self.layer.shouldRasterize = YES;
}
}];
I'm trying to animate a label embedded in a UIView.
this is the code :
-(void)displayText:(NSString*)text {
[label setText:text];
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
[labelView setAlpha:1.0];
}
completion:nil
];
[UIView animateWithDuration:5.8
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
[labelView setAlpha:0.0];
}
completion:nil
];
}
To verify, the method is called, i set a breakpoint.
The calls return immediatly but only the end of animations is displayed.
I wired the UIView to the controller.
Pls help, I'm stuck.
Thanks in advance !
Patrick
Correct,
When you animate views like this the animation doesn't actually happen on screen until the next pass of the runloop (i.e. once your method returns).
UIView will coalesce animations that are programmed sequentially.
Use the completion block to fade back out. The code looks a bit odd but it works great!
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
[labelView setAlpha:1.0];
}
completion:^(BOOL completed){
[UIView animateWithDuration:5.8
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{[labelView setAlpha:0.0];}
completion:nil];
}];
In response to your comments:
The animations won't start until the next run of the runloop. They won't start until your app finishes what its doing. If you wait in the loop you will have the same problem and also freeze up your interface. Consider using individual labels for each letter, and add a progressively bigger delay for each animation. All these animation instructions will be queued up at once and then played out over the course of the next however many seconds. Imagine you are like a movie director, you tell each actor what to do in the next scene. Then, once everyone knows what to do you sit back and yell "action" and watch it all play out.
UPDATE
: (I redid my functions so all the animations won't be as nested as before. Still no luck)
I have a piece of code where a try to, in this order:
Hide view A
Show view B
Show view C
The order is important!
The code is the following :
Main function:
[fileMenuController hide:0.2 andDelay:0.1];
[drawingToolController show:0.2 andDelay:0.2];
[penSizeMenuController showSubViewWithDuration:0.4];
fileMenuController hide function:
[UIView animateWithDuration:duration //begin animation
delay:delay
options:UIViewAnimationCurveEaseIn
animations:^{
[self.view setFrame:CGRectOffset([self.view frame], 0, -self.view.frame.size.height)];
}
completion:nil
];
drawingToolController show function:
[UIView animateWithDuration:duration //begin animation
delay:delay
options:UIViewAnimationCurveEaseIn
animations:^{
[self.view setFrame:CGRectOffset([self.view frame], 0, self.view.frame.size.height)];
}
completion:nil
];
penSizeController show function:
[UIView transitionWithView:self.view
duration:duration
options:UIViewAnimationOptionTransitionCurlDown
animations:^{ [self.view addSubview:subView] ;}
completion:nil];
self.view.alpha = 1;
My problem is the block penSizeController showSubView starts with the first animation (fileMenuController hide)!
The first two animations (fileMenuController hide and drawingToolController show) are working properly. When fileMenuController hide is done, drawingToolController starts.
So, does somebody know why the part in the penSizeController showSubView block starts at the same time as the first animation?
I'd imagine it's because the outer animation block doesn't have any animation – because the hide and show creates inner animation blocks – so it immediately calls the completion block.
Either remove the nested animation block in hide and show or add a parameter that disables animation for these nested animation actions.
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];