UIView animation and transform cause a weird position offset - objective-c

http://childhoodgamedev.qiniudn.com/xincheng_testGif.gif
UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(250, 250, 200, 100)];
label.text = #"Hello world!";
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentLeft;
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont systemFontOfSize:25];
[self.view addSubview:label];
CGAffineTransform transform = CGAffineTransformIdentity;
label.transform = CGAffineTransformScale(transform, 2, 2);
[UIView animateWithDuration:4.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
label.transform = CGAffineTransformTranslate(label.transform, -100, 0);
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"label %f %f %f %f", label.frame.origin.x, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
[UIView animateWithDuration:3.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
NSLog(#"label %f %f %f %f", label.frame.origin.x, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
label.transform = CGAffineTransformTranslate(label.transform, 100, 0);
} completion:NULL];
}
}];
There is UILabel instance named label, it's scaled to 2 ratio by CGAffineTransformScale. Then it moves from right to left, when the animation is completed, then it moves from left to right.
But the strange point is: It looks not the same position, which is the end point of animation(right to left), the start point of animation(left to right). But the NSLog tells me, they are in the same position.
http://childhoodgamedev.qiniudn.com/xincheng_QQ20150306-1.png
When I comment the state label.transform = CGAffineTransformScale(transform, 2, 2);, everything is fine. When the label change direction to move, the end position of right->left animation is just the start position of left->right animation.
So I think the problem is caused by CGAffineTransformScale. Any ideas?

Related

UIView.animateWithDuration not animating when called inside keyboardWillShow

