I'd like to use a UIKitDynamics UISnapBehaviour to spice up the animation (appearance + position change on rotation) of a button that itself is positioned in a view using Auto Layout.
I understand that while applying UIKitDynamics forces I need to disable auto-layout constraints from the button temporarily. I am thinking of the following process …
Get the target center/bounds of the button before the Auto Layout based transition happens (but after it is triggered). Save that value.
Temporarily disable all Auto Layout/constraints of the button
Apply the UISnapBehaviour. Feed it with the saved target center or bounds value from Auto Layout (from step 1).
When the UIKitDynamics animation is finished re-enable the constraints to prepare for any further layout change
Is this the right approach?
Which delegate/layout should be used for those those respective steps + how do I get the target center of a view from Auto Layout before the actual Auto Layout based animation/transition happens?
I might suggest a different approach that approximates the UISnapBehavior, but avoids trying to marry UIKit Dynamics with an auto layout where you are relying upon the auto layout engine to determine the final position of the view. (Obviously, if you knew the final destination, then you'd just suspend auto layout, snap, and when the snap was done, you'd then apply the constraints.)
For the bouncing effect as the view snaps into place, you can use animateWithDuration with usingSpringWithDamping parameter, e.g.:
// create the view
UIView *view = ...;
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
// add all of the constraints for the final position
NSDictionary *views = NSDictionaryOfVariableBindings(view);
[self.view addConstraints:...];
// animate the application of those constraints with low `withSpringWithDamping`
[UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:0 animations:^{
[view layoutIfNeeded];
} completion:nil];
If you also want some rotation as it snaps into place, you can use animateKeyframesWithDuration:
[UIView animateKeyframesWithDuration:1.0 delay:0.0 options:0 animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
view.transform = CGAffineTransformMakeRotation(M_PI_4 / 2);
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
view.transform = CGAffineTransformMakeRotation(-M_PI_4 / 4);
}];
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.125 animations:^{
view.transform = CGAffineTransformMakeRotation(M_PI_4 / 16);
}];
[UIView addKeyframeWithRelativeStartTime:0.875 relativeDuration:0.125 animations:^{
view.transform = CGAffineTransformMakeRotation(0);
}];
} completion:nil];
This isn't precisely the UISnapBehavior, but approximates it pretty closely. You can play around with the timing and amount of rotations in the key frame animation as well as the spring damping factor, too. But this illustrates one approach to get snap-like behavior using block-based animation.
Related
I have a gesture which action moves a UIView to point B from point A. How can I add a nice transition of the UIView moving from point A to point B. I am looking at making it slowly move from point A to point B. How would I do this? At the moment to move the item I set the frame to point B.
check this code and set frame what you want
[UIView animateWithDuration:0.75 animations:^{
button.frame = CGRectMake(10, 70, 100, 100);
}];
If you're using auto-layout (and you almost certainly are - it's the default) then #PinkeshGjr s solution is likely to have problems. With AutoLayout you can't manipulate a view's frame directly. At some point after moving the frame the view's constraints can snatch it back.
Instead, you want to create constraints that control the property/properties that you want to animate (x and y position in this case) and control-drag from the constraints into your view controller's header to create outlets.
Then you want to change the constant value on the constraints and call layoutIfNeeded inside your animation code. Something like this:
buttonXConstraint.constant = 100;
buttonYConstraint.constant = 100;
[UIView animateWithDuration:0.75 animations:^{
[self.button layoutIfNeeded];
}];
The code above assumes that you've created 2 constraint outlets and called them buttonXConstraint and buttonYConstraint.
You can achieve that by using animateKeyframesWithDuration or animateWithDuration:animations but it will be just a linear interpolation. If you want to have more control over the animation I recommend that you take a look at MTAnimation it's really a powerful and easy to use Lib for achieving beautiful animations
Cheers
Very nice helper method to use for animating view.
- (void) animateView:(UIView *)view ToFrame:(CGRect) frame withDuration:(float) duration withDelay:(float) startDelay
{
[UIView animateWithDuration:duration delay:startDelay options:0 animations:^{
view.frame = frame;
} completion:^(BOOL finished)
{
// Completion actions
}];
}
I have a complex autolayout which needs to adapt to rotation by removing old constraints and adding new ones.
I have a grid layout of views inside a containerView.
The problem is when I call
[UIView animateWithDuration:0.4 animations:^{
[self.containerView layoutIfNeeded];
}];
The views always animate from the position [0,0] to their new position. What I would prefer is that the views would move from their old position (before I remove the constraints) to the new positions (after removal and addition of the new constraints)
Has someone been able to achieve this?
The following post gave me the hint to make it work:
But not the actual accepted answer but rather:
[UIView animateWithDuration:1.0f delay:0.0f options:UIViewAnimationOptionLayoutSubviews animations:^{
[self.view layoutIfNeeded];
} completion:nil];
The optional parameter options:UIViewAnimationOptionLayoutSubviews inspired me to try different options and the actual option needed was options:UIViewAnimationOptionBeginFromCurrentState
[UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[self layoutIfNeeded];
} completion:nil];
Which allowed the animation to occur from the last position, even if constraints are removed and new ones are added.
I created some animations in my project. Basically, I use UIView animate and CGAffineTransform, but a very strange thing happened and I have no idea. Hope someone can help me solve this problem. Thanks in advance.
This is the strange thing:
After the user clicks on a button, the button slides off screen and another two buttons slide on the screen (I just changed the center point of these buttons to achieve this animation). And, some time later, a view on the screen start shaking (I use CGAffineTransform to achieve this).
At this moment, the strange thing happens - the button that previous slid off screen show up at its original position again and the other two buttons disappear (No animation, just shows up and disappear).
The following is the related code,
1) Button slide off and slide in animation related code
- (IBAction)start:(id)sender
{
// 1. Slide in cancel and pause button
[UIView animateWithDuration:0.5f animations:^{
[startButton setCenter:CGPointMake(startButton.center.x + 300.0f, startButton.center.y)];
[cancelButton setCenter:CGPointMake(cancelButton.center.x + 300.0f, cancelButton.center.y)];
[pauseButton setCenter:CGPointMake(pauseButton.center.x + 300.0f, pauseButton.center.y)];
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"Move finished");
}
}];
}
2) The view shaking animation related code
- (void)shakeView:(UIView *)viewToShake
{
CGFloat t = 2.0;
CGAffineTransform translateRight = CGAffineTransformTranslate(CGAffineTransformIdentity, t, 0.0);
CGAffineTransform translateLeft = CGAffineTransformTranslate(CGAffineTransformIdentity, -t, 0.0);
viewToShake.transform = translateLeft;
[UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^{
[UIView setAnimationRepeatCount:2.0];
viewToShake.transform = translateRight;
} completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
viewToShake.transform = CGAffineTransformIdentity;
} completion:nil];
}
}];
}
This isn't weird, it's a common problem with
auto layout. If you move UI elements by changing frames, then as soon as something else takes place that requires laying out views, the moved views will revert to the position defined by their constraints. To fix it, you either need to turn off auto layout, or do your animations by changing constraints not frames.
I have tried your code in my test project. The problem is probably because you are using Autolayout in your xib.
Please checking your xib file and uncheck the Autolayout property.
I am trying to animate a view from position A to B and then back again. Previously, I would do something like the following to animate to B:
[UIView animateWithDuration:1 animations:^{
self.myView.transform = CGAffineTransformMakeTranslation(100, 0);
}];
And then this to animate back to A:
[UIView animateWithDuration:1 animations:^{
self.myView.transform = CGAffineTransformMakeTranslation(0, 0);
}];
All without needing to know the original position.
Now in Auto Layout I am using the following code to animate to position B:
self.myLeadingConstraint.constant = 100;
[UIView animateWithDuration:1 animations:^{
[self.view layoutIfNeeded];
}];
Is there a way to get the previous constant value without needing to create another variable or look in IB to see what the initial value is?
Is there a better way to do all of this?
Thanks in advance.
No, that's the simplest way. Here are your options to animate autolayout:
Call layoutIfNeeded in a block. If you are just translating, change only the constant.
Animate layers instead of views.
Drop constraints, use autosizing masks.
Use a container view and animate that container.
Use constraints that don’t interfere.
Set frame in viewDidLayoutSubviews.
What you mean getting the previous constant value? isn't that on self.myLeadingConstraint.constant already?
During a sliding animation(down, pause, then up back to the original position) of a subview, the device is rotated, so the superview is rotated. I want to keep the subview's width the same as the superview, so I need to resize it during its sliding animation.
Here is the sliding animation code:
[UIView animateWithDuration:0.3 animations:^{
self.frame = finalFrame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 delay:3 options:0 animations:^{
self.frame = initFrame;
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}];
This is the method that is called when I detect rotation:
- (void)rotate:(NSNotification *)notif {
// What to do here to adjust the width but also keep the sliding animation going.
}
It seems there is no auto-resizing magic that can be used here. One must:
Record the progress of the animations.
On detection of rotations, cancel the old animations, adjust the view size, and add new animations starting from the current progress.
Here is a sample project for reference: http://d.pr/f/M4UW.
You can animate the bounds of the layer to change the width. Just make the height the same and apply an animation for the bounds.
If you want both animations to have the same duration, timing function etc. then you could add them both to an animation group and add that group to the layer you are animating.