Animating UIView inside of a UIScrollView with autolayout constraints - ios

I have a UIScrollView placed inside of a ViewController to which I have given AutoLayout Constraints and all of them are satisfied.
The scrollView contains around 20 UIButton subviews. I have given autolayout constraints to them also and they all are also satisfied.
What I need to do is I want to animate those buttons when the view is first launched. This is my code for animation
for (UIButton *button in [scrollView subviews]) {
CGRect mainFrame = [button frame];
[UIView animateWithDuration:0.0 animations:^{
button.frame = CGRectMake(button.center.x, button.center.y, 0, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 delay:0.5 usingSpringWithDamping:0.3 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseOut animations:^{
button.frame = mainFrame;
} completion:^(BOOL finished) {
}];
}];
}
The subviews are not animating when I use this code.
But when I set the
[button setTranslatesAutoresizingMaskIntoConstraints:YES];
it works. But this time I get the error Unable to Simultaneously Satisfy constraints.
Is there any other method to do it or should I just ignore the error message and just go with it?

Don't modify the frames when using Auto Layout.
You should modify the constraints to achieve the animation and call [yourView layoutIfNeeded] in the animation block.
It works by setting setTranslatesAutoresizingMaskIntoConstraints because then setting the frame causes constraints to be created. These finally conflict with your already existing constraints and cause the constraint warning.
Alternatively you can use the view's transform property and animate that one to achieve your desired effect, since I think you only want something like a presentation animation. Then you don't have to modify the constraints.
You would do something like:
[UIView animateWithDuration:1.0 animations:^{
button.transform = CGAffineTransformMakeTranslation(10.0, 10.0);
}];

You should animate the values for the constants in the constraints instead of the frame for each button. Create internal properties for each constraint you would like to animate and then use UIView's animateWithDuration. For example:
self.myConstraint.constant = 10;
[button setNeedsUpdateConstraints];
[UIView animateWithDuration:1 animations:^{
[button layoutIfNeeded];
}];

Related

Subviews do not resize properly when animating constraints

I need to change size and position of a subview (call it playerView) of a view of a view controller. I have created properties for constraints I need to change. But when I animate the changes, only playerView is animated, but all of it's subviews are not: their size is changed instantly.
Here's the text:
self.playerViewTop.constant = screenHeight - MinizedPlayerTopOffset;
self.playerViewLeading.constant = MinimizedPlayerOffset;
self.playerViewWidth.constant = MinimizedPlayerWidth;
self.playerViewHeight.constant = MinimizedPlayerHeight;
[UIView animateWithDuration: 2.0 animations: ^
{
[self.view layoutSubviews];
}];
I do not understand why that happens since I use autoLayout. Please help.
You need to call layoutIfNeeded() in the animations block, not layoutSubviews().
(You should actually never call layoutSubviews() yourself. It's a method called by the system during a layout pass and only intended for that purpose.)
[self.view layoutIfNeeded];
[self.subView setNeedsUpdateConstraints];
[self.subView updateConstraintsIfNeeded];
[UIView animateWithDuration:1.0f delay:0.0f
options:UIViewAnimationOptionLayoutSubviews animations:^{
[self.view layoutIfNeeded];
} completion:nil];

Changing tableview frames with animation using autolayout

i am trying to change tableview frame by using autolayout in animationWithDuration block. Like That;
[UIView animateWithDuration:0.3f animations:^{
weekdayOffersVerticalConstraint.constant = 80;
[headerView layoutIfNeeded];
[weekdayTableView layoutIfNeeded];
self.isTableViewSmall = YES;
} completion:^(BOOL finished) {
}];
my tableview's frames are changing with this code block, but when i scroll to down, cells coming from left side to right side, i thought it is about with [weekdayTableView layoutIfNeeded]; layoutIfNeeded effect to all subviews. How can i obstruct to effect to my tableview's cells?
Sorry for my bad english, Thank you very much for your answers and advices.
Call layoutIfNeeded before you begin the animation to update the constraints:
[headerView layoutIfNeeded];
[weekdayTableView layoutIfNeeded];
[UIView animateWithDuration:0.3f animations:^{
weekdayOffersVerticalConstraint.constant = 80;
[headerView layoutIfNeeded];
[weekdayTableView layoutIfNeeded];
self.isTableViewSmall = YES;
} completion:^(BOOL finished) {
//
}];
You probably also don't want to set that BOOL property inside the animation block unless you have a method that overrides it intentionally during the animation.

UIView transform work strange

I use this code to move my view
[UIView animateWithDuration:0.3 animations:^{
[MyView setTransform:CGAffineTransformMakeTranslation(260, 0)];
} completion:^(BOOL finished) {
}];
MyView is a subview of self.view
I want to move it to right with 260
but it will first move to left with 130 and no animate
and then move to right with 260 and animate
I don't know why MyView move to left first?
The problem is that you are using auto layout. For a simple animation, trying turning off auto layout in storyboard.
Your animation should work then as expected.
I guess the problem is that the MakeTranslation function is making your view reset it's position before animating to the new transform.
Try this:
[UIView animateWithDuration:0.3 animations:^{
[MyView setTransform:CGAffineTransformTranslate(myView.transform, 260, 0)];
} completion:^(BOOL finished) {
}];

Make 2 animations in Custom View

Im creating a custom view, it contains methods like Refresh,*LayoutSubviews*, following this tutorial
I want a label to be animated growing, to it's full width and then back to 0 width. Im using this code in "refresh" method:
[UIView animateWithDuration:1.3 animations:^{
CGRect frame = CGRectMake(50, 15, 140, 20);
[labelFav setFrame:frame];
} completion:^(BOOL finished) {
//[labelFav setHidden:YES];
[UIView animateWithDuration:1.3 animations:^{
CGRect frame = CGRectMake(50, 15, 0, 20);
[labelFav setFrame:frame];
}];
}];
The code works on any other view, but since this is a Custom view by some reason the completion block is not executing.
What happens is that it only does the first block. I set a breakpoint in the "completion" block and it stops there but the animation doesnt happen. I tried to setHidden the label and still it doesnt happen.
Any ideas?
remove auto layout from you Interface builder main screen.
your view may be changing it's frame, but auto layout is (possibly) forcing it elsewhere...
Another way to solve problem. Tested.
[UIView animateWithDuration:1.3 animations:^{
CGRect frame = CGRectMake(50, 15, 140, 20);
[labelViewForFav setFrame:frame];
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.3 animations:^{
CGRect frame = CGRectMake(50, 15, 0, 20);
[labelViewForFav setFrame:frame];
} completion:^(BOOL finished) {
}];
}];
Problem is When you make UIlabel width less than its current width. Animation is not done properly. Animation not visible just jump to final frame.
to solve it Put your label in a view change the size of this view and it will work properly.