For some reason my view is not animating:
- (void)keyboardWillShow:(NSNotification*)aNotification
{
NSDictionary* info = [aNotification userInfo];
CGSize kbSize = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
double duration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
int curve = [[info objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];
int height = self.view.bounds.size.height - kbSize.height+self.tabBarController.tabBar.frame.size.height;
self.notesView.frame = CGRectMake(0, -height,
self.view.bounds.size.width, height);
[UIView animateWithDuration:1.5 delay:0 options:curve animations:^{
self.notesView.frame = CGRectMake(0, 0, self.view.bounds.size.width, height);
} completion:nil];
}
The notesView is being displayed but not animated. When I move the animation code into a btnPressed method then it animates as expected. Any ideas?
Edit
It looks like the method is being called twice (that's a separate problem dealing with the inputAccessoryView that I still need to figure out). I updated it to see if calling the animateWithDuration code only once would solve the problem. However, it's still not animating.
- (void)keyboardWillShow:(NSNotification*)aNotification
{
NSDictionary* info = [aNotification userInfo];
CGSize kbSize = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
int curve = [[info objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue];
int height = self.view.bounds.size.height - kbSize.height + self.tabBarController.tabBar.frame.size.height;
if (height == 510) return; //for some reason the self.view.bounds.size.height is different between the two calls
self.notesView.frame = CGRectMake(0, -height, self.view.bounds.size.width, height);
[UIView animateWithDuration:1.5 delay:0 options:curve animations:^{
self.notesView.frame = CGRectMake(0, 0, self.view.bounds.size.width, height);
} completion:nil];
}

Using cgaffinetransformmakescale and cgaffinetransformmakerotation deforms my view

I have a simple UIView:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
view.backgroundColor = [UIColor greenColor];
[self.view addSubview:view];
self.someView = view;
Then I do this
[UIView animateWithDuration:10
delay:1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.someView.center = CGPointMake(CGRectGetWidth(self.view.bounds) - CGRectGetWidth(self.someView.frame) / 2, 150);
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
self.someView.transform = CGAffineTransformScale(transform, 2, 0.5);
}
completion:^(BOOL finished) {
}];
While is executed this simple animation, someView is deformed. As far as I know it should rotate and change it's size. I can't understand why is it happening so, how can i fix it?
Thanks
The problem is animating a combined scaling and rotation. The end result is the same as animating them separately, but the frames in between are not easily defined. So the animation framework makes a guess, and it is not what you are expecting.
If you want the animation to show a rotation and scaling separately, you need to apply them separately to the view hierarchy. For example:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
view.backgroundColor = [UIColor greenColor];
[self.view addSubview:view];
self.someView = view;
UIView *innerView = [[UIView alloc] initWithFrame:view.bounds];
innerView.backgroundColor = [UIColor blueColor];
[view addSubview:innerView];
self.someInnerView = innerView;
The animation splits the transform:
[UIView animateWithDuration:10
delay:1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
self.someView.center = CGPointMake(CGRectGetWidth(self.view.bounds) - CGRectGetWidth(self.someView.frame) / 2, 150);
self.someView.transform = CGAffineTransformMakeRotation(M_PI);
self.someInnerView.transform = CGAffineTransformMakeScale(2, 0.5);
}
completion:^(BOOL finished) {
}];

UILabel animating frame change disregarding delay

I have a UILabel that I show / hide. I want to show the label, pause for a few seconds and hide it. This code ISN'T working. It removes the view as soon as the animation finished (instantly)
-(void) show
{
[UIView animateWithDuration:.5f delay:0.0f
options:UIViewAnimationOptionCurveEaseIn animations:^{
CGRect newFrame = CGRectMake(0.0f, 64.0f, [UIScreen mainScreen].bounds.size.width, 44.0f);
self.frame = newFrame;
} completion:^(BOOL finished){
[self hideAndRemove];
}];
}
-(void) hideAndRemove
{
[UIView animateWithDuration:.5f delay:2.0f
options:UIViewAnimationOptionCurveEaseIn animations:^{
CGRect frame = CGRectMake(0.0f, 64.0f, [UIScreen mainScreen].bounds.size.width, 0.0f);
self.frame = frame;
} completion:^(BOOL finished){
// nothing
}];
}
However, if I try some other animation on the frame, the delay works and the frame change is animated:
-(void) show
{
[UIView animateWithDuration:.5f delay:0.0f
options:UIViewAnimationOptionCurveEaseIn animations:^{
CGRect newFrame = CGRectMake(0.0f, 64.0f, [UIScreen mainScreen].bounds.size.width, 44.0f);
self.frame = newFrame;
} completion:^(BOOL finished){
[self hideAndRemove];
}];
}
-(void) hideAndRemove
{
[UIView animateWithDuration:.5f delay:2.0f
options:UIViewAnimationOptionCurveEaseIn animations:^{
CGRect frame = CGRectMake(0.0f, 64.0f, [UIScreen mainScreen].bounds.size.width, 250.0f);
self.frame = frame;
} completion:^(BOOL finished){
// nothing
}];
}
I don't know what the problem might be, but I think it comes from the frame height who shouldn't be set to 0.
Why not using [UILabel setAlpha:0] to hide your label, and [UILabel setAlpha:1] to show it back ? It seems cleaner than changing its frame height to 0, and it animates nicely.

How can I fade a UIView in while moving it up?

I have a UIView and I want to give it an effect that causes it to start with an alpha of 0 and then while moving up 50 pixels animated it also changes to an alpha of 1. How can this be done in Objective-C?
[UIView animateWithDuration:1.0 animations:^{
//here change position and alpha
CGRect newFrame = view.frame;
newFrame.origin.y += 50;
view.frame = newFrame;
view.alpha = 1.0;
} completion:^(BOOL finished) {
//called when animation did finish. do what you want
}];
https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/viewpg_iphoneos/animatingviews/animatingviews.html
Everything about animations.
It's all right there.
//something similar to what you want:
- (IBAction)showHideView:(id)sender
{
// Fade out the view right away
[UIView animateWithDuration:1.0
delay: 0.0
options: UIViewAnimationOptionCurveEaseIn
animations:^{
thirdView.alpha = 0.0;
}
completion:^(BOOL finished){
// Wait one second and then fade in the view
[UIView animateWithDuration:1.0
delay: 1.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
thirdView.alpha = 1.0;
}
completion:nil];
}];
}
Something like this would do the trick:
UIView *box = [[UIView alloc] initWithFrame:CGRectMake(self.view.center.x, self.view.center.y, 100, 50)];
box.backgroundColor = [UIColor blackColor];
box.alpha = 0.0f;
[self.view addSubview:box];
[UIView animateWithDuration:2.0f
animations:^{
box.alpha = 1.0f;
CGRect frame = CGRectMake(self.view.center.x, self.view.center.y - 100, 100, 50);
[box setFrame:frame];
}];

