i wanted to use animations to load a view from the bottom of the window, i know this can be done via presentmodalViewController but in as per the requirement of my app its not valid as i only want to load the view at half of the window. So i used Animations and heres a look at what i did
-(void) displayPicker
{
UIButton *done = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[done setFrame:CGRectMake(197, 199, 103, 37)];
[done setBackgroundImage:[UIImage imageNamed:#"button_0.png"] forState:UIControlStateNormal];
[done setTitle:#"Done" forState:UIControlStateNormal];
[done setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[done addTarget:self action:#selector(dismissView) forControlEvents:UIControlEventTouchUpInside];
[pickerDisplayView addSubview:datePicker];
[pickerDisplayView addSubview:done];
//animating here
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
pickerDisplayView = [[UIView alloc]initWithFrame:CGRectMake(0, 185, 320, 275)];
[self.view addSubview:pickerDisplayView];
[UIView commitAnimations];
}
The view called pickerDisplayView has two components called Picker and Button, but the problem is that Picker is not working correctly and neither the view (pickerDisplayView) is loading in a smooth way.
#Matt: I have followed ur instructions and did as u advised here's what i did
-(void) animationIn
{
CGPoint p = {x:0,y:185};
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
//pickerDisplayView = [[UIView alloc]initWithFrame:CGRectMake(0, 185, 320, 275)];
[pickerDisplayView setCenter:p];
[UIView commitAnimations];
}
But the prob is that the view is going at the top of the window and is not coming at exact y axis of 185. I took these coordinates from IB. Please help me sir
You will have to add the view offscreen and then animate it in.
// In your viewDidLoad or wherever you initialize the view.
pickerDisplayView = [[UIView alloc]initWithFrame:offscreenRect];
[self.view addSubview:pickerDisplayView];
[self performSelector:#selector(animateIn) withObject:nil afterDelay:0.25];
// Declare animateIn
- (void)animateIn
{
UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[pickerDisplayView setCenter:onscreenPosition];
[UIView commitAnimations];
}
The value offscreenRect is a CGRect for the size and position where you want the view to start. onscreenPosition is a CGPoint for the position where you want the animation to finish. Animating the view's center is adequate since you don't want to change the size of the view while animating.
Also, I placed the animation in a separate method that gets called with -performSelector:withObject:afterDelay to ensure that the animation with fire. Sometimes you won't see the animation run if you start it in the same run loop where you added the view you're animating.
You need to init and addSubview before beginAnimations:. When you init pickerDisplayView position it so that the top of it is inline with the bottom of the superview. The animation will then slide up pickerDisplayView. Ideally you should create the view in a nib or in the loadView method. (I strongly recommend using nibs over 'loadView').
Do this in loadView (or move to a nib):
CGRect offScreenFrame = ?????; //Figure this out from self.view
self.pickerDisplayView = [[UIView alloc]initWithFrame:offScreenFrame];
[self.view addSubview:self.pickerDisplayView];
This is the animation:
[UIView beginAnimations:nil context:NULL];
self.pickerDisplayView.frame = CGRectMake(0, 185, 320, 275);
//[UIView setAnimationDuration:0.5]; //this line is probably not needed
[UIView commitAnimations];
Also I'd advice against using 'magic numbers' in the frame. Instead you can derive the pickerDisplayView frame from the superviews frame. If you do use 'magic' numbers be sure explain them in some way (ie assigning them to a appropriately named variable or a comment).
Related
I use the following code to add a date picker view to my app main view, on clicking a button.
- (IBAction)CalenderButton_Click:(id)sender
{
// code to add date picker -mydatepicker
//animating
[self.view addSubview:myPicker];
CGRect onScreenFrame=myPicker.frame;
CGRect offScreenFrame=onScreenFrame;
offScreenFrame.origin.y=self.view.bounds.size.height;
myPicker.frame=offScreenFrame;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5f];
myPicker.frame=onScreenFrame;
[UIView commitAnimations];
}
two things i need to implement is,
1.this code animates the view from bottom, how can i animate it from top??
2.if i click the button to add date picker again, i should check whether the view is already added, if yes, remove the sub view.
Thanks in advance
For question number 2: Use a boolean value to check whether the date picker is already in the view.
isSubView is a BOOL to check ,your myPicker is in the subview.
UPDATED:
- (IBAction)CalenderButton_Click:(id)sender
{
//animating
if(!isSubview){
isSubview = YES;
[self.view addSubview:myPicker];
/*
CGRect onScreenFrame=myPicker.frame;
CGRect offScreenFrame=onScreenFrame;
offScreenFrame.origin.y=self.view.bounds.size.height;
myPicker.frame=offScreenFrame;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5f];
myPicker.frame=onScreenFrame;
[UIView commitAnimations];
*/
// to slide your view from the top
[myPicker setFrame:CGRectMake(0, -200, 320, 200)];
[myPicker setBounds:CGRectMake(0, 0, 320, 200)];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5f];
[myPicker setFrame:CGRectMake(0, 0, 320, 200)];
[UIView commitAnimations];
}else{
isSubview = NO;
[myPicker removeFromSuperView];
}
}
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.
I'm trying to do a card flip animation...but nothing happens.
this is what I do
1. create a container view, to hold the two views to animate from.
2. Create the first view.
3. add it to the container.
4. create the second view
3. start the animation block, beginAnimations
4. call setAnimationTransition put in the view container
5. add the second view to the view container
6. commit the animation,
my code
// create container view
CGRect viewRect = CGRectMake(10, 10, 100, 100);
UIView* myView = [[UIView alloc] initWithFrame:viewRect];
// create 2 viues to flip between for animation
UIImage *i= [ UIImage imageNamed : #"card1.jpg"];
UIImageView *topCard=[ [UIImageView alloc] initWithImage: i ];
topCard.frame= CGRectMake(0,0,100,100);
[myView addSubview:topCard];
[self.view addSubview:myView];
i= [ UIImage imageNamed : #"card2.jpg"];
UIImageView *butCard=[ [UIImageView alloc] initWithImage: i ];
butCard.frame= CGRectMake(0,0,100,100);
// set up the animation
[UIView beginAnimations:#"Flip Top Card" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationRepeatCount:0];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut ];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:myView cache:YES];
[myView addSubview:butCard];
// start the animation
[UIView commitAnimations];
-Ted
If this is iOS 4.0 or later you can do:
[UIView transitionWithView:myView
duration:0.3f
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^(void) {
self.topCardIsShown = !self.topCardIsShown;
self.topCard.hidden = !self.topCardIsShown;
self.butCard.hidden = self.topCardIsShown;
}
completion:^(BOOL finished) {
// nothing
}];
This assumes that you have added both card views to the myView and have added a #property(nonatomic, assign) BOOL topCardIsShown; to your class.
I have a view controller....when the user presses a button I want a black screen to fade in over the top and a uiactivityindicator to appear on top of the faded screen.
How can I get this animated fade in effect?
-(IBAction) loginToApp:(id)sender{
//fade in view
}
Add another view over the top of your view, colored solid black. You can do it in IB or programatically, just make sure it has a higher z-order (is on top). Make its alpha = 0. Then:
-(IBAction) loginToApp:(id)sender{
[UIView animateWithDuration:1.5 animations:^{ myview.alpha = 1.0; }]
}
...obviously you need an outlet or variable myview connected to that view. 1.5 = seconds. Change for your needs.
Sure you can. You can create the overlay view however you wish, but this will work (assuming you create appropriate instance variables somewhere). My code was in my view controller, so [self view] returns the view I want to shade over.
shadeView = [[UIView alloc] initWithFrame:[[self view] bounds]];
shadeView.backgroundColor = [UIColor blackColor];
shadeView.alpha = 0.0f;
spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorStyleWhiteLarge];
spinner.center = CGPointMake(CGRectGetMidX([shadeView bounds]),
CGRectGetMidY([shadeView bounds]));
[shadeView addSubview:spinner];
[[self view] addSubview:shadeView];
To present:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2.0];
[spinner startAnimating];
shadeView.alpha = 0.7f;
[UIView commitAnimations];
And to hide:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[spinner stopAnimating];
shadeView.alpha = 0.0f;
[UIView commitAnimations];
I have a tableview and a normal view (let's say view 2) inside a normal view. All made in Interface builder. View 2 is above the tableview and needs to appear animated from above at the loading of the view. When pressing a button, the view disappears again. How can i do this?
thanks
You will have to animate this in a custom animation block. It should be fairly simple..
Set your view's frame so that it is above the screen and not visible:
[yourView setFrame:CGRectMake(0, -480, 320, 480)];
In the animation block just change your view's frame in the animation block:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:GROW_AND_MOVE_ANIMATION_DURATION_SECONDS];
[yourView setFrame:CGRectMake(0, 0, 320, 480)];
[UIView commitAnimations];
To dismiss it/ make it disappear use same animation with the previous frame:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:GROW_AND_MOVE_ANIMATION_DURATION_SECONDS];
[yourView setFrame:CGRectMake(0, -480, 320, 480)];
[UIView commitAnimations];
But before that consider whether you must bring it in from top, cause if bringing it in from bottom as a modal view meets your requirements, you can very easily use UIViewController's method:
- (void)presentModalViewController:(UIViewController *)modalViewController animated:(BOOL)animated
Good Luck.