There are two main documented methods of animating UIViews. One, is a deprecated process in which one makes multiple calls beginning with method beginAnimations:context: and the other, newer, suggested approach is block-based.
I have the following code in my application. However, only the older deprecated animation segment works. The newer, block-based approach works the first time, but every subsequent time skips directly to the end of the animation and shows me only the final frame immediately. Has anybody had any experienced with this?
-(void)updateImageViewSlider:(UIImage *)image {
mImageFeedSwipe.alpha = 0.0;
[mImageFeedSwipe setHidden:NO];
mImageFeedSwipe.frame = DEFAULT_IMAGEVIEW_RECT;
[mImageFeedSwipe setImage:image];
//
// The following animation code works fine.
//
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
mImageFeedSwipe.alpha = 1.0;
[mImageFeedSwipe setFrame:NEW_IMAGEVIEW_RECT];
[UIView commitAnimations];
//
// The following DOES NOT work except on the first run
//
int animationOptions = 0
| UIViewAnimationOptionCurveEaseInOut
| UIViewAnimationOptionBeginFromCurrentState
| UIViewAnimationOptionAllowUserInteraction;
[UIView animateWithDuration:1.0
delay:0
options:animationOptions
animations:^{
// Bring in the swiping image view...
mImageFeedSwipe.alpha = 1.0;
[mImageFeedSwipe setFrame:NEW_IMAGEVIEW_RECT];
}
completion:nil];
}
This is being run on the main thread via [self performSelectorOnMainThread...].
I was seeing this same problem until I realized that in between animations I was hiding the view and never changing view.hidden to NO again. Any chance that you are hiding your view or setting alpha to 0.0 in between animations?
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'm using UIView class method animateWithDuration for repeating my view animation. How can I have a handler that could be used to stop this animation later? For example, repeated animation starts in one method and I need to stop it later from another method.
You could do something like this assuming you have created a canceled property. As noted in the comments the completion block's startAnimation call needs to be wrapped in an async call to avoid a stack overflow. Be sure to replace the "id" with whatever class type you actually have.
- (void)startAnimation {
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction
animations:^(void) {
//animate
}
completion:^(BOOL finished) {
if(!self.canceled) {
__weak id weakSelf = self;
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
[weakSelf startAnimation];
}];
}
}
];
}
The purpose of the animation is to repeatedly animate the bounce of an image. When there is no worry about manually stopping it then you just need to set three properties (UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat) and animation block code for moving the image - self.image.center = CGPointMake(self.image.center.x, self.image.center.y+25); Here is the full code of the animation:
[UIView animateWithDuration:0.5 delay:0 options:( UIViewAnimationOptionCurveEaseIn |
UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat |
UIViewAnimationOptionAllowUserInteraction) animations:^{self.image.center =
CGPointMake(self.image.center.x, self.image.center.y+25);} completion:nil];
That's it. But if you need a manual control then some additional code is required. First, according to jaminguy, you need to have a BOOL property for indication loop/stop (self.playAnimationForImage) the animation and clean separate method with animation code that would be called from elsewhere. Here is the method:
-(void)animateImageBounce{
[UIView animateWithDuration:0.5 delay:0 options:(
UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoreverse |
UIViewAnimationOptionAllowUserInteraction) animations:^{self.image.center =
CGPointMake(self.image.center.x, self.image.center.y+25);} completion:^(BOOL finished){if
(finished && self.playAnimationForImage){
self.image.center = CGPointMake(self.image.center.x, self.image.center.y-25);
[self animateImageBounce];
}}];
and here is the start of the animation call from some method
-(void)someMethod{
...
self.playAnimationForFingers = YES;
[self animateImageBounce];
}
The thing that I would like to note is that, in manual control, you need to reset the center.y of the image back right before next recursive call is performed.
Actually, the solution with recursive call didn't worked out for me. The animation started to behave weirdly: every 2- 3 animatation repeat cycle I got animation breaks. After the first bouncing part of item (moving item down) the second part (moving up) was performing almost instantly. I thing it has something to do with the recursive call.
Therefore, I refused to use that. The solution would be to start the animation with autoreverse and repeat options and, in complete block, to check if a flag (self.playAnimationForFingers) indicates to stop the animation.
-(void)animateFingersForLevelCompleteScreen{
//fix: reset the place of bouncing fingers (starting place).
//Otherwise the fingers will slowly move to the bottom at every level.
//This resetting is not working when placed inside UIView
//animate complete event block
self.image.center = CGPointMake(10 + self.image.frame.size.width/2,
95 + self.image.frame.size.height/2);
[UIView animateWithDuration:0.5 delay:0
options:(UIViewAnimationOptionCurveEaseIn |
UIViewAnimationOptionAutoreverse |
UIViewAnimationOptionRepeat |
UIViewAnimationOptionAllowUserInteraction)
animations:^{
self.image.center = CGPointMake(self.image.center.x,
self.image.center.y+25);
}
completion:^(BOOL finished){
/*finished not approapriate: finished will not be TRUE if animation
was interrupted. It is very likely to happen because animation repeats && */
if (!self.playAnimationForFingers){
[UIView setAnimationRepeatAutoreverses:NO];
}
}];
}
U can make use of CABasicAnimation instead.
CABasicAnimation *appDeleteShakeAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
appDeleteShakeAnimation.autoreverses = YES;
appDeleteShakeAnimation.repeatDuration = HUGE_VALF;
appDeleteShakeAnimation.duration = 0.2;
appDeleteShakeAnimation.fromValue = [NSNumber numberWithFloat:-degreeToRadian(5)];
appDeleteShakeAnimation.toValue=[NSNumber numberWithFloat:degreeToRadian(5)];
[self.layer addAnimation:appDeleteShakeAnimation forKey:#"appDeleteShakeAnimation"];
Then when u want to stop it you can just call
[self.layer removeAnimationForKey:#"appDeleteShakeAnimation"];
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];
One simple question:
This is an example of an old fashion animation:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[base setTransform:rotate];
[base setCenter:newCenter];
[UIView commitAnimations];
this can be written like
[UIView animateWithDuration:0.5 animations:^{
[base setTransform:rotate];
[base setCenter:newCenter];
}];
is there any advantage in rewriting the animation using this new form?
There should be some kind of gain, or Apple would not make this new function.
What do you guys say?
Apple made the change not for performance, but because blocks are an easier way to express this kind of thing. Previously you'd have to use selectors to be triggered when an animation finished, etc.
So - why to use animateWithDuration: because blocks save time, make code cleaner, and are just generally very useful.
And why to use beginAnimation: because you want to support versions of iOS prior to 4.0, where that code isn't available. Apple still need to provide both methods because they need to remain backwards compatible - but the documentation strongly recommends you use the blocks version of methods where available and appropriate.
I think animateWithDuration is newer and look better. I use it more than beginAnimation. It is more clear code. beginAnimation use when you need compatible for iOS version less than 4.0.
But in some case, beginAnimation has more advantage, make easier when you write a function with a parameter animated. Example:
- (void)moveSomethingWithAnimated:(BOOL)animated {
// Do other task 1
if( animated ) {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.2];
someView.frame = newFrame;
otherView.frame = newFrame;
}
if( animated ) {
[UIView commitAnimations];
}
// Do other task 2
}
Instead of:
- (void)moveSomethingWithAnimated:(BOOL)animated {
// Do other task 1
if( animated ) {
[UIView animateWithDuration:0.2 animations:^{
someView.frame = newFrame;
otherView.frame = newFrame;
}];
}
else {
// duplicate code, or you have to write another function for these two line bellow
someView.frame = newFrame;
otherView.frame = newFrame;
}
// Do other task 2
}
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.