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
}];
}
Related
My project has several views that are subject to radial gravity at the center of their parent view, and elastic collisions so that they don't overlap. It works great, but sometimes I need to resize the views, and, when a view gets larger, the other views must move away from it so that all the views remain non-overlapping. I would expect the collision behavior to realize things are touching and to move them apart, but it doesn't seem to.
Here's what I'm trying now:
[UIView animateWithDuration:0.5 animations:^{
view.frame = CGRectInset(view.frame, -30, -30);
} completion:^(BOOL finished) {
[self.animator updateItemUsingCurrentState:view];
}];
The view grows just fine, the animation delegate is informed that the animation has resumed, but the other views don't move away. The newly enlarged view just overlaps (or underlaps depending on z order) the other views.
I tried changing the transform and not the frame - no dice. I tried removing the view from all the behaviors - no dice. I tried removing some and all of the behaviors from the animator - no dice. I tried calling updateItemUsingCurrentState: on all of the views - no dice. I need some dice!
Can you help? Thanks...(swift-ies, feel free to answer is swift. I'll translate it)
Thanks to this post, I learned that all behaviors that include the item being changed must be removed from the animator, then, after changing the view's properties, the behaviors should be added back to the animator.
I think that's crazy, but it worked.
[self.animator removeBehavior:self.behavior]; // for all behaviors that have view as an item
[UIView animateWithDuration:0.5 animations:^{
view.frame = CGRectInset(view.frame, -30, -30);
} completion:^(BOOL finished) {
[self.animator updateItemUsingCurrentState:view];
[self.animator removeBehavior:self.behavior];
}];
I have A class inheriting from UIImageView. Then I have the NSArray containing the the object of the A class containing some pictures. Then I just want to add to the Main view (self.view addSubview: "object of Aclass") and remove some of them. I would keep doing that for a certain amount of time. Here is question. When i do "add" and "remove" the UIImageView (A class object) with some Animation like when I add, the UIImageView goes from small to its original size and when i remove, it goes from its original size to smaller
-(void)displayAClassObject: {
[self.view addSubview: AClassObject];
AClassObject.transform = CGAffineTransformMakeScale(0.3, 0.3);
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{ AClassObject.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { }];
}
Then some function will generate random Number to remove the AClassObject added in the Main view.
-(void)displayOffAClassObject {
[UIView animateWithDuration:0.1 animations:^{AClassObject.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.1, 0.1);} completion:^(BOOL finished){[AClassObject removeFromSuperview]; }];
[AClassObject removeFromSuperview];
}
when i add again the removed AClassObject to the main view, i set it with different frame to place it in different place in the Main view but i do not change its size.
This process keeps going per a second but when I add only or remove only, It works fine. The AClassObject goes from small to its original size and then its original size to small. but when i do both at the same time like [self displayOffAClassObject]; [self displayAClassObject];
The UIImageView (AClassObject) goes really big, even some of the image goes off the screen. Can anyone tell me what is wrong?? or any suggestion to fix it?
When you do transform (especially scale transform), .frame become invalid. Set AClassObject.transform = CGAffineTransformIdentity before setting its frame. If you want to set its position when .transform is not identity, set .center instead.
Cited from UIView documentation:
WARNING
If this property (.transform) is not the identity transform, the value of the frame property is undefined and therefore should be ignored.
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/occ/instp/UIView/transform
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.
I have two UIViews (My bad it is a UIView and a UIButton) which I am animating at the same time. I originally had a view and a containerView which would animate just fine and worked like a charm.
Now only one of my UIViews will move/animate in animateWithDuration even though through debugging the frame of the other view says that it is in a position it is not.
CGRect rect = self.toggle.frame;
CGRect tabRect = self.tabButton.frame;
rect.origin.x = rect.origin.x - rect.size.width;
NSLog(#"%f Before",tabRect.origin.x);
tabRect.origin.x = tabRect.origin.x - rect.size.width;
NSLog(#"%f After", tabRect.origin.x);
[UIView animateWithDuration:0.3 animations:^{ // animate the following:
self.toggle.frame = rect; // move to new location
self.tabButton.frame = tabRect;
}];
NSLog(#"%f AfterAnimation", tabButton.frame.origin.x);
The toggle view moves fine, but the tabButton view does not animate or move. The strange thing is that both the "After" and "AfterAnimation" debugging code returns the same value, which suggests the frame has indeed moved. Is there a specific reason that this will not work when toggle is a UIView when it would work as a UIContainerView?
Note that if I remove the line
self.toggle.frame = rect;
tabButton will animate correctly, but if I move toggle, tabButton will not move regardless of whether it is first in the animation block or second.
Edit: I have tried moving them into separate blocks and to change the center point rather than the frame, to no avail. It seems that if the toggle view moves, the tabButton will not move.
Edit 2: The pictorial evidence.{
In the following screenshots tabButton bg is green and toggle bg is red.
Above: Initial position (toggle is off-screen) correct position
Above: The problem in question toggle is correct tabButton is not
Above: When self.toggle.frame = rect is commented out (tabButton correct, toggle not)
}
Edit 3: It's even worse than I feared.{
I have done a few more tests and even if I take the toggle change out of the animation block to make it an instant thing, the tabButton will still not animate. This makes me think the tabButton may just fundamentally dislike the toggle view and/or myself so will not move just to spite me.
}
Edit 4:{
If I change the tabButton animation to tabButton.frame = CGRectMake(10,10,100,100) the View snaps instantly to that location and animates back to its original position in the same time as the animation duration.
}
I better add more bookkeeping/TLDR information in case things aren't clear.
toggle is an instance of ToggleDraw which is a subview of UIView which I created.
tabButton is a UIButton which is part of my IB viewController and a property of the class
Both toggle and tabButton are subviews of self.view
The animations will work individually with no modifications to the logic of the rects but will not work if they are animated at the same time
toggle animation seems to take precedence over tabButton animation regardless of the order
I had a problem with the animation of an UIView created in IB (the animation didn't start from the current position of the view, and ended in the initial position).
All worked fine after sending layoutIfNeeded() to the underlaying view before the animation block:
self.view.layoutIfNeeded()
UIView.animateWithDuration(0.5) { () -> Void in
...
I think it is not a problem about a UIView Animation. Maybe your toggle posiztion is related to your tabButton. For a try, your can set toggle frame to a rect lick (10, 10, 100,100), then check the result.
I've created an example of what you describe and everything seems to work fine. This is what I used:
UIView *toggle = [[UIView alloc] initWithFrame:CGRectMake(320, 64, 100, 100)];
[toggle setBackgroundColor:[UIColor redColor]];
[self.view addSubview:toggle];
UIButton *tabButton = [[UIButton alloc] initWithFrame:CGRectMake(220, 64, 100, 100)];
[tabButton setBackgroundColor:[UIColor greenColor]];
[self.view addSubview:tabButton];
CGRect rect = toggle.frame;
CGRect tabRect = tabButton.frame;
rect.origin.x = rect.origin.x - rect.size.width;
NSLog(#"%f Before",tabRect.origin.x);
tabRect.origin.x = tabRect.origin.x - rect.size.width;
NSLog(#"%f After", tabRect.origin.x);
[UIView animateWithDuration:1 animations:^{ // animate the following:
toggle.frame = rect; // move to new location
tabButton.frame = tabRect;
}];
What I can suggest is to make sure that the code is being ran on mainthread:
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.3 animations:^{
self.toggle.frame = rect; // move to new location
self.tabButton.frame = tabRect;
}];
});
Also take into account that the log you have after the animation code is incorrect as it won't run after the animation, but rather right next to asking for the animation.
If you want code to run after the animation you should use:
[UIView animateWithDuration:0.3 animations:^{
self.toggle.frame = rect; // move to new location
self.tabButton.frame = tabRect;
} completion:^(BOOL finished){
NSLog(#"Finished animating!");
}];
I have found a solution to the problem. If I initialise the UIButton (tabButton) programmatically rather than through the interface builder, both views will animate simultaneously.
This however seems very hacky to me, kind of like putting a bandaid over a missing foot and hoping it will sort itself out.
I could not work out the root cause of the problem but at least I could avoid the symptoms.
If anyone knows why the views would not animate when the button was made in the interface builder post an answer here, I am interested in knowing the reason behind this.
Thanks for your help everyone.
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?