Animation issue of Button in IOS - ios

i have a three buttons in home view controller . When i click but1 it perform animation and move toward right with a duration to a specific width. When but1 reach to its given width it hides and shows but2 there. when i hit but2 it perform animation and move back to the same position of but1. Its like a scenario of open and close of button. The issue now i'm facing is that when i open but1 it moves its given width and when i close it move back to original but1 position , now buttons open and close but when we try to open again it does not open with but1. I want that whenever user click but1 it should moves towards right with animation and every time user want to close the button it should close it rather than open or close only one time. My code for opening of button is this,
- (IBAction)openHome:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
CGAffineTransform transform = CGAffineTransformMakeTranslation(108, 0);
[_openHome setTransform:transform];
[UIView commitAnimations];
[NSTimer scheduledTimerWithTimeInterval:0.75
target:self
selector:#selector(targetMethod:)
userInfo:nil
repeats:NO];
}
-(void)targetMethod:(NSTimer *)myTimer{
_home.hidden=NO;
_openHome.hidden=YES;
_closeHome.hidden=NO;
[myTimer invalidate];
}
For closing the button its this,
- (IBAction)closeHome:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:2.0];
CGAffineTransform transform = CGAffineTransformMakeTranslation(-110, 0);
[_closeHome setTransform:transform];
[UIView commitAnimations];
[NSTimer scheduledTimerWithTimeInterval:0.75
target:self
selector:#selector(targetMethoded:)
userInfo:nil
repeats:NO];
}
-(void)targetMethoded:(NSTimer *)myTimer{
_home.hidden=YES;
_openHome.hidden=YES;
_closeHome.hidden=NO;
[myTimer invalidate];
}
The screen before open of button is this,
The screen after open of button,

Instead of using CGAffineTransform to change the position just change the buttons frame directly. Also use the following code which uses the completion handler to call the targetMethod instead of using the NSTimer:
[UIView animateWithDuration:0.75 animations:^{
_openHome.frame = CGRectMake(_openHome.frame.origin.x+110, _openHome.frame.origin.y, _openHome.frame.size.width, _openHome.frame.size.height);
} completion:^(BOOL finished) {
[self targetMethod];
}];

Related

IOS - buttons slide in from right side animation

i am new to IOS programming. i have a background image on my screen. What i want is when app launches screen shows with the background image and then after 1 sec 2 buttons comes up from right side of the screen. how can i do this. here is the image what i am trying to do
button 1 and button2 have to be invisible first. after 1 second they comes up from right side.
if there are any tutorials related to this kind of animation then please share
You can use simple UIView Animations to achieve this.
Set your button x origin any value greater than screen size so that it is not visible first. Then reset the button frame to a visible value with view animation. For example call the following function in your viewWillAppear: method.
- (void) animateButton {
// Setting button origin to value greater than the view width.
CGRect frame = button.frame;
frame.origin.x = self.view.frame.size.width+10;// or set any value > 320
button.frame = frame;
[UIView animateWithDuration:0.5
delay:2.0
options: UIViewAnimationCurveEaseOut
animations:^{
button.frame = CGRectMake(20, 100, 60, 25) ;// Any value according to your requirement
}
completion:^(BOOL finished){
NSLog(#"Done!");
}];
}
Refer Tutorial
You can do it this way, please note that, if you want to animate the way your button shows up, you must hide them using alpha = 0.0f (and not hidden = true). This way, you will have a smooth showing up animation !
Here it is :
First, on your viewDidLoad of your UIViewController, you have to set up a NSTimer of 1sec, then let it call the method that will let your buttons appear :
- (void) viewDidLoad {
[super viewDidLoad];
// Do your init stuff here
// We will call your buttons as if they are declared as properties of your class, ask if you don't know how to set them
self.button1.alpha = 0.0f;
self.button2.alpha = 0.0f;
// This will wait 1 sec until calling showButtons, where we will do the trick
NSTimeInterval timeInterval = 1.0;
[NSTimer scheduledTimerWithTimeInterval:timeInterval target:self selector:#selector(showButtons) userInfo:nil repeats:NO];
}
- (void) showButtons {
[UIView beginAnimations:#"buttonShowUp" context:nil];
[UIView setAnimationDuration:0.5]; // Set it as you want, it's the length of your animation
self.button1.alpha = 1.0f;
self.button2.alpha = 1.0f;
// If you want to move them from right to left, here is how we gonna do it :
float move = 100.0f; // Set it the way you want it
self.button1.frame = CGRectMake(self.button1.frame.origin.x - move,
self.button1.frame.origin.y,
self.button1.frame.size.width,
self.button1.frame.size.height);
self.button2.frame = CGRectMake(self.button2.frame.origin.x - move,
self.button2.frame.origin.y,
self.button2.frame.size.width,
self.button2.frame.size.height);
// If you want to set them in the exact center of your view, you can replace
// self.button1.frame.origin.x - move
// by the following
// (self.view.center - self.button1.frame.size.width/2)
// This way, your button will be centered horizontally
[UIView commitAnimations];
}
Ask if you have any questions !
Set the buttons' x co-ordinates such that the button is just outside the screen on the right side.
And then try the following in your viewDidLoad()
[UIView animateWithDuration:0.5
delay:1.0
options:NO
animations:^{ change your button x co- ordinate here to the co-ordinate you need it on finally}
completion:NULL];

Function sleep when animation

I'm using [UIView transitionWithView:] for animation.
This method don't have delay only duration, but I need to have some delay.
For example: Need to change 1 image to another with duration 1 sec, then after 4 second change image to another with duration 1 second.
I know about [UIView animateWithDuration:] that have delay but i don't change frame it don't change image for more then 1 time.
I use next:
[UIView transitionWithView:self.view
duration: 1.0f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
//here change image
} completion:^(BOOL finished){
[NSThread sleepForTimeInterval: 4.0f];
}];
It's work fine. But it I change view ( I have scrollView and added a lot of view with animation) it show another view and it's own animation but [NSThread sleepForTimeInterval: 4.0f]; from previous page work on it's to.
So how I can make delay for my animation?
Thanks for help!
I personally like to rely on timers. They don't hang the app and give you more flexibility to control your triggers.
NSTimer *mytimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:#selector(myAnimationFunction:) userInfo:nil repeats:NO];
-(void) myAnimationFunction:(NSTimer *)timer{<br>
// Do anything here...<br>
}

How to make a button fade after clicked for iOS / xcode?

I want to make a button fade away after it is clicked. I know that I can use
_myButon.hidden = TRUE;
...to completely hide a button, but it feels abrupt and jarring. I also know I could sequentially lower the alpha or something, but wasn't sure how to make this happen automatically over a short period of time.
Can someone please give me a tip how to fade out a button after it is clicked using the simplest means possible? I want the effect to look something like a simple "Fade-out" from a powerpoint presentation or something :)
Thanks!
[UIView animateWithDuration:0.5 animations:^{
_myButton.alpha = 0;
}];
Rather than removing the button, just hide it. Taking all the suggestions into account you get:
[UIView animateWithDuration:0.5
animations:^{ _myButton.alpha = 0; }
completion:^(BOOL finished){ _myButton.hidden = YES; }
];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
_myButton.alpha = 0.0f;
[UIView commitAnimations];
alternatively
[UIView animateWithDuration:1.0 animations:^{
_myButton.alpha = 0.0f;
}];
Just reducing the alpha is not going to make your button completely be removed from your view. To a user it will look like its gone but its still there. They potentially still could accidently click it without knowing. So what you can do is do a timer to remove it from view after it has faded away.
...
//alpha animation
//remove from view
timer1 = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:#selector(hideMyButton) userInfo:nil repeats:NO];
}
-(IBAction) hideMyButton
{
[_myButon removeFromSuperview];
}

