UIButton image button with animation - iphone

I have a white image button. when I click, it should change into yellow button image by animating from Bottom to top and if I click yellow button image again it must animate top to bottom and change as white image button image.
This is what I tried:
float originalY = btn.frame.origin.y;
float originalH = btn.bounds.size.height;
[UIView animateWithDuration:3.0f delay:1.0f options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{
btn.frame = CGRectMake(btn.frame.origin.x, (originalY + originalH), btn.bounds.size.width, 0);
[btn setBackgroundImage:[UIImage imageNamed:#"yellowimg.png"] forState:UIControlStateNormal];
[btn setTitleColor:[[UIColor alloc]initWithRed:38.0/255.0 green:38.0/255.0 blue:38.0/255.0 alpha:1.0] forState:UIControlStateNormal];
}
completion:^(BOOL finished) {
}];

btn.frame = CGRectMake(btn.frame.origin.x, (originalY + originalH), btn.bounds.size.width, 0);
This method will make your button with height = 0.
If you want to curl (flip) your button and to have 'new' button which appeared from the first as I know you should use something like that
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:firstView cache:YES];
[firstView addSubview:secondView];
[UIView commitAnimations];

Related

Flip animation not working in GMGridview

I am working in an app in which i have used the GMGridview. I have added the buttons in cellforItems method. -
(GMGridViewCell *)GMGridView:(GMGridView *)gridView cellForItemAtIndex:(NSInteger)index
{
NSLog(#"Creating view indx %d", index);
CGSize size = [self GMGridView:gridView sizeForItemsInInterfaceOrientation:[[UIApplication sharedApplication] statusBarOrientation]];
GMGridViewCell *cell = [gridView dequeueReusableCell];
if (!cell)
{
cell = [[GMGridViewCell alloc] init];
cell.deleteButtonIcon = [UIImage imageNamed:#"close_x.png"];
cell.deleteButtonOffset = CGPointMake(-15, -15);
}
[[cell.contentView subviews] makeObjectsPerformSelector:#selector(removeFromSuperview)];
btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTag:index];
[btn setFrame:CGRectMake(0, 0,size.width, size.height)];
NSLog(#"button frame is %#",btn);
[[btn layer] setBorderColor:[UIColor redColor].CGColor];
[[btn layer]setBorderWidth:2.0f];
[btn addTarget:self action:#selector(SegmentChange:) forControlEvents:UIControlEventTouchUpInside];
cell.contentView = btn;
//int btntag=btn.tag;
return cell;
then I have used the method to Flip all the buttons,but its not working , What i want is when i click on flip button all the buttons in the gridview should flip.how can i do this ,the code for flip i use is here,
for(ll=0;ll<[Image_array count];ll++)
{
// [UIView setAnimationDelay:2.0];
[UIView beginAnimations:#"BackButton" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:12.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:btn cache:YES];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
[btn setImage:[UIImage imageNamed:nil] forState:UIControlStateNormal];
[arr_check replaceObjectAtIndex:ll withObject:#"uncheck"];
front = NO;
}
[_gmGridView reloadData];
As the FOR loop is very much faster comparing to UIViewAnimation. So even if it is animating your view, you will not able to see the animation effect.
You can use NSTimer Or UIViewAnimation delegate method to determine if the one view flip event is completed or not. Then from the delegate method(of UIViewAnimation) you can start another views animation.
i have removed the code from for loop and used the same code in the cellForItemAtIndexpath and use the cell to flip than the button
here is the code :
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell cache:YES];
[UIView setAnimationDuration:0.7];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];

Move UIButton 10px down and open new ViewController

I'm newbie at iOS development and this is my first question on SO.
I want to create "animation".
When I tap UIButton I want to slowely (about 0.5 seconds) move it down for 10px and when I raise my finger I want to open new viewController.
I made something but I don't know how to make "animation".
UIImage *normalImage = [UIImage imageNamed:#"FirstImage"];
UIButton *firstButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
firstButton.frame = CGRectMake(31, 194, normalImage.size.width, normalImage.size.height);
[firstButton setImage:normalImage forState:UIControlStateNormal];
[firstButton addTarget:self action:#selector(showSecondViewController) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:firstButton];
- (void)showSecondViewController; {
SecondViewController *secondViewController = [[SecondViewController alloc] init];
secondViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[self presentModalViewController:secondViewController animated:YES];
[progressViewController release];
}
[UIView animateWithDuration:(NSTimeInterval)duration animations:^(void) {
//put your animation result here
//then it will do animation for you
} completion:^(BOOL finished){
//do what you need to do after animation complete
}];
for example:
UIButton *firstButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
//add firstButton to some view~
//....
firstButton.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:0.5 animations:^(void) {
firstButton.transform = CGAffineTransformMakeTranslation(0,10);
} completion:^(BOOL finished){
show your view controller~
}];
[UIView animateWithDuration:0.5 animations: ^ {
button.frame = CGRectMake:(button.frame.origin.x, button.frame.origin.y + 10.0f, button.frame.size.width, button.frame.size.height);
}];
You can put transformations(repositioning), scaling and rotatations between beginAnimations and commitAnimations blocks where you can specify the AnimationRepeatCount,AnimationCurve etc.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelay:0.5];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationRepeatCount:2];
..........................//etc.
firstButton.frame = CGRectMake(31, 194, normalImage.size.width, normalImage.size.height);
[UIView commitAnimations];
But in iOS4 and later animations are encouraged to be performed by
animateWithDuration:delay:options:animations:compeletion and similar methods that invlove blocks which are very powerful. For more information on block animations please refer to apple documentation

How to dynamically name UIButtons within a loop and how to do animation

I create in this code 7 buttons with different names, and set the tag and frame for each button.
If I click a particular button it calls buttonPresed: and goes into the switch statement, branching according to the tag.
However, if I click one of button 1,2,3,4,5, or 6, then the last button moves up and down. I don't want that button to move; I want each button, according to tag, to move.
-(void)btnMethod
{
for(int i1=0;i1<[characters11arrary count];i1++)
{
NSString *str=[[NSString alloc]init];
str=[characters11arrary objectAtIndex:i1];
NSInteger idcard = [str integerValue];
idcard--;
btn=[[UIButton alloc]initWithFrame:CGRectMake(-15,140+w11,70,55)];
[btn setBackgroundImage:[arrayPlayerCard objectAtIndex:idcard] forState:UIControlStateNormal];
btn.tag=j11;
[btn addTarget:self action:#selector(buttonPresed:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
w11+=20;
j11+=1;
idcard=0;
}
}
-(void)buttonPresed:(id)sender
{
UIButton *btnTag=(UIButton*)sender;
d =btnTag.tag;
NSLog(#"tagc= %i",d);
switch(d)
{
case 1:
if(t==1)
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0];
[UIView setAnimationBeginsFromCurrentState:YES];
CGAffineTransform transform1 =CGAffineTransformMakeTranslation(30,0);
[btn setTransform:transform1];
t=0;
break;
}
else //if(t==0)
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0];
[UIView setAnimationBeginsFromCurrentState:YES];
CGAffineTransform transform1 = CGAffineTransformMakeTranslation(0,0);
[btn setTransform:transform1];
t=1;
break;
}
case 2:....................................
.......................................................
}
you use [btn setTransform:...]instead of [sender setTransform:...]
think 'btn' has the address of the last allocated Button, so your function moves everytime the last button.
and if you use sender you dont need the switch.
-(void)buttonPresed:(id)sender
{
if ([sender transform].ty == 0) {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 1];
[UIView setAnimationBeginsFromCurrentState:YES];
CGAffineTransform transform1 =CGAffineTransformMakeTranslation(0,-30);
[sender setTransform:transform1];
[UIView commitAnimations];
}
else{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration: 1];
[UIView setAnimationBeginsFromCurrentState:YES];
CGAffineTransform transform1 =CGAffineTransformMakeTranslation(0,0);
[sender setTransform:transform1];
[UIView commitAnimations];
}
}
this works, but your translation does a right-left animation not up-down, changed that in my code

UIButton resize with animation

I'm creating a menu and I want the buttons to "pop" I guess on the screen. Basically I want to start at 0px dimensions and then go up to the full size of the buttons. I can animate the alpha and the position if I want to but can't do the dimensions and I think its because its an image on the button.
If I do a UIButtonTypeRoundRect you can see the button being animated behind the image but the image is static.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:#"settings.png"] forState:UIControlStateNormal];
button.frame = CGRectMake(20, 20, 0, 0);
button.alpha = 0;
[self.view addSubview:button];
CGRect frame = button.frame;
[UIView beginAnimations:#"button" context:nil];
[UIView setAnimationDuration:1];
button.alpha = 1;
frame.size.width += 53;
frame.size.height += 53;
button.frame = frame;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
So the Alpha works but the resize doesn't. I've also played with stretchableImageWithLeftCapWidth to try and give it context or something but to no avail.
Cheers for your help.
Could you try using the following code instead?
button.transform = CGAffineTransformMakeScale(1.5,1.5);
button.alpha = 0.0f;
[UIView beginAnimations:#"button" context:nil];
[UIView setAnimationDuration:1];
button.transform = CGAffineTransformMakeScale(1,1);
button.alpha = 1.0f;
[UIView commitAnimations];
Your button should start slightly larger and then shrink back down. If this scales properly, just adjust the scalefactor before and after to suit.
Updated for Swift:
You can insert this in whatever IBAction you've got tied to a button to animate it when it's touched.
// animate button
// play with the scale (1.25) to adjust to your liking
yourButton.transform = CGAffineTransformMakeScale(1.25, 1.25)
yourButton.alpha = 0.0
UIView.beginAnimations("yourButton", context: nil)
// play with the animationDuration to adjust to your liking
UIView.setAnimationDuration(0.25)
yourButton.transform = CGAffineTransformMakeScale(1.0, 1.0)
yourButton.alpha = 1.0

Implement animation in UIButton

I'm new to cocoa and iphone programming and I want to implement an animation in UIButton. For example, I create a custom UIButton with a square image. Then when I press that UIButton, the square image will flip. Note that the square image is the image of the UIButton.
[UIButton setImage:[UIImage imageNamed:#"square.png"]];
I had the same problem and I solved it in a very similar way. I just subclassed the UIButton and implemented a method like that:
- (void) flipBackgroundImage:(UIImage*) image
{
[UIView beginAnimations:#"flipbutton" context:NULL];
[UIView setAnimationDuration:0.4];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self cache:YES];
[self setBackgroundImage:image forState:UIControlStateNormal];
[UIView commitAnimations];
}
Works like a charm.
Cheers,
anka
Below is the complete code for flipping a button (with background image) when it will pressed.
Basically you need two button and a container view.
///// .H file code....
//Container views used for flipping the bars to show whose turn it is
UIButton* btn1;
UIButton* btn2;
UIView *BarContainerView;
///// .M file code....
- (void)viewWillAppear:(BOOL)animated
{
BarContainerView = [[UIView alloc] initWithFrame:CGRectMake(20, 30, 103, 150)];
btn1 = [[UIButton buttonWithType:UIButtonTypeRoundedRect]retain];
[btn1 addTarget:self action:#selector(btn1_click) forControlEvents:UIControlEventTouchUpInside];
[btn1 setBackgroundImage:[UIImage imageNamed:#"image1.png"] forState:UIControlStateNormal];
btn1.frame = CGRectMake(0, 0, 103, 150);
btn2 = [[UIButton buttonWithType:UIButtonTypeRoundedRect]retain];
[btn2 addTarget:self action:#selector(btn2_click) forControlEvents:UIControlEventTouchUpInside];
[btn2 setBackgroundImage:[UIImage imageNamed:#"image2.png"] forState:UIControlStateNormal];
btn2.frame = CGRectMake(0, 0, 103, 150);
[BarContainerView addSubview:btn1];
[self.view addSubview:BarContainerView];
[self.view bringSubviewToFront:BarContainerView];
}
- (void) btn1_click
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:BarContainerView cache:YES];
[btn1 removeFromSuperview];
[BarContainerView addSubview:btn2];
[UIView commitAnimations];
}
- (void) btn2_click
{
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:BarContainerView cache:YES];
[btn2 removeFromSuperview];
[BarContainerView addSubview:btn1];
[UIView commitAnimations];
}