How to animate zooming UIView WITH SUBVIEWS?

This code does the following: It takes a 'snapshot' of a NavigationController meant to disappear. Then the snapshot is added to the view of a container view controller, slides away and reveals the new NavigationController. To create the 'Pop-Out-Effect' the midAnFrame makes the view a bit bigger than the actual view. After that postAnFrame provides the sliding out of the container view's frame. Works great, the only problem is that the subviews of animationContainer don't resize like their superView during the animation.
- (void)bringUpSettingsNavigationController {
CGFloat gradientWidth = 20;
CGFloat frameIncrease = 10;
CGRect preAnFrame = CGRectMake(- gradientWidth, 0, self.view.frame.size.width + gradientWidth, self.view.frame.size.height);
CGRect midAnFrame = CGRectMake(-(frameIncrease + gradientWidth), - frameIncrease, preAnFrame.size.width + (2*frameIncrease), preAnFrame.size.height + (2*frameIncrease));
CGRect postAnFrame = CGRectMake(midAnFrame.size.width, midAnFrame.origin.y, midAnFrame.size.width, midAnFrame.size.height);
UIView *animationContainer = [[UIView alloc]initWithFrame:preAnFrame];
animationContainer.backgroundColor = [UIColor clearColor];
animationContainer.autoresizesSubviews = YES;
self.topImageView = [[UIImageView alloc]initWithImage:[self topImageFromView:self.view]];
self.topImageView.frame = CGRectMake(gradientWidth, 0, preAnFrame.size.width - gradientWidth, preAnFrame.size.height);
[animationContainer addSubview:self.topImageView];
self.topImageView.clipsToBounds = YES;
UIView *gradientView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, gradientWidth, preAnFrame.size.height)];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = gradientView.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[[UIColor colorWithWhite:0 alpha:.5] CGColor], nil];
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1.0, 0.5);
[gradientView.layer insertSublayer:gradientLayer atIndex:0];
gradientView.backgroundColor = [UIColor clearColor];
[animationContainer addSubview:gradientView];
gradientView.clipsToBounds = YES;
[self.view addSubview:animationContainer];
BYSettingsNavigationController *settingsNavigationController = [[BYSettingsNavigationController alloc]initWithRootViewController:[[BYSettingsViewController alloc]init]];
[self addChildViewController:settingsNavigationController];
settingsNavigationController.view.frame = self.view.bounds;
[self.view insertSubview:settingsNavigationController.view belowSubview:animationContainer];
[settingsNavigationController didMoveToParentViewController:self];
[UIView animateWithDuration:0.2 animations:^{
animationContainer.frame = midAnFrame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:.5 animations:^{
animationContainer.frame = postAnFrame;
} completion:^(BOOL finished) {
[self.topImageView removeFromSuperview];
[gradientView removeFromSuperview];
self.topImageView = nil;
}];
}];
[self.currentNavigationController willMoveToParentViewController:nil];
[self.currentNavigationController.view removeFromSuperview];
[self.currentNavigationController removeFromParentViewController];
}
Thanks in advance for your ideas and have a great 2013!
Dario
What your doing is not zooming in , your just changing the frame size.
To zoom in you need to change the transformation of the view.
What you need to do is something along this line:
view.transform = CGAffineTransformMakeScale (2.0 , 2.0);
for example to zoom X2