How to cross-fade a UIScrollView back to the beginning

I have a horizontally-scrolling paging UIScrollView in an iPad app, containing lots of pages. On the last page, I tap on a button on the screen to reset back to page 1. I would like to be able to cross-dissolve this transition, but it doesn't seem to work:
[UIView transitionWithView:self.view duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
pagingScrollView.contentOffset = CGPointZero;
} completion:^(BOOL finished) {
[self refreshPages];
}];
I read that adding UIViewAnimationOptionAllowAnimatedContent will allow all content to transition, but it doesn't work. Instead, the screen cross-dissolves to the background colour, and when the transition is complete, the first page just appears.
you cannot fade-out a UIView (the scroller) AND simultaneously fade-in the same view...
you could just using different UIViews...
what you can do is:
1) fadeOut the scroller in the current position (to the backGround)
2) while the scroller is invisible, move it to the right position (with no animation)
3) fadeIn the scroller from the backGround
something like:
// START FIRST PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
pagingScrollView.alpha = 0;
} completion:^(BOOL finished) {
// FIRST PART ENDED
// MOVE SCROLLER (no animation)
pagingScrollView.contentOffset = CGPointZero;
// START SECOND PART OF ANIMATION
[UIView animateWithDuration:0.5 delay:0.0 options: options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{
// fadeIn - animated
pagingScrollView.alpha = 1;
} completion:^(BOOL finished) {
// ANIMATION ENDED
[self refreshPages];
}];
}];
NEW EDIT:
thanks to amadour, who taught me something with his comments,
i hope he could add an answer of his own, i would vote for him
anyway, to answer to jowie original question:
i got the right animation just moving the contentOffset setting out of the animation block,
and removing UIViewAnimationOptionAllowAnimatedContent (not really needed), and passing pagingScrollView as parameter for transitionWithView
this worked for me:
pagingScrollView.contentOffset = CGPointZero;
[UIView transitionWithView:pagingScrollView duration:3.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
// pagingScrollView.contentOffset = CGPointZero; // move up, outside of animation block
} completion:^(BOOL finished) {
NSLog(#"-->> END amimation");
[self refreshPages];
}];

IOS: set alpha in a UIImage

I have an UIImage and I want to set its alpha at 0.00 after 3 seconds... In my UIImage there is a picture that I want to immediately see when I go in a view, but after 3 second it must disappear.
Easy as that using core animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:3.0f];
imageView.alpha = 0.0f;
[UIView commitAnimations];
if you dont want to slowly fade within 3 seconds, you can use
[UIView setAnimationDelay:3];
and reduce the animation duraction to 0.5f or something.
i think using a short fade out time feels better than just simply set hide to YES
This will make it fade out within three seconds. Call from viewDidLoad:
[UIView animateWithDuration:3.0 animations:^{myImage.alpha = 0; }];
Or if you want the animation to start at 2.5 seconds and last half a second, you could put that into a method (changing 3.0 to 0.5) and then call:
[NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:#selector(hideMyImage) userInfo:nil repeats:no];
Are you showing your UIImage in a UIImageView?
If so, just set the hidden property on that image view to YES and the image view (with its image) will disappear.
You can always remove the sub-child view from the parent.
[imageView removeFromSuperview];
you can always add it later with
[self.view addSubview:imageView];

Resources