I have a UIImageView that I have aligned right where I want it in my XIB file. When my viewController is called, I would like to have the image move to the right about 400px over the course of 3 seconds. Then I would like the image to fade-out.
I have been playing around with QuartzCore and CATransition and have been able to fade an image out over time with:
CATransition *animation = [CATransition animation];
animation.type = kCATransitionFade;
animation.duration = 0.4;
[coverImage.layer addAnimation:animation forKey:nil];
coverImage.hidden = true;
However, I would like the image to slide to the right. Anyone know how to do this? Thank you!
Using CATransition for moving images is quite overkill. I would recommend using UIView animations, then you would simply do
// UIImageView *coverImage = ...
// This will move the image to the right and then fade it out.
[UIView animateWithDuration:3 animations:^{
coverImage.center = CGPointMake(coverImage.center.x + 400, coverImage.center.y);
coverImage.alpha = 0.0f;
}];
UIImageView *coverImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 300, 200, 400)];
coverImage.backgroundColor = [UIColor blackColor];
[self.view addSubview:coverImage];
[UIView animateWithDuration:0.4 animations:^{
coverImage.frame = CGRectInset(coverImage.frame, -400, 0);
coverImage.alpha = 0.0f;
}];
//there is subtype property which provides transition from right or from left. You have to just set this property as given below
animation.subtype = kCATransitionFromRight;
Related
I have created View which displays at position (0, 0, 320, 100). Now I want to make that view to come from upperside and to be set at given position I have tried this.
CATransition *transition = [CATransition animation];
transition.duration = 1.0;
transition.type = kCATransitionFromTop; //choose your animation
[bGView.layer addAnimation:transition forKey:nil];
[self.view addSubview:bGView];
But it did not worked for me.
You can adjust frames of your view in animation blocks
First add your view as subview
[self.view addSubview:bGView];
and give it a frame outside the visible screen area
bGView.frame = CGRectMake(0,-150,320,100);
and then fire animation to bring it from upside
[UIView animateWithDuration:2.0
animations:^{
bGView.frame = CGRectMake(0,0,320,100);
}
completion:^(BOOL finished){
;
}];
Everything is ok. Except a fact that animation should be added in superview, so it should be like:
[self.view.layer addAnimation:transition forKey:nil];
You can try view block animation
[UIView animateWithDuration:0.7f animations:^{
bGView.frame = CGRectMake(0.0f, 200.0f, 320.0f, 100.0f);//Some frame
}];
anyone know how to implement something like a viewController no full screen just like when we tap in search in the iPhone ?
I want that when the user make an swipe up a viewController (half height) be showed.
No segue !! I would like that the old view controller be showed at the same time.
Thanks in advance
I Add this type of functionality for whole project, i add the QRView in window so user swip up the view from any view of project...
See the Example of my code..
Just set the UISwipeGestureRecognizer to your second view which you want to present like bellow...
CATransition *animation = [CATransition animation];
[animation setDelegate:self];
[animation setType:kCATransitionFade];
[animation setDuration:0.5];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:
kCAMediaTimingFunctionEaseInEaseOut]];
[[self.view layer] addAnimation:animation forKey:kAnimationKey];
UISwipeGestureRecognizer *swipeGesture = [[[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(addCustomBottomBar)] autorelease];
swipeGesture.numberOfTouchesRequired = 1;
swipeGesture.direction = (UISwipeGestureRecognizerDirectionDown);
[yourViewController.view addGestureRecognizer:swipeGesture];/// use your view name here, its depends on your requirement
UISwipeGestureRecognizer *swipeGestureTop = [[[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(addCustomBottomBar)] autorelease];
swipeGestureTop.numberOfTouchesRequired = 1;
swipeGestureTop.direction = (UISwipeGestureRecognizerDirectionUp);
[yourViewController.view addGestureRecognizer:swipeGestureTop];
and this bellow method called when you swipe up view...
Also just add one BOOL variable with name isViewPop and set it to NO in your viewDidLoad: method ..
-(void)addCustomBottomBar{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationTransition:UIViewAnimationTransitionNone forView:self.window cache:YES];
if (isqrcodepop) {
isViewPop=NO;
yourViewController.view.frame=CGRectMake(0, 430, 320, 70);
}
else{
isViewPop=YES;
yourViewController.view.frame=CGRectMake(0, 210, 320, 270);
[self.view bringSubviewToFront:yourViewController.view];
}
[UIView commitAnimations];
}
i hope this answer helpful for you...
If it is something simple I would add a UIView to your UIViewController just below the bottom-- then when you hit 'Search' or whatever, animate that UIView up in view with an animation block:
- (IBAction)btnTouch:(id)sender
{
[UIView animateWithDuration:0.3
delay:0.0
options: UIViewAnimationCurveEaseInOut
animations:^{
//bring searchView up
_searchView.transform = CGAffineTransformMakeTranslation(0, -80);
}
completion:^(BOOL finished){
}
];
}
Then when you are done, push the view back to its origin by using the same animation block with this line instead:
_searchView.transform = CGAffineTransformMakeTranslation(0, 0);
You could have the background view controller [self presentViewController:vc animated:YES completion:nil]; and set your front view controller's frame to half of the screen. This way, since bottom half of the front view is transparent, your background view controller will still be visible
I am trying to have a UIView slide up a quarter of the page to reveal another view underneath it (to display options), and then slide back down to cover those options. I've searched SO relentlessly but can't seem to find what I'm looking for. I do not want to use a modalview as I want to maintain the top view on the screen. In the code below, I have it sort-of working, the top level slides up, but then completely disappears (fades) out.
Any help is greatly appreciated!
Thanks.
HomeOptionsViewController *homeOptionsViewController = [[HomeOptionsViewController alloc]
initWithNibName:#"HomeOptionsViewController"
bundle:nil];
// get the view that's currently showing
UIView *currentView = self.view;
// get the the underlying UIWindow, or the view containing the current view
UIView *theWindow = [currentView superview];
UIView *newView = homeOptionsViewController.view;
//newView.frame = CGRectMake(0,300, 320,140);
newView.frame = CGRectMake(0,-10, 320,140);
// remove the current view and replace with myView1
//---[currentView removeFromSuperview];
[theWindow addSubview:newView];
theWindow.frame = CGRectMake(0,-110,320,200);
newView.frame = theWindow.bounds;
// set up an animation for the transition between the views
CATransition *animation = [CATransition animation];
[animation setDuration:0.5];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromTop];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
//[theWindow setFrame:CGRectMake(0,200,320,300)];
[[theWindow layer] addAnimation:animation forKey:#"SwitchToView1"];
Any reason why you're not using standard UIView animations? CATransitions will entirely change the view because its supposed to be a transition from one view to the other.
Have you tried something like this? You add the view you want to slide just off the bottom of the screen, then animate both frames changing. It creates a slide up effect.
newView.frame = CGRectMake(0,416,320,140);
[theWindow addSubview:newView];
[UIView beginAnimations:#"SwitchToView1" context:nil];
[UIView setAnimationDuration:0.5];
theWindow.frame = CGRectOffset(theWindow.frame, 0, -140);
newView.frame = CGRectOffset(newView.frame, 0, -140);
[UIView commitAnimations];
I am taking the "Flipped Text" imageView and rotating it while moving it downwards on the screen and adjusting the frame. I am also swapping out the image for a different, but similar image.
Everything works as indicated except for the image crossfade is still showing the original position for the fade-out instead of following the movement. This screenshot shows the original, transition and end states for the animation, and clearly shows the problem.
My code looks like this (logoImage is a UIImageView):
// Swap it
self.logoImage.image = [UIImage imageNamed:#"logo.png"];
CATransition *transition = [CATransition animation];
transition.duration = duration;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[self.logoImage.layer addAnimation:transition forKey:nil];
// Spin it
CABasicAnimation* spinAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
spinAnimation.toValue = [NSNumber numberWithFloat:6*M_PI];
spinAnimation.duration = duration;
spinAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
spinAnimation.removedOnCompletion = YES;
spinAnimation.fillMode = kCAFillModeForwards;
[self.logoImage.layer addAnimation:spinAnimation forKey:#"spinAnimation"];
// Shrink it and Move it
CGRect newFrame = [self logoFrameForInterfaceOrientation:self.interfaceOrientation];
[UIView animateWithDuration:duration
delay:0.0
options:UIViewAnimationCurveEaseOut
animations:^{
self.logoImage.frame = newFrame;
}
completion:nil];
How can I make the crossfade of the image swap happen in place?
Try swapping the image in the completion block. (currently nil)
edit:
If they are substantially different, you can use a second UIImageView. Fade one out while you fade one in. You can either do this while they are translating, or wait for the "shrunken" original to arrive and fade it out while the "better" smaller version fades in.
Then remove the unneeded extra view in the completion block of that animation.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
iPhone CATransition adds a fade to the start and end of any animation?
I'm trying to duplicate the "slide up from the bottom" animation that [UIViewController presentModalViewController:animated:] performs but without calling it because I don't want a modal view.
The below core animation code comes very close but appears to be changing transparency values of the views during it. At the start of the animation you can partially see through the view sliding up. By the middle/end of the animation the view we are sliding over is fully transparent so we can see behind it. I'd like both to remain fully opaque during this animation.
Any ideas on how to stop transparency changes in this code or to otherwise get the "slide up animation" I am looking for without requiring a modal view?
UIViewController *nextViewController = [[UIViewController alloc] autorelease];
nextViewController.view.backgroundColor = [UIColor redColor];
CATransition *animation = [CATransition animation];
animation.duration = 3.5;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromTop;
[self.navigationController pushViewController:nextViewController animated:NO];
[self.navigationController.view.layer addAnimation:animation forKey:nil];
The simplest method is to simply use UIView beginAnimations/commitAnimations block. You can adjust the duration and curve by reviewing the docs.
{
// Adjust for orientation as necessary.
view.frame = CGRectMake(0,
-480,
320,
480);
[UIView beginAnimations:nil context:nil];
view.frame = CGRectMake(view.frame.origin.x,
0,
view.frame.size.width,
view.frame.size.height);
[UIView commitAnimations];
}
Docs here:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIView_Class/UIView/UIView.html
Instead of the CATransition, you could instead try using a CABasicAnimation that animates the position from off the top of the screen into the desired position.