I have the following code to shrink a UIView from left to right and remove it from super view after the animation finished:
UIView* coverView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 300, 50)];
UIImageView* imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"swipe_rl.png"]];
[imageView setContentMode:UIViewContentModeScaleToFill];
[imageView setFrame:coverView.bounds];
[coverView addSubview:imageView];
[coverView setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
coverView.clipsToBounds = YES;
[self.view addSubview:coverView];
CGRect frame = coverView.frame ;
[UIView animateWithDuration:5.0 animations:^{
[coverView setFrame:CGRectMake(frame.origin.x + frame.size.width, frame.origin.y, 0, frame.size.height)];
} completion:^(BOOL finished){
[coverView removeFromSuperview];
}];
However, the left part of the picture stays and the right part of the picture disappears as you can see in the pictures. For a specific purpose, I want the left part disappears and the right part stays. How can I do it?
For those who want to know why I want this:
- Basically, I want a display-from-left-to-right animation (It means you have a picture and the left of the picture appears first and the the middle and the whole picture appears)
- I do this by adding a second view above the first picture and then shrink the second view from left to right. The first view will then be revealed from left to right.
- Look at http://i1289.photobucket.com/albums/b510/yenmach/right_to_left_zps80b9e9bb.jpg and http://i1289.photobucket.com/albums/b510/yenmach/left_to_right_zps9214dc4a.jpg
//try this.......
CGRect frame = coverView.frame ;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:5.0];
[UIView setAnimationDelay:0];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
imageView.frame = CGRectMake(frame.origin.x - 2*frame.size.width,imageView.frame.origin.y, frame.size.width, frame.size.height);
coverView.frame = CGRectMake(frame.origin.x + frame.size.width, frame.origin.y, frame.size.width, frame.size.height);
[UIView commitAnimations];
Not exactly a solution but a workaround, If you are going to be using this with a consistent background (ideally a solid colour) you could just have another view animate overtop of the image view and then remove both once the animation is done.
Try changing UIImageView contentMode property,
[imageView setContentMode: UIViewContentModeRight];
I was having same kind of requirement and this worked fine for me at that time.
Related
Example screen capture:
What is a better way to animate the resizing of a UIView that includes subviews?
My current method:
In the screen capture, the parent UIView (orange) has a subview UILabel (yellow + autoresizing). animateWithDuration is animating the resizing of the parent UIView's frame. The problem with this method is it does not animate the resizing of the subview. It abruptly changes, where it should scale animatedly.
Is explicitly animating the subview best, or is there a more efficient method? (e.g. CGAffineTransform?)
Sample code:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.parentView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 200, 200)];
self.parentView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:self.parentView];
self.childLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 180, 180)];
self.childLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleHeight;
self.childLabel.backgroundColor = [UIColor yellowColor];
[self.parentView addSubview:self.childLabel];
[NSTimer scheduledTimerWithTimeInterval:2
target:self
selector:#selector(randomizeParentViewSize)
userInfo:nil
repeats:YES];
}
- (void)randomizeParentViewSize {
CGFloat width = arc4random_uniform(100) + 50;
CGFloat height = arc4random_uniform(100) + 50;
[UIView animateWithDuration:1.5f
delay:0.0f
options:0
animations:^{
self.parentView.frame = CGRectMake(10, 50 + height, width, height);
}
completion:^(BOOL finished) {
}];
}
I Guess Your Yellow SubView is UILabel ?
When UILabel change frame size in UIViewAnimation will scale Immediately
unless you use the CGAffineTransformScale
some example
when
[self.view addSubview:view_parent];
[view_parent addSubview:view_component];
if both view_parent and view_component is UIView
[UIView animateWithDuration:2.0 animations:^{
[view_parent setFrame:CGRectMake(0, 20, 160, 160)];
[view_component setFrame:CGRectMake(20, 20, 80, 80)];
}];
is work fine
but when view_parent is UIView and view_component is UILabel
you need do something like ...
[UIView animateWithDuration:2.0 animations:^{
[view_parent setFrame:CGRectMake(0, 20, 160, 160)];
view_component.transform = CGAffineTransformScale(view_component.transform, 0.5, 0.5);
[view_component setFrame:CGRectMake(20, 20, 80, 80)];
}];
Wish help ~
To animate the view and also the subview you could use this code:
[UIView animateWithDuration:0.5f animations:^{
self.testView.transform = CGAffineTransformMakeScale(0.5, 0.5);
}];
More Info
You can't use frame, bounds, or center if you are also animating things using CGAffine, So if you also need to move the view use something like this:
CGAffineTransform transform = CGAffineTransformMakeTranslation(150,400);
transform = CGAffineTransformScale(transform, 0.5, 0.5);
Use UIViewAnimationOptionLayoutSubviews:
Add proper leading, trailing, top and bottom constraints on the subview.
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionLayoutSubviews animations:^{ //resize the superview
} completion:nil];
I am trying to animate a UIView with a popover kind of effect, and I want the background of the UIView to have that ios7 style blur as the background.
Making this slightly more complicated, I'd also like to be able to apply a transform to the popover and its contents by dragging the corner, much like a chat in the Facebook app.
Now, my approach is basically this: take a blurred snapshot of the window, add a UIImageView as a subview of the controller's view, mask that imageView with the UIView popover. However, I am then finding that I can not interact with that UIView at all - subviews don't show up, gesture recognizers don't fire, etc.
Here is my code:
UIWindow *mainWindow = [[UIApplication sharedApplication] keyWindow];
CGRect frame = [self.tableView.tableHeaderView convertRect:self.displayView.frame toView:self.view];
UIView *view = [UIView new];
view.frame = frame;
view.backgroundColor = [UIColor blackColor];
view.layer.cornerRadius = 10.f;
view.tag = 100;
//Take the snapshot
UIGraphicsBeginImageContextWithOptions(mainWindow.rootViewController.view.bounds.size, YES, [[UIScreen mainScreen] scale]);
[mainWindow drawViewHierarchyInRect:mainWindow.bounds afterScreenUpdates:NO];
UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImage *blur = [screenImage applyDarkEffect];
UIImageView *imageView = [[UIImageView alloc] initWithImage:blur];
imageView.frame = self.view.bounds;
[self.view addSubview:imageView];
[self.view addSubview:view];
imageView.layer.mask = view.layer;
//Animate the view
[UIView animateKeyframesWithDuration:1.4f delay:0.0f options:UIViewKeyframeAnimationOptionCalculationModeCubic
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.75 animations:^{
view.frame = CGRectInset(mainWindow.frame, 30, 40);
}];
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.05 animations:^{
view.frame = CGRectInset(mainWindow.frame, 20, 30);
}];
[UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.20 animations:^{
view.frame = CGRectInset(mainWindow.frame, 25, 35);
}];
} completion:^(BOOL finished) {
//This does nothing.
UIView *test = [UIView new];
test.frame = CGRectMake(100, 100, 100, 100);
test.backgroundColor = [UIColor redColor];
[view addSubview:test];
}];
Any insights in to why this isn't working? Or alternative approaches?
One alternate approach I thought of would be to roll my own keyframe animation: Add the imageView as a subview of the 'view', use an update timer, and calculate the frame of the view for each frame, offsetting the image view appropriately. But I was hoping there would be an easier way around this issue.
I have a textfield which has a UIDatePicker instead of a keyboard. I also made a toolbar not connected with the datePicker but that just appears when the textfield is tapped. The problem is the animations. The datePicker slides up nicely, but the toolbar just appears before the animation of the datePicker is done. This makes the whole thing look horrible. How would I set the animation to match the datePickers? I have no experience with animations and none of the other posts did any good for me.
EDIT
Based on Tareks answer I was able to set the animation to slide up by doing the following.
First, Setting the toolbar to bottom of screen
pickerBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 480, 320, 44)];
Seconds, Changing the location of the toolbar in the animation
[UIView animateWithDuration:.4 animations:^(void) {
CGRect rect = CGRectMake(0, 224-46, 320, 44);
[pickerBar setFrame:rect];
you can use the inputAccessoryView for that reason.
textField.inputAccessoryView = [[UIToolbar alloc] init...
You can use code below to show your toolBar:
[UIView animateWithDuration:2.0 animations:^(void) {
toolBar.alpha = 1;
}];
EDIT:
toolBar.alpha should be 0.
For Sliding:
It is gonna something like:
[UIView animateWithDuration:2 animations:^{
int newY = yVal; // you can play with this newY.
CGRect frame = toolBar.frame;
frame.origin.y = newY;
toolBar.frame = frame;
}];
I don't understand what happening with a simple code. I want to resize the width of an UITextField but when I do it, it also changes its origin.x. I tried many configurations but I can't find a solution.
The textfield is in an UIView:
containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
containerView.backgroundColor = [UIColor whiteColor];
textfield = [[UITextField alloc] initWithFrame:CGRectMake(5,20,200,30)];
textfield.leftViewMode = UITextFieldViewModeAlways;
And here is the code for changing its width:
[UIView beginAnimations:nil context:nil];
textfield.bounds = CGRectMake(textfield.bounds.origin.x,
textfield.bounds.origin.y,
textfield.bounds.size.width + 110,
textfield.bounds.size.height);
[UIView commitAnimations];
Each time, origin.x changes to something like -55 (but NSLog prints 0). Do you have any idea? I would like to maintain always the same origin.x.
Thanks for your help.
Instead of changing the bounds, try changing the frame:
[UIView beginAnimations:nil context:nil];
textfield.frame= CGRectMake(textfield.frame.origin.x,
textfield.frame.origin.y,
textfield.frame.size.width + 110,
textfield.frame.size.height);
[UIView commitAnimations];
From the docs:
Changing the bounds size grows or shrinks the view relative to its center point
And this seems to be the problem in your case.
I wan't to animate a view that's shaped as an arrow, and I want it to animate from left to right, left to right and so on..
This code below is not working, I'm guessing I need a path, but don't know how to do that in a UIView block animation.
[UIView animateWithDuration:.5 delay:0 options:UIViewAnimationOptionRepeat animations:^{
controller.view.frame = frame1;
controller.view.frame = frame2;
} completion:^(BOOL finished) {
}];
You can use UIViewAnimationOptionAutoreverse option, try the code below:
UIView * testView = [[UIView alloc] initWithFrame:CGRectMake(20.0f, 100.0f, 300.0f, 200.0f)];
[testView setBackgroundColor:[UIColor blueColor]];
[self.view addSubview:testView];
[UIView animateWithDuration:0.3f
delay:0.0f
options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse
animations:^{
[testView setFrame:CGRectMake(0.0f, 100.0f, 300.0f, 200.0f)];
}
completion:nil];
[testView release];
It'll repeat move from right to left, left to right, ... smoothly.
Assuming that frame1 is the starting position and frame2 is the end position before repeat.
The problem is that the animation is calculated at the end of the runloop therefore the frame1 is ignored and the view is simply moved to frame2. If you move the setting of frame1 outside of the block then it should work fine. If you want the animation to play back and forward you will need to make it autoreverse with UIViewAnimationOptionAutoreverse