animateWithDuration setFrame not working

Hi I have piece of code which only one line is not working...
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[label setFrame:CGRectMake(0, 0, frame.size.width, kStandardLabelHeight)]; //working
[self.currentLabel setFrame:CGRectOffset(self.currentLabel.frame, frame.size.width, 0)]; //not working
[self.currentLabel setAlpha:0.0f]; //working
} completion:^(BOOL finished) {
[self.currentLabel removeFromSuperview];
self.currentLabel = label;
}];
I'm running out of ideas what is wrong...
What I find out is: if I turn off "Use Auto Layout", then it magically working, so this issue is connected with auto layout.
After a search, I find this: http://weblog.invasivecode.com/post/42362079291/auto-layout-and-core-animation-auto-layout-was
Add constraint outlet mapping for your view, then instead of using setFrame, updating constraints will do the trick!
Below is my final implementation (_topConstraint is the top vertical space constraint of table view):
- (IBAction)switchButtonTouched:(id)sender
{
if (_topConstraint.constant <= 0)
_topConstraint.constant = _buttonView.frame.size.height;
else
_topConstraint.constant = 0;
[_tableView setNeedsUpdateConstraints];
[UIView animateWithDuration:0.5f animations:^(void){
[_tableView layoutIfNeeded];
} completion:^(BOOL finished){
}];
}
Frame must be a CGRect with 4 parameters: (xPosition,yPosition,width,height). Use CGRectMake for set frame
self.currentLabel.frame = CGRectMake(100, 100, self.currentLabel.frame.size.width, self.currentLabel.frame.size.height)
You set 0.3 sec the animation duration, and when it s end you remove it from the view. This is too short. set the duration for example 2, and you will see that your label is moving .
Sometimes you should set frames for animating views also after animation, for example in completion block, try something like that
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[label setFrame:CGRectMake(0, 0, frame.size.width, kStandardLabelHeight)]; //working
[self.currentLabel setFrame:CGRectOffset(self.currentLabel.frame, frame.size.width, 0)]; //not working
[self.currentLabel setAlpha:0.0f]; //working
} completion:^(BOOL finished) {
self.frame = currentLabelFrame;
label.frame = label.frame;
[self.currentLabel removeFromSuperview];
self.currentLabel = label;
}];
If your issue is neither Autolayout related, or the others listed here, there is also another possible problem that turned out to be my issue. I'm simultaneously running a UIView transition (transitionFromView:toView:) on views that take up the same screen space (Different superviews, not related, other than positioning in the superview of the overarching view controller).
My code looked like this:
[UIView transitionFromView:self.someView
toView:self.someOtherView
duration:0.6f
options:UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionShowHideTransitionViews
completion:NULL];
[UIView animateWithDuration:0.3
delay:0.0 options:UIViewAnimationOptionCurveEaseOut
animations:^{
[self.someThirdView setFrame:someFrame]; //not working
[self.someThirdView setAlpha:1.0f]; //working
} completion:nil];
The frame changed, but it popped to the new frame rather than animating. I'm guessing this is an internal iOS issue. As soon as I removed the "transitionFromView:..." call, the frame animation worked fine.
My solution for now has been to move the second animation into the completion block of the transitionFromView. It's not perfect, as the two animations should have lined up, but it is a passable solution for now.

Resources