I have a UIView called geopointView. I want to animate slide in this UIview on main view frame when a button (myButton) is pressed. If myButton is pressed again UIview should slide out of frame. myButton calls following method "optionsCalled"
-(void) optionsCalled
{
if (![[self.view subviews] containsObject:geopointView] &&checkForGeopointViewAnimation ==0) {
[self.view addSubview:geopointView];
geopointView.frame = CGRectMake(0,430,320,30);
[UIView animateWithDuration:0.3f
animations:^{
geopointView.frame = CGRectMake(0, 350, 100, 80);
}
completion:^(BOOL finished){
checkForGeopointViewAnimation = 1 ;
}];
}
if ([[self.view subviews] containsObject:geopointView] && checkForGeopointViewAnimation ==1)
{
geopointView.frame = CGRectMake(0, 350, 100, 80);
[UIView animateWithDuration:0.3f
animations:^{
geopointView.frame = CGRectMake(0,430,320,30);
}
completion:^(BOOL finished){
checkForGeopointViewAnimation = 0 ;
}];
[geopointView removeFromSuperview];
}
}
here checkForGeopointViewAnimation is a global variable defined to ensure slide in and out are not called at one time.
Problem with this code is that UIview slides in animatedly but it does not animate slide out action. it just disappears from main frame. Do I need to use any time here so that there is delay in calling add and remove UIview functions?
Thanks for any help in advance
Try [geopointView removeFromSuperview]; after the completion of the animation
Maybe you need to call [geopointView removeFromSuperview]; in your completion block instead?
Related
So I've searched a lot but I didn't find an answer for my problem.
I want to make a button that would have two images, first image that is when button is in normal state, the other one when it is in highlighting state. The problem is that i want these images to change in animated manner, for example the first image fades out, when the second fades in. And they change in such a way that the animation time remains constant.
The only way I thought is, to make a custom button, add couple of ImageViews and on button touch down event, one ImageView fades in, other fades out, on button touch up event, I could do the opposite. But this method doesn't seem the most suitable. Is there a better option that I am not seeing?
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame = CGRectMake(80, 50, 150, 40);
[myButton setTitle:#"Say, Hi!" forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:#"xyz.png"] forState:UIControlStateNormal];
[myButton addTarget:self action:#selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];
-(IBAction)buttonClicked:(UIButton *)sender
{
[UIView animateWithDuration:0.7f
animations:^
{
[sender setAlpha:0.5f];
}
completion:^(BOOL finished)
{
[sender setAlpha:1.0f];
[sender setBackgroundImage:[UIImage imageNamed:#"abc.png"] forState:UIControlStateNormal]; }
];
}
you can set the animation duration and also alpha accordingly.
I've done it the following way, similarly as Ilker Baltaci has described it:
I subclassed UIButton (although it's not advised because it's a class cluster) and added a function to it:
- (void) blinkAndFlipButtonAnimationWithText: (NSString*) buttonText {
[UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear
animations: ^{
self.alpha = 0.1;
}
completion: ^(BOOL finished) {
[UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear
animations: ^{
self.alpha = 1;
}
completion: ^(BOOL finished) {
[UIView transitionWithView: self duration: 0.25 options: (UIViewAnimationOptionTransitionFlipFromBottom | UIViewAnimationOptionCurveEaseInOut)
animations: ^{
[self setTitle: buttonText forState: UIControlStateNormal];
}
completion: ^(BOOL finished) {
if ([self.delegate respondsToSelector: #selector(primaCustomButtonDidFinishFlipAnimation:)]) {
[self.delegate primaCustomButtonDidFinishFlipAnimation: self];
}
}
];
}
];
}
];
}
a lot of block-animation cascades, ugly i know!
But anyway, you can adapt the animation block to your needs and exclude the delegate callback.
then in your IBAction/target-action method for the button press just call the method, like:
- (IBAction) facebookButtonPresse: (id) sender {
[self.facebookButton blinkAndFlipButtonAnimationWithText: #"+3"];
}
if you want fade out/fade in animation for the button i can replace you custom button with an UIImageview which has the same background image as you initial uibutton.This will be the first thing to to in the action of teh button.When the button is replaced with the uiview cou can apply fade out animation to UIImageview from initial backgorund image to new (selected version). When the animation ends, in the completion block begin another animation which fades out the selected iamge to normal background iamge.Then the second animation ends remove your uiimageview and add your button back.
//Declare your uiimageviews as ivars
UIImageView *imageViewnormal = [[UIimageView alloc] initWithImage:normalIamge];
UIImageView *imageViewhighlighted = [[UIimageView alloc] initWithImage:highlightImage];
In the action for UIControlEventTouchDown of your button
// make your button invisible
yourbutton.alpha = 0;
//add to same rect 2 imageviews with initial and selected backgrounds of uibutton
imageViewnormal.alpha = 1;
imageViewhighlighted.alpha = 0;
[self.view addSubview:imageViewhighlighted];
[self.view addSubview:imageViewnormal];
// newImageViewWithInitialBackground needs to be inserted secondly and alpha value 1
// newImageViewWithSelectedBackground has alpha 0 and is behind newImageViewWithInitialBackground
[UIView animateWithDuration:0.3
animations:^
{
imageViewnormalalpha = 0;
imageViewhighlighted.alpha = 1;
}
completion:^(BOOL finished)
{
}];
In the action for UIControlEventTouchUpInside of your button
[UIView animateWithDuration:0.3
animations:^
{
imageViewnormal.alpha = 1;
imageViewhighlighted.alpha = 0;
}
completion:^(BOOL finished)
{
//Remove both of the uiimageviews aand make your button visible
[imageViewnormal removeFromSuperview];
[mageViewhighlighted removeFromSuperview];
yourbutton.alpha = 1;
}];
use following code, it's working properly, I used this code in my project:
UIButton *myButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame=CGRectMake(40, 20, 80, 25);
[myButton setImage:[UIImage imageNamed:#"normalImage.png"] forState:UIControlStateNormal];
[myButton setImage:[UIImage imageNamed:#"highlightedImage.png"] forState:UIControlStateHighlighted];
[myButton addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];
xCode 7,iOS9
//for zoom in
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1.5, 1.5);
} completion:^(BOOL finished){}];
// for zoom out
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finished){}];
I have a UIButton somewhere on my view. On touch event of button I making a UIView appear. The UIAnimation I have used make the view appear from top of window. But I want it to appear from button.frame.origin.y . Before touching the button the view is not visible. On touching the button view should start appearing from above position.
Here is the code :
-(IBAction) ShowInfowView:(id)sender{
CGRect rect = viewInfo.frame;
rect.origin.y = rect.size.height - rect.size.height+58.0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.70];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
viewInfo.frame = rect;
[UIView commitAnimations];
}
This is how I am hiding the view again :
-(IBAction) HideInfoView:(id)sender{
CGRect rect = viewInfo.frame;
rect.origin.y = -rect.size.height;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.70];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
viewInfo.frame = rect;
[UIView commitAnimations];
}
In viewDidLoad I am doing the following :
CGRect rect = viewInfo.frame;
rect.origin.y = -rect.size.height;
viewInfo.frame = rect;
UPDATE:
Please see this example. Here view is appearing from top of screen. I want it to appear from button y axis. For that matter please consider button y position a bit upwards.
So you want a slide-in effect, but not from the top of the screen, just some arbitrary value?
One way to do it:
1) You should create a view that has the dimensions and position of your desired view AFTER animation finishes, we'll call it baseview.
2) Set this baseview property clipsToBounds to YES. This will make all subviews that are outside of the baseview's frame invisible.
3) Add your animating view as a subview of the baseview, but set the frame so it is invisible (by plcacing it above the baseview):
frame = CGRectMake(0, -AnimViewHeight, AnimViewWidth, AnimViewHeight);
4) Animate the animview frame:
//put this inside of an animation block
AnimView.frame = CGRectMake(0, 0, AnimViewWidth, AnimViewHeight);
EDIT:
Example:
//define the tags so we can easily access the views later
#define BASEVIEW_TAG 100
#define INFOVIEW_TAG 101
- (void) showInfo
{
//replace the following lines with preparing your real info view
UIView * infoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[infoView setBackgroundColor: [UIColor yellowColor]];
[infoView setTag: INFOVIEW_TAG];
//this is the frame of the info view AFTER the animation finishes (again, replace with real values)
CGRect targetframe = CGRectMake(100, 100, 100, 100);
//create an invisible baseview
UIView * baseview = [[UIView alloc] initWithFrame:targetframe];
[baseview setBackgroundColor: [UIColor clearColor]];
[baseview setClipsToBounds: YES]; //so it cuts everything outside of its bounds
[baseview setTag: BASEVIEW_TAG];
//add the nfoview to the baseview, and set it above the bounds frame
[baseview addSubview: infoView];
[infoView setFrame:CGRectMake(0, -infoView.bounds.size.height,
infoView.bounds.size.width, infoView.bounds.size.height)];
//add the baseview to the main view
[self.view addSubview: baseview];
//slide the view in
[UIView animateWithDuration: 1.0 animations:^{
[infoView setFrame: baseview.bounds];
}];
//if not using ARC, release the views
[infoview release];
[baseview release];
}
- (void) hideinfo
{
//get the views
UIView * baseView = [self.view viewWithTag: BASEVIEW_TAG];
UIView * infoView = [baseView viewWithTag: INFOVIEW_TAG];
//target frame for infoview - slide up
CGRect out_frame = CGRectMake(0, -infoView.bounds.size.height,
infoView.bounds.size.width, infoView.bounds.size.height);
//animate slide out
[UIView animateWithDuration:1.0
animations:^{
[infoView setFrame: out_frame];
} completion:^(BOOL finished) {
[baseView removeFromSuperview];
}];
}
I have done exactly what you're trying in my recent project.
The following steps should make this work:
1. In your viewDidLoad: you init your viewToFadeIn like this:
viewToFadeIn = [[UIView alloc] initWithFrame:CGRectMake(20,self.view.frame.size.height+10, self.view.frame.size.widh-40, 200)];
//its important to initalize it outside your view
//your customization of this view
[self.view addSubview:viewToFadeIn];
2.your ShowInfowView: Method should look like this:
` -(IBAction) ShowInfowView:(id)sender{
[UIView beginAnimations:#"fadeIn" context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationFinished:finished:context:)];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, -290);
//290 is in my case, try a little for your correct value
[UIView commitAnimations];
}
3.yourHideInfoView:` Method looks like this
-(IBAction) HideInfoView:(id)sender{
[UIView beginAnimations:#"fadeOut" context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, 0);
[UIView commitAnimations];
}
EDIT:
4. animationFinishedMethod:
- (void)animationFinished:(NSString *)animationID finished:(BOOL)finished context:(void *)context{
if ([animationID isEqual:#"fadeIn"]) {
//Do stuff
}
if ([animationID isEqual:#"fadeOut"]) {
//Do stuff
}
}
SEE THIS
This should do the trick. Good luck
Your problem is not clear (for me).
What is this?
rect.origin.y = rect.size.height - rect.size.height+58.0;
Is 58 origin of your UIButton?
You should use sender.frame etc
Use blocks to animate like this
[UIView animateWithDuration:0.5f animations:^{
// Animation here
} completion:^(BOOL finished) {
// onComplete
}];
- (void) slideIn{
//This assumes the view and the button are in the same superview, if they're not, you'll need to convert the rects
//I'm calling the animated view: view, and the button: button...easy enough
view.clipToBounds = YES;
CGRect buttonRect = button.frame;
CGRect viewRect = CGRectMake(buttonRect.origin.x, buttonRect.origin.y + buttonRect.size.height, view.bounds.size.width, 0);
CGFloat intendedViewHeight = view.height;
view.frame = viewRect;
viewRect.size.height = intendedViewHeight;
[UIView animateWithDuration:.75 delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{
view.frame = viewRect;
}completion:nil];
}
This will cause the the view to appear to slide out from under the button. To slide the view back in, you just reverse the animations. If you wish to slide it up from the button, you'll need to make sure your starting 'y' is the 'y' value of the button (rather than the 'y' + 'height') and animate both the height and y values of the view that needs animating.
The main UIView contains two subviews - UIView_1 and UIView_2.
In the UIView_2, there is a button to show or hide the UIView_1.
For example, when a user touches the button to show the UIView_1, then UIView_1 will slide down and UIView_2 will push downwards with transition.
I have very little knowledge in animation. Can someone show me some sample code for reference?
Should I use CGAffineTransformMakeTranslation?
Thanks.
You don't need anything so complex. Just change the view's frame size.
NSTimeInterval animationDuration = /* determine length of animation */;
CGRect newFrameSize = /* determine what the frame size should be */;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:animationDuration];
theViewToChange.frame = newFrameSize;
[UIView commitAnimations];
Simply Hide/show with fadein/out effect
`
/To Show/
sliderView.hidden = NO;
sliderView.alpha = 0.1;
[UIView animateWithDuration:0.25 animations:^{
sliderView.alpha = 1.0f;
} completion:^(BOOL finished) {
// do some
}];
/To hide/
[UIView animateWithDuration:0.25 animations:^{
sliderView.frame = CGRectMake(130, 30, 0, 0);
[sliderView setAlpha:0.1f];
} completion:^(BOOL finished) {
sliderView.hidden = YES;
}];
`
It depends on what you want to do with UIView_2.
Place UIView_1 below UIView_2 in Interface Builder.
Size UIView_2 to take up all the space below the UINavigationBar.
Use the following code to either resize (using uiview2_resized_rect) the frame for UIView_2, or translate/move the frame for UIView_2 (using uiview2_translated_rect ):
CGRect uiview1_original_rect = UIView_1.frame;
CGRect uiview2_original_rect = UIView_2.frame;
CGRect uiview2_translated_rect = CGRectMake(uiview2_original_rect.origin.x,
uiview2_original_rect.origin.y+uiview1_original_rect.size.height,
uiview2_original_rect.size.width,
uiview2_original_rect.size.height);
CGRect uiview2_resized_rect = CGRectMake(uiview2_original_rect.origin.x,
uiview2_original_rect.origin.y+uiview1_original_rect.size.height,
uiview2_original_rect.size.width,
uiview2_original_rect.size.height-uiview1_original_rect.size.height);
[UIView animateWithDuration:0.300 delay:0.0
options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionBeginFromCurrentState
animations:^{
//uncomment this and comment out the other if you want to move UIView_2 down to show UIView_1
//UIView_2.frame = uiview2_translated_rect;
UIView_2.frame = uiview2_resized_rect;
} completion:^(BOOL finished) {
}];
I have a View with UIButton, UITextField, and a UIImageView for Background.
in viewDidLoad i try animate UIImageView from alpha=0 to alpha =1 using block. it's pretty basic, here's the code:
[UIView animateWithDuration:1.5 animations:^(void){
((UIView*)[self.view viewWithTag:123]).alpha = 1;
}completion:^(BOOL finished){
}];
which is working fine. but during that 1.5 seconds of animation, my touch in current view seems to be disabled. i can't click any of the buttons or textFields until animation finish.
Thanks in Advance
You should use option UIViewAnimationOptionAllowUserInteraction as in the following example:
[UIView animateWithDuration:1.0
delay:0
options:UIViewAnimationOptionAllowUserInteraction
animations:^{ myView.alpha = 0.5; }
completion:NULL];
UIView userinteraction in animation using .allowUserInteraction for Swift 3+,iOS 10
Add to the animation call the UIViewAnimationOptions flag .allowUserInteraction
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.0, options: [.curveEaseIn,.allowUserInteraction], animations: {
//your animation block
}, completion: { isAnimated in
//after animation is done
})
Seems like animating buttons in general makes their click states pretty finicky. The solution I came up with for this was to have the animating element just be a UIView with all the button styles. Before the UIView animates I add a real button to the view above the UIView with a clear background to the location I want the user interaction to occur. Definitely adds an extra step but is very dependable.
//create button and view
UIButton *viewNotificationBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, ([UIScreen mainScreen].bounds.size.height -70), 320, 50)];
UIView *viewNotificationView = [[UIView alloc] initWithFrame:CGRectMake(0, ([UIScreen mainScreen].bounds.size.height), 320, 50)];
//add elements to screen
[self.view addSubview:viewNotificationView];
[self.view insertSubview:viewNotificationBtn aboveSubview:viewNotificationView];
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
[viewNotificationView setFrame:CGRectMake(0, ([UIScreen mainScreen].bounds.size.height - 70), 320, 50)];
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 delay:10.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
viewNotificationView.alpha = 0;
} completion:^(BOOL finished) {
[viewNotificationView removeFromSuperview];
[viewNotificationBtn removeFromSuperview];
}];
}];
Use animateWithDuration:delay:options:animations:completion: method and set UIViewAnimationOptionAllowUserInteraction as option
I ended up not doing this. You can't touch a view that still animating. that's my conclusion. Would be happy to hear some thought on this though.
Isn’t it something that happens on standart iOS apps like Settings back button, menu swipe. There is no way to touch to screen while it is animating whereas you can touch in Android.
I have a series of uiviews, and i want to create an animation where a button press event will expand the uiview from the bottom and reveal more information about the view. Another button press will shrink the view back to original.
How do i proceed with this?
There are a series of uiviews laid out in a horizontal scroll view like a coverflow. I want to display additional information about each uiview on click of a button.
Do drop a comment if you need more information.
TIA,
Praveen S
This code will expand your view...do the reverse to shrink it
CGRect tempFrame=view.frame;
tempFrame.size.width=200;//change acco. how much you want to expand
tempFrame.size.height=200;
[UIView beginAnimations:#"" context:nil];
[UIView setAnimationDuration:0.2];
view.frame=tempFrame;
[UIView commitAnimations];
For that use this code
In .h file
#import <UIKit/UIKit.h>
#interface ExpandedViewController : UIViewController
{
UIView * expandiView;
BOOL viewExpanded;
}
- (IBAction)expandOrShrinkView:(id)sender;
#end
and in your .m file
- (void)viewDidLoad
{
[super viewDidLoad];
aview = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];
aview.backgroundColor = [UIColor redColor];
[self.view addSubview:aview];
viewExpanded = NO;
}
And in your button action add this code
- (IBAction)expandOrShrinkView:(id)sender {
[UIView animateWithDuration:0.8f delay:0.0f options:UIViewAnimationOptionTransitionNone animations: ^{
if (!viewExpanded) {
viewExpanded = YES;
aview.frame = CGRectMake(10, 10, 100, 200);
}else{
viewExpanded = NO;
aview.frame = CGRectMake(10, 10, 100, 100);
}
} completion:nil];
}
When you click the button first time it will expand the view from bottom and when you click the button second time it will shrink the View from bottom change the frame size to your need..
And if you want shrink function in another button than use two action method like this
- (IBAction)expandView:(id)sender {
[UIView animateWithDuration:0.8f delay:0.0f options:UIViewAnimationOptionTransitionNone animations: ^{
aview.frame = CGRectMake(10, 10, 100, 200);
} completion:nil];
}
- (IBAction)ShrinkView:(id)sender {
[UIView animateWithDuration:0.8f delay:0.0f options:UIViewAnimationOptionTransitionNone animations: ^{
aview.frame = CGRectMake(10, 10, 100, 100);
} completion:nil];
}