I am building a uicollectionview that will have rows of cells. Each cell will contain a UIButton. I want to be able to 'zoom into' the UIButton on tap.
I have discovered this code for zooming in on self.view, but I am not sure how to make it properly zoom in on the center of the tapped UIButton. Right now, it zooms in towards the bottom right corner of the screen.
Any suggestions on properly centering in on the tapped button?
-(void)didTapButton:(UIButton*)sender{
CGFloat s = 3;
CGAffineTransform tr = CGAffineTransformScale(self.view.transform, s, s);
CGFloat h = sender.frame.size.height;
CGFloat w = sender.frame.size.width;
[UIView animateWithDuration:2.5 delay:0 options:0 animations:^{
self.view.transform = tr;
self.view.center = CGPointMake(w*s/2,h-h*s/2);
} completion:^(BOOL finished) {}];
}
If you're using auto layout, you won't be able to use view animation in the way you're doing, because layout is triggered by the transform and keeps resetting the frame. This could explain why the zoom seems to expand the view down and to the right rather than from the center. (You might like to see my essay on the struggle between auto layout and view transforms.)
Related
I am trying to slide an image from off the screen onto the screen from the left and stopping at the center point in the view. I would like to keep it contrained at the y position if possible (IE image is set in story board).
I am reading this tutorial, but it is in swift and I cannot make the same assignments in objective-c.
http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial
It says to set the view off the screen (in swift):
heading.center.x -= view.bounds.width
Then animate (in swift):
UIView.animateWithDuration(0.5, animations: {
self.heading.center.x += self.view.bounds.width
})
However I cannot manipulate center.x in objective c like they are doing in swift.
I have tried adjusting the initial position of the image in viewWillAppear by changing the bounds with no luck.
EDIT:
Here is what I am trying to get it positioned off the screen:
self.heading.center = CGPointMake(-200, self.heading.center.y);
No matter how negative I set the x position the view will still appears on the screen. Actually no matter what I set x position to the view does not move in the x direction at all. I have also tried to set the frame
The x coordinate of the view's center is not directly assignable in Objective-C. Instead, try setting the center point as whole. In your example, this could look something like this:
[UIView animateWithDuration:0.5 animations:^{
CGFloat newCenterX = self.heading.center.x + self.view.bounds.size.width;
self.heading.center = CGPointMake(newCenterX, self.heading.center.y);
}];
Try to use CGAffineTransformMakeTranslation:
[UIView animateKeyframesWithDuration:5
delay:0
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
view.transform = CGAffineTransformMakeTranslation(550, -40);
}];
I wasn't quiet sure how to word this, but here goes.
I have a couple of UIControls that I am sliding into the view with in the viewWillAppear method. The UIControls animate correctly as well as my graphics inside those UIControls, but the UITextField is not. It should be starting to the right 50 points with an alpha of 0 fading into 1. Instead the UITextFields does this odd masking and from the other direction (left to right instead of right to left, as well as a bit higher on the y axis). Does this have something to do with the UITextField not being ready for display when I start my animation? Below is the code.
nameOfBillViewConstraint.constant = 50;
nameOfBillView.alpha = 0.0;
[UIView animateWithDuration:10
delay: 0.5
options: UIViewAnimationOptionCurveEaseIn
animations:^{
nameOfBillViewConstraint.constant = 10;
nameOfBillView.alpha = 1.0;
[self.view layoutIfNeeded];
}
completion:nil];
Thanks for your help on this.It's more of a visual problem, but I wasn't sure how to display that here...
i wonder if u could help out to fix my issue here.
For example i have 2 UIViews inside the UIScrollView, let say the first UIView i've changed the size of its height and at the same time i change the y axis of the second UIView as well through this animation method. here's my code:
[UIView animateWithDuration:0.1f animations:^{
CGRect rect = informationView.frame;
rect.size.height += 100.f;
informationView.frame = rect;
CGRect rectAddView = additionalView.frame;
rectAddView.origin.y += 100.f;
additionalView.frame = rectAddView;
}];
After those have been rendered (the height and Y axis). It works fine. And i changed the content size of that UIscrollview so it can be scroll it down. Here's the problem when i try to scroll down, surprisingly the height of the First UIView and Y axis of the second UIView are back like from the beginning. i don't how & why. So i just need wise explanation if there's somebody could help me here. Thank you
I was trying to mimic the yahoo weather app screen transition between cities, I couldn't figure out what transition it is. Any clue?
I really appreciate you time.
Thanks
Edit:
I have slideView ctrler which has a subview. The sliderview has an image and the subview has text. When I make a swipe, the text view with text must be moving and dragging way the view ctrler with it at a slower rate and this intern should start dragging in the next view ctrler which is an instance of slider Ctrler.
There is no built-in transition that does this for you (I assume you're talking about the images that are transitioning their frame/center at a different rate than the view itself). You'd probably have to write it yourself. Some basic familiarity with gesture recognizers and view animation is needed.
The basic effect is by simultaneously adjusting the center property for two image views as you change the frame of those views (or their super views). (Or, you can achieve this by having image views whose contentMode is UIViewContentModeCenter and just changing the frame.) I'd suggest you start with some simple tests of the effect and build from there.
For example, I created a scene that has two image views, whose autolayout constraints were defined as follows:
H:|[leftImageView][rightImageView]|
V:|[leftImageView]|
V:|[rightImageView]|
I then defined a width constraint for the leftImageView, and hooked it up to an IBOutlet for that constraint, e.g. leftImageWidthConstraint. I then have a UIPanGestureRecognizer that could handle the gesture, simply changing this leftImageWidthConstraint accordingly (and with auto layout, the rest of the frame is calculated automatically for me from that):
- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
CGPoint translate = [gesture translationInView:gesture.view];
static CGFloat width;
if (gesture.state == UIGestureRecognizerStateBegan)
{
width = self.leftImageWidthConstraint.constant;
}
CGFloat newWidth = width + translate.x;
if (newWidth < 0)
newWidth = 0;
else if (newWidth > self.view.bounds.size.width)
newWidth = self.view.bounds.size.width;
self.leftImageWidthConstraint.constant = newWidth;
// if you let go, animate the views to their final position
if (gesture.state == UIGestureRecognizerStateEnded)
{
// if more than half way, set left view's target width to take up full width,
// otherwise set left view's target width to zero
if (newWidth > (self.view.bounds.size.width / 2.0))
newWidth = self.view.bounds.size.width;
else
newWidth = 0;
// animate the changing of the constraint (and thus the `frame`) accordingly
self.leftImageWidthConstraint.constant = newWidth;
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
}
Thus, as I pan across, the two images are centered within their clipped frames:
This is a very basic implementation of the idea. There are, though, a ton of implementation details (custom container vs subviews, autolayout vs not, etc.), so until you answer some of those questions, it's going to be hard to be more specific.
It is not default but i achieved similar to it in my old app
Register gesture on your view and on detection set isFromLeftSide accordingly
Call following. do fine tune this as per your requirements
[self.view addSubview:mySlidingView];
mySlidingView.frame = // set offscreen frame, in the direction you want it to appear from depending on flag isFromLeftSide
[UIView animateWithDuration:8.0
animations:^{
mySlidingView.frame = // desired end location
}];
I am trying to simulate the keyboard appear animation, only using a custom subview that will show the user three buttons. Is there any way I can accomplish this with storyboard (i.e. without having to programmatically create a subview)?
Quick Answer
Yes, although you will programmatically have to set some of the subviews properties. What you want to do is have your UIViewController call:
[UIView animateWithDuration:animations:completion:]
Detailed Example
in side of whatever method should bring up the keyboard try the following:
CGFloat windowWidth = self.mainView.frame.size.width;
CGFloat windowHeight = self.mainView.frame.size.height;
// center myCustomSubview along the x direction, and put myCustomSubview just below the screen when UIViewController initially gets onto the screen
CGPoint offScreenBelow = CGPointMake(windowWidth/2, windowHeight + (myCustomView.frame.size.y/2));
CGPoint onScreen = CGPointMake(windowWidth/2,windowHeight/2);
// change the second argument of the CGPointMake function to alter the final height of myCustomSubview
// start myCustomSubview offscreen
myCustomSubview.center = offScreenBelow;
// make sure to add myCustomSubview to the UIViewController's view's subviews
[self.view addSubview:myCustomSubview];
float duration = 1.0; // change this value to make your animation slower or faster. (units in seconds)
// animate myCustomSubview onto the screen
[UIView animateWithDuration:duration
animations:^{
myCustomSubview.center = onScreen;
}
completion:^(BOOL finished){
// add anything you want to be done as soon as the animation is finished here
}];
make sure you method is being called after 'viewDidAppear:' or inside of it.
when you want to get animate myCustomSubview back down off screen make sure to do the following in your UIViewController:
// set offscreen position same way as above
CGFloat windowWidth = self.mainView.frame.size.width;
CGFloat windowHeight = self.mainView.frame.size.height;
CGPoint offScreenBelow = CGPointMake(windowWidth/2, windowHeight + (myCustomView.frame.size.y/2));
// myCustomSubview is on screen already. time to animate it off screen
[UIView animateWithDuration:duration // remember you can change this for animation speed
animations:^{
myCustomSubview.center = offScreenBelow;
}
completion:^(BOOL finished){
[myCustomSubview removeFromSuperView];
}];
If Your Subview Is Not Showing Up
As always when dealing with subviews, make sure the frame is properly set, the subview has been added to a superview with addSubview:, the subview is not nil (and that it is properly initialized), and that neither the alpha nor opacity properties of the subview are set to 0.