Animate intrinsicContentSize changes - cocoa-touch

I have a UIView subclass that draws a circle whose radius changes (with nice bouncy animations). The view is deciding the size of the circle.
I want this UIView subclass to change its frame size to match the animated changes to the circle radius, and I want these changes to modify any NSLayoutConstraints connected to the view (so that views that are constrained to the edge of the circle will move as the circle resizes).
I understand that implementing -(CGSize)intrinsicContentSize and calling invalidateIntrinsicContentSize when the radius changes will tell constraints to update, but I cant figure out how to animate the changes to intrinsicContentSize.
Calling invalidateIntrinsicContentSize from within a [UIView animateWith... block just instantly updates the layout.
Is this even possible, and is there a workaround/better approach?

invalidateIntrinsicContentSize works well with animations and layoutIfNeeded. The only thing you need to consider is, that changing the intrinsic content size invalidates the layout of the superview. So this should work:
[UIView animateWithDuration:0.2 animations:^{
[self invalidateIntrinsicContentSize];
[self.superview setNeedsLayout];
[self.superview layoutIfNeeded];
}];

Swift version of #stigi's answer which worked for me:
UIView.animate(withDuration: 0.2, animations: {
self.invalidateIntrinsicContentSize()
self.superview?.setNeedsLayout()
self.superview?.layoutIfNeeded()
})

Width / height constraint doesn't help? Keep reference of this constraint and ...
[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:myViewInitialWidth];
... when you do want to animate myView resize, do this ...
self.viewWidthConstraint.constant = 100; // new width
[UIView animateWithDuration:0.3 animations:^{ [view layoutIfNeeded]; }];
... do the same thing for the height.
Depends on your other constraints, maybe you will be forced to raise priority of these two constraints.
Or you can subclass UIView, add - (void)invalidateIntrinsicContentSize:(BOOL)animated and fake it by yourself. Get new size from - (CGSize)intrinsicContentSize and animate it by animating width / height constraints. Or add property to enable / disable animations and override invalidateIntrinsicContentSize and do it inside this method. Many ways ...

In the code below, intrinsic class is the class that has just changed it's size on changing a variable. To animate the intrinsic class only use the code below. If it impacts other objects higher up the view hierarchy then replace self.intrinsic class with the top level view for setNeedsLayout and layoutIfNeeded.
[UIView animateWithDuration:.2 animations:^{
self.intrinsicClass.numberOfWeeks=8;
[self.intrinsicClass setNeedsLayout];
[self.intrinsicClass layoutIfNeeded];
}];

None of this has worked for me. I have a UILabel which I am setting with a NSAttributedString. The text is multiline and wrapping on word boundaries. Therefore the height is variable. I've tried this:
[UIView animateWithDuration:1.0f animations:^{
self.label = newLabelText;
[self.label invalidateIntrinsicContentSize];
[self.view setNeedsLayout];
[self.view layoutIfNeeded];
}];
And a number of variations. None work. The label immediately changes it's size and then slides into it's new position. So the animation of the labels position ons screen is working. But the animating of the label's size change is not.

Well for Swift 4/3 this works and I think this is best practise. If you have a UIView with a UILabel in it and the UIView adapts the frame from the UILabel, use this:
self.theUILabel.text = "text update"
UIView.animate(withDuration: 5.0, animations: {
self.theUIView.layoutIfNeeded()
})
The normal self.view.layoutIfNeeded() will work most of the time as well.

Related

Animating an image view to slide upwards

I am attempting to make an image view (logo below) slide upwards by 100 pixels. I am using this code, but nothing happens at all:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3];
logo.center = CGPointMake(logo.center.x, logo.center.y - 100);
[UIView commitAnimations];
This code is in the viewDidLoad method. Specifically, the logo.center = ... is not functioning. Other things (like changing the alpha) do. Maybe I'm not using the right code to slide it upwards?
For non-autolayout storyboards/NIBs, your code is fine. By the way, it's now generally advised that you animate using blocks:
[UIView animateWithDuration:3.0
animations:^{
self.logo.center = CGPointMake(self.logo.center.x, self.logo.center.y - 100.0);
}];
Or, if you want a little more control over options and the like, you can use:
[UIView animateWithDuration:3.0
delay:0.0
options:UIViewAnimationCurveEaseInOut
animations:^{
self.logo.center = CGPointMake(self.logo.center.x, self.logo.center.y - 100);
}
completion:nil];
But your code should work if you're not using autolayout. It's just that the above syntax is preferred for iOS 4 and later.
If you're using autolayout, you (a) create an IBOutlet for your vertical space constraint (see below), and then (b) you can do something like:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
static BOOL logoAlreadyMoved = NO; // or have an instance variable
if (!logoAlreadyMoved)
{
logoAlreadyMoved = YES; // set this first, in case this method is called again
self.imageVerticalSpaceConstraint.constant -= 100.0;
[UIView animateWithDuration:3.0 animations:^{
[self.view layoutIfNeeded];
}];
}
}
To add an IBOutlet for a constraint, just control-drag from the constraint to your .h in the assistant editor:
By the way, if you're animating a constraint, be sensitive to any other constraints that you might have linked to that imageview. Often if you put something right below the image, it will have its constraint linked to the image, so you may have to make sure you don't have any other controls with constraints to your image (unless you want them to move, too).
You can tell if you're using autolayout by opening your storyboard or NIB and then selecting the "file inspector" (the first tab on the right most panel, or you can pull it up by pressing option+command+1 (the number "1")):
Remember, if you planning on supporting pre-iOS 6, make sure to turn off "autolayout". Autolayout is an iOS 6 feature and won't work on earlier versions of iOS.
have u try
logo.frame = CGRectMake(logo.frame.origin.x, logo.frame.origin.y - 100,logo.frame.size.width,logo.frame.size.height)

