I had an IPhone application in which i want to transform my image view to its double size without changing the position of the image view.(i.e. the centre need not be changed)I am doing like this
CGAffineTransform firstTransform = bg.transform;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.5];
bg.transform = CGAffineTransformScale(bg.transform,2,2);
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.5];
bg.transform = firstTransform;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
But when transforming its position gets changed.so
Now i am doing like this to do not change the position of the image view.i want the image view to be transformed to the double size on click with an animation like this
animation on the red button when clicking next
can anybody guide me on this?
Make sure the anchor point is set to the centre, bearing in mind when setting the anchor point the value has to be between 0 and 1: 0 being the left/top side and 1 being the right/bottom side. So to set the anchor point to the middle, set it to 0.5 on both the X and Y axis:
[itemName.layer setAnchorPoint:CGPointMake(0.5, 0.5)];
Then when you scale the object, it should scale up from around the centre point.
I also suggest using animateWithDuration:completion. The code will become much simpler:
[UIView animateWithDuration:1.0f animations:^{
[bg setTransform:CGAffineTransformScale(bg.transform, 2.0, 2.0)];
} completion ^{
[UIView animateWithDuration:1.0f animations:^{
[bg setTransform:CGAffineTransformScale(bg.transform, 0.5, 0.5)];
];
}];
Hope this helps you achieve the desired effect!
Make sure that you are not using auto layout. To disable that open your xib, click on first tab in the right panel, uncheck the Use Auto Layout under Interface Builder Document. Screen shot is attached for help.
Related
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 an UIView animation to move an object on the screen and I want the animation to be stopped (and the object to keep the position when the animation is stopped) when the object goes off the screen.
I want my object to always be visible, and to stop moving when it meets an edge of the screen. The target point may be anywhere.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
self.MyObject.center = targetPoint;
[UIView commitAnimations];
I tried to fire a scheduled timer which check if the object is off screen but it seems that the position my object does not change.
Thanks for your help.
Below is the code sample if you are looking to animate the object from left to right edge of the screen.
CGRect objectFrame = self.MyObject.frame;
objectFrame.origin.x = self.view.frame.size.width-objectFrame.size.width;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[self.MyObject setFrame:objectFrame];
[UIView commitAnimations];
Hope it helps.
Cheers.
I have been trying to build an entry effect for a logo to come from the top of the screen to the bottom and remain there when a new view loads in my application. I have seen all of the tutorials that use NSTimer to bounce an image but once my logo hits the bottom it needs to exit. I'm going to read up on animation block codes to see if my solution resides there.
Apologies I'm a new be and am very grateful for the assistance.
Set logo frame to top and then:
[UIView beginAnimations: #"moveLogo" context: nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:1.0];
[UIView setAnimationCurve: UIViewAnimationCurveLinear];
logoToMove.frame = CGRectMake( final frame at the bottom );
[UIView commitAnimations];
logoToMove is your logo, give it an outlet and hook it in xib.
So you will set the initial frame and in the animation - the final frame. The animation will do the rest of the job.
Change UIViewAnimationCurveLinear to a desired one if you don't like that. Also the duration to speed up or slow down the movement.
To remove the view at the end of your animation, the easiest way would be to use blocks :
logoToMove.frame = topRect;
[UIView animateWithDuration:duration
animations:^{
logoToMove.frame = bottomFrame;
}
completion:^(BOOL finished) {
[logoToMove removeFromSuperview];
}
];
Doing it like that gives you control over the animation and on what to do once it's finished in a single method
iPad - iOS 5.1 - Xcode 4.3.2
When the keyboard pop ups I animate the y origin of my UIImageView up by "x"
When the keyboard goes down, i animate it back down by the same "x"
So the keyboard pops up, the image goes up by X, the keyboard comes down, the image goes down by x, but it doesn't end up in the same place!. You go up 60, down 60, and you're not in the same place! it's further down, as if the coordinate system changed between the appearance of the keyboard and the disappearance of it. It absolutely drives me crazy. I can't understand why this happens.
//add gesture recognizer when keyboard appears
-(void)keyboardWillShow:(NSNotification *) note {
[self.view addGestureRecognizer:tapRecognizer];
// Setup the animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3f];
[UIView setAnimationCurve:UIViewAnimationOptionCurveEaseInOut];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix: Logo Image
CGAffineTransform moveLogo = CGAffineTransformMakeTranslation(0, -60);
self.logoImageView.transform = moveLogo;
// Commit the changes
[UIView commitAnimations];
}
//add gesture recognizer when keyboard appears
-(void)keyboardWillHide:(NSNotification *) note {
[self.view removeGestureRecognizer:tapRecognizer];
// Setup the animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3f];
[UIView setAnimationCurve:UIViewAnimationOptionCurveEaseInOut];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix: Logo Image
CGAffineTransform moveLogo = CGAffineTransformMakeTranslation(0, 60);
self.logoImageView.transform = moveLogo;
// Commit the changes
[UIView commitAnimations];
}
That's because you are not translating it, when you use CGAffineTransformMakeTranslation you are saying Give me these coordinates not give me this offset. In other words, make translation gives you the translation from the identity matrix. The function you want is CGAffineTransformTranslate. This will apply the translation to the current transform (passed as the first argument).
the transform property is not cumulative. You are not doing what you think you're doing. You are calculating the new transform from your identity, not from the current transform.
Instead of:
CGAffineTransform moveLogo = CGAffineTransformMakeTranslation(0, 60);
self.logoImageView.transform = moveLogo;
Try:
self.logoImageView.transform = CGAffineTransformIdentity;
Instead of messing around with Core Graphics you might want to animate simple view properties, like frame or size. For example:
[self.logoImageView.center = CGPointMake(self.logoImageView.center.x,
self.logoImageView.center.y + 60);
Do this between beginAnimations and commitAnimations
I have a custom UIView. It initializes two rectangular UIBezierPaths, and in drawRect it simply fills these two paths.
This view is placed on a button. When the button is clicked, a rotation is applied to it inside an animateWithDuration block:
icon.transform = CGAffineTransformMakeRotation(M_PI*-0.25);
This works great.
When the button is clicked again, I am trying to make the view rotate back to it's original orientation (reverse the rotation). I have tried:
icon.transform = CGAffineTransformInvert(icon.transform);
icon.transform = CGAffineTransformMakeRotation(M_PI*0.25);
icon.transform = CGAffineTransformIdentity;
... and a number of other variations, but none of them seem to work. Instead, the view is distorted until it's no longer visible -- sorta stretched to nothing. Sometimes, reapplying the first transform brings it back but with other reversals it doesn't.
What am I doing wrong?
In ios the transform is always relative, so once transformation is done, the next transformation should be relative to the previous transformation. You can simply change the frame of the view and revert it back to normal on second button click. On even clicks you will have to revert back the frame. Implement the following code. You can use the block level code if you feel comfortable with it as it is the new norm.
int noOfClicks = 0;
-(IBAction)yourBtnAction:(id)sender
{
noOfClicks++;
if(noOfClicks %2 != 0)
{
[UIView beginAnimations:#"Rotate" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
CGRect frame=yourView.frame;
frame.origin.y+=20;
yourview.frame=frame;
[UIView commitAnimations];
}
else
{
[UIView beginAnimations:#"Rotate" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
CGRect frame=yourView.frame;
frame.origin.y-=20;
yourview.frame=frame;
[UIView commitAnimations];
}
}
If you don't want to make so many change you can use following to revert back but employing same logic:
[UIView beginAnimations:#"Rotate back" context:nil];
[UIView setAnimationDuration:1.0];
yourView.transform = CGAffineTransformIdentity;
[UIView commitAnimations];