Moving a UIView

I am trying to move a UIView programmatically using the following method:
-(void)animatePlaybackLine: (int) currentBeat{
CGRect newFrame = CGRectMake(currentBeat*eighthNoteWidth, 0, eighthNoteWidth, 320);
[playbackLine setFrame:newFrame];
NSLog(#"Line animated to %i", currentBeat);
NSLog(#"New frame origin %f", playbackLine.frame.origin.x);
}
When the method is called, the NSLogs show that the variable currentBeat is incrementing as it should, and the frame of playbackLine (my UIView) appears to be moving as it should. However, the object on the screen doesn't move. I have also tried setting the bounds and the center instead of the frame, and all of them have similar results. I also tried using an animation instead of setting the frame, to no avail.
Is there something else I should be doing to make the image onscreen show the changing frame?
I'm guessing you're calling that method in a loop? iOS isn't going to redraw the screen until your code finishes executing. You can't loop like this and see iterative results.
To animate views, you should use the native support UIKit gives you. In particular, check out the Animations section in the UIView class reference.
Try this
[UIView animateWithDuration:0.3
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^{
datePickerView.frame = imageFrame;
}
completion:^(BOOL finished){
self.datePickerViewFlag = NO;
}];

Block-based animation with animated images

I have been trying create simple "block-based animation". I am using an array of images "images" here. I used this method:
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveLinear
animations:^{ imageview.animationImages = images; }
completion:nil];
However no change happens when I alter the values of parameters animateWithDuration: and delay: I want to slow down the animation but no change happens even when I change these values to 20-30. Please help.
To change images in a UIImageView, you don't have to put it inside an animation block. You have to use UIImageView's animationImages and animationDuration properties, as well as probably - startAnimating and - stopAnimating methods of the UIImageView.
Add array of images to
animationImages
of UIImageView
and give some animationDuration

How to enlarge dynamically an UILabel (label and font size)?

Im currently working on an iPhone project. I want to enlarge dynamically an UILabel in Objective-C like this:
alt text http://img268.imageshack.us/img268/9683/bildschirmfoto20100323u.png
How is this possible? I thought I have to do it with CoreAnimation, but I didn't worked. Here is the code I tried:
UILabel * fooL = //[…]
fooL.frame = CGRectMake(fooL.frame.origin.x, fooL.frame.origin.y, fooL.frame.size.width, fooL.frame.size.height);
fooL.font = [UIFont fontWithName:#"Helvetica" size:80];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:0.5];
[UIView setAnimationBeginsFromCurrentState:YES];
fooL.font = [UIFont fontWithName:#"Helvetica" size:144]; //bigger size
fooL.frame = CGRectMake(20 , 44, 728, 167); //bigger frame
[UIView commitAnimations];
The problem with this code is that it doesn't change the fontsize dynamically.
All you need to do is apply an affine transform to the UILabel object.
CGFloat scaleFactor = 2.0f;
label.transform = CGAffineTransformMakeScale(scaleFactor, scaleFactor); // Enlarge by a factor of 2.
Scaling your label as suggested by others using the transform property will work great. One thing to keep in mind is that as the label gets larger, the font is not increasing, but just the rendered text, which means it will appear "fuzzier" as it gets larger.
Just scale your Label instead of changing the fontSize.
Try this method:
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition
forView:(UIView *)view
cache:(BOOL)cache
Parameters:
transition
A transition to apply to view. Possible values are described in UIViewAnimationTransition.
view
The view to apply the transition to.
cache
If YES, the before and after images of view are rendered once and used to create the frames in the animation. Caching can improve performance but if you set this parameter to YES, you must not update the view or its subviews during the transition. Updating the view and its subviews may interfere with the caching behaviors and cause the view contents to be rendered incorrectly (or in the wrong location) during the animation. You must wait until the transition ends to update the view.
If NO, the view and its contents must be updated for each frame of the transition animation, which may noticeably affect the frame rate.
Discussion
If you want to change the appearance of a view during a transition—for example, flip from one view to another—then use a container view, an instance of UIView, as follows:
Begin an animation block.
Set the transition on the container view.
Remove the subview from the container view.
Add the new subview to the container view.
Commit the animation block.

UIView Animation animates position but not width

I'm trying to transform a UISearchBar, like in Mobile Safari: touch in the search field and it grows while the location field shrinks.
My current animation to alter the width and position of the search field only animates the position: just before it slides to the right place, it simply snaps out to the right width. Here's my code:
[UIView beginAnimations:#"searchGrowUp" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:0.5f];
[UIView setAnimationDelegate:self];
CGFloat findFieldWidth = findField.frame.size.width;
CGFloat urlFieldWidth = urlField.frame.size.width;
CGRect findFieldFrame = findField.frame;
CGRect urlFieldFrame = urlField.frame;
findFieldFrame.origin.x = findFieldFrame.origin.x - 150.0f;
findFieldFrame.size.width = findFieldWidth + 150.0f;
urlFieldFrame.size.width = urlFieldWidth - 150.0f;
urlField.frame = urlFieldFrame;
findField.frame = findFieldFrame;
[UIView commitAnimations];
I've modified this code slightly for the sake of presenting it here, but I hope this gives the gist.
Any guesses as to why this is happening would be appreciated!
Cheers,
Aaron.
I figured it out thanks to this post: Changing the size of the UISearchBar TextField?
Turns out the contents of a UISearchBar don't resize properly along with the outer layer. So you have to call -layoutSubviews: within the animation block after the frame is set on the searchbar. So the block ends like:
[findField setFrame:CGRectMake(findField.bounds.origin.y, findField.bounds.origin.y, findFieldWidth, findField.bounds.size.height)];
[findField layoutSubviews];
[UIView commitAnimations];
Props to Nick Farina!
I had the same problem when trying to animate the width of a UISearchBar.
On iOS 4 and later, I found that using UIViewAnimationOptionLayoutSubviews as an option for
+[UIView animateWithDuration:delay:options:animations:completion:]
fixed it.
The accepted answer works but according to Apple docs you "should not call this method". The clean solution is to use layoutIfNeeded method:
[UIView animateWithDuration:UINavigationControllerHideShowBarDuration
delay:0.f
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[searchBar setFrame: ...
[searchBar layoutIfNeeded];
...
Enjoy!
Sorry this is a bit old, but I was running into a similar problem.
I didn't want to use layoutSubviews because the documentation says you shouldn't call that method directly.
What I did to solve my problem was call sizeToFit on the subview within the animation block.