I expanded and moved a label (instructionLabel), then returned it to its original size but left it in the new position.
[UIView animateWithDuration:0.5
animations:^{
CGAffineTransform scale = CGAffineTransformMakeScale(2.0, 2.0);
CGAffineTransform translate = CGAffineTransformMakeTranslation(0.0, -70.0); // up 70
self.instructionsLabel.transform = CGAffineTransformConcat(scale,translate);
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.25
animations:^{
CGAffineTransform scale = CGAffineTransformMakeScale(1.0,1.0);
CGAffineTransform translate = CGAffineTransformMakeTranslation(0,-70.0); //left in place up 70
self.instructionsLabel.transform = CGAffineTransformConcat(scale, translate);
}
completion:^(BOOL finished) {}
];
Later, I explicitly use CGPointMake to put the label back in its original spot, but it remains in the translated position (70 pts up from its original place).
instructionsLabel.frame = CGRectMake(384, 601, 655, 40);
//Adding this doesn't make any difference, in or out.
instructionsLabel.center=CGPointMake(384, 601);
I have verified by Breaks and NSLog that the CGPointMake and CGRectMake statements are reached...they just don't work after that affine transformation. Does anyone know why?
(I don't want to move the label back immediately after the translation routine, but I might have to if I can't figure out why the CGPointMake routine doesn't do it.)
Thanks for any suggestions.
-Rob
Unless Im mistaken one of the major reason for using affine transform to scale, move etc views is that, that you can later set transform to CGAffineTransformIdentity this will cancel out any transforms you have applied. I believe that your problem here is that you are setting center to what ever position it of before you applied translate transform. View indeed moves to that point + whatever transform is applied to that view. So just set transform identity.
Related
I am facing this weird issue, where CGAffineTransformMakeScale is causing rotation. The name suggests that it should only cause scaling, but that's not the case.
[UIView animateWithDuration:1.0 animations:^{
self.logoView.transform = CGAffineTransformMakeScale(6.0, 6.0);
} completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:3.0 animations:^{
self.logoView.transform = CGAffineTransformMakeScale(-6.0, -6.0);
} completion:nil];
}
}];
I would assume that the view should scale 6x and scale back 6x. However, the second animation causes a 90-degree anti-clockwise rotation of the image! Can anyone explain what's going on?
Use the relative scaling transform rather than making an absolute one. So:
self.logoView.transform = CGAffineTransformScale(self.logoView.transform,
6, 6)
you shouldn't be scaling to CGAffineTransformMakeScale(-6.0,-6.0) in order to reverse what you already did (unless thats what you want, but i doubt it) but instead animate back to CGAffineTransformMakeScale(1.0,1.0). a shortcut is CGAffineTransformIdentity constant, which is an empty transform. So change that last line in the completion block to
self.logoView.transform = CGAffineTransformIdentity;
to explain whats currently going on, by scaling to a negative value in both x and y axes you are turning the view 'inside out' in both dimensions at the same time
I have the following super simple animation, I'm basically rotating a view 2 radians from its original angle/center, it rotates fine my only misunderstanding is why does the view move from its original position when the rotation occurs.
[UIView animateWithDuration:1.0 animations:^{
self.someView.transform = CGAffineTransformMakeRotation( 2 );
}];
Why does the view moves when rotated with the code above?
I'm currently trying to discern the information in the CGAffineTransform Reference.
Understanding the anchor point.
I found this threads but it doesn't show a concrete answer.
Why rotating imageView, it changes position?
Thanks a lot
You need to set the anchor point of your view to rotate around.
self.somview.layer.anchorPoint = CGPointMake(0.5, 0.5);
Then start the rotation.
From Apple documentations
#property(nonatomic) CGAffineTransform transform Changes to this
property can be animated. Use the beginAnimations:context: class
method to begin and the commitAnimations class method to end an
animation block. The default is whatever the center value is (or
anchor point if changed)
Link: https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/anchorPoint
image from here http://www.raywenderlich.com/9864/how-to-create-a-rotating-wheel-control-with-uikit
- As you see the anchor point is the point with the value from 0.0 - 1.0 for X and Y
when you rotate the rotation will be around these points
NOTE: you need to import QuartzCore
I am adding another answer due to #fs_tigre request. The problem is with the auto layouts in your xib file, unfortunately is it unknown why that affects the transform.
Now here is the steps I did to solve the issue:
1- first you need to get rid off your auto layout (yes, you have to)
uncheck Use Autolayout
2- remove all constraints and autoresizing masks for your view that will be rotated, as in the screenshot
(Here I have my blue box, see on the right autoresizing, nothing is selected)
I have made some changes for your rotation's code
self.someView.layer.anchorPoint = CGPointMake(0.5, 0.5);
// one degree = pi/180. so...
// rotate by 90
CGFloat radians = (M_PI/180) * 90;
[UIView animateWithDuration:1.0 animations:^{
self.someView.transform = CGAffineTransformRotate(self.someView.transform, radians);
}];
Click rotate and see the magic :)
The "anchor" of CGAffineTransformMakeRotation is the X,Y of the view. You can try this:
CGPoint center = self.someView.center;
[UIView animateWithDuration:1.0 animations:^{
self.someView.transform = CGAffineTransformMakeRotation( 2 );
self.someView.center = center;
}];
So I'm trying to perform a (seemingly) simple transform animation on a UIImageView by just moving it up 100 points. This is my code:
[UIView animateWithDuration:1 delay:1 options:nil animations:^(void) {
CGAffineTransform tf = CGAffineTransformMakeTranslation(0, -100);
[image setTransform:tf];
} completion:^(BOOL finished) {} ];
It works...but it for some reason chooses a new origin for my UIImageView to start from. For example, if the image's original center coordinates are (300, 400), then by my code it should translate up 100 points to (300, 300). But for some reason, the code makes the image start a little bit lower than where it should, like around (300, 450), and then it'll move up 100 to (300, 350). How can I get it to do the animation from where the image is originally?
If you prefer to use transformation for this procedure, then you should try to get original transform and translate it by 100 px.
[image setTransform:CGAffineTransformTranslate(image.transform, 0, -100)];
If your goal is to translate the subview relative to its superview's coordinate system, you'll have more predictable results simply animating the center property:
[UIView animateWithDuration: 1.0 animations:^{
image.center = CGPointMake(image.center.x, image.center.y - 100);
}];
The transform property expresses an affine transform relative to the center property (or the layer's anchorPoint, if changed).
i'm having the same problem. if i want to translate my label 100 on the y-axis, it will start the animation -50 in the y, then moves it 100 from there. if i move it 200 in the y, it starts the animation -100 in the y, then moves it 200 from there. it's very frustrating.
#stackoverflowmaster, were you ever able to figure this out?
UPDATE: you must uncheck the "Use Auto Layout" option in the file inspector for whatever object you're trying to use. this took me way too long to figure out, hope it saves someone else some time.
I have been researching CGAffineTransforms and was wondering if there was a way to take your view and zoom in on an x,y coordinate. I have the scaling portion down with the function:
CGAffineTransformMakeScale(4.00 ,4.00);
However I am uncertain how to tie the scaling with a possible x,y coordinate. Has anyone ever done something like this? Am I incorrect in the use of these function possibly?
-(void)buttonSelected:(id)sender
{
UIButton *b = sender;
CGPoint location = b.frame.origin;
[UIView animateWithDuration:1.3f delay:0.0f options:UIViewAnimationCurveEaseIn animations:^{
CGAffineTransform totalTransform =
CGAffineTransformMakeTranslation(-location.x , -location.y );
totalTransform = CGAffineTransformScale(totalTransform, 4.0f, 4.0f);
totalTransform = CGAffineTransformTranslate(totalTransform, location.x , location.y );
[self.view setTransform:totalTransform];
}completion:^(BOOL finished) {
}];
}
You would either construct a transform that performed the three steps:
move point you want to scale around to the centre of the layer;
scale;
move the object back so that the original centre is back in the centre.
So, e.g.
// to use a point that is (109, 63) from the centre as the point to scale around
CGAffineTransform totalTransform =
CGAffineTransformMakeTranslation(-109.0f, -63.0f);
totalTransform = CGAffineTransformScale(totalTransform, 4.0f, 4.0f);
totalTransform = CGAffineTransformTranslate(totalTransform, 109.0f, 63.0f);
Or, arguably more simply adjust the view.layer's anchorPoint. The gotcha with the second idea is that when you first adjust the anchor point you'll get an immediate transform because all other positioning is in terms of the centre.
I have set up the following animation to rotate between views of different sizes. The midpoint of the animation seems to have a flicker as the new, taller view comes into view. Is there anything I can do to smoothen the transition.
newView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 1.0, 0.0);
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{oldView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, -1.0, 0.0);}
completion:^(BOOL finished) {
[oldView removeFromSuperview];
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{newView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 0.0);}
completion:nil];
}];
Got this working thanks to this thread, so I thought I'd share my to-from 3D transform using the m34 matrix.
UIView *toView = // show this
UIView *fromView = // hide this one
// set up from
CATransform3D fromViewRotationPerspectiveTrans = CATransform3DIdentity;
fromViewRotationPerspectiveTrans.m34 = -0.003; // 3D ish effect
fromViewRotationPerspectiveTrans = CATransform3DRotate(fromViewRotationPerspectiveTrans, M_PI_2, 0.0f, -1.0f, 0.0f);
// set up to
CATransform3D toViewRotationPerspectiveTrans = CATransform3DIdentity;
toViewRotationPerspectiveTrans.m34 = -0.003;
toViewRotationPerspectiveTrans = CATransform3DRotate(toViewRotationPerspectiveTrans, M_PI_2, 0.0f, 1.0f, 0.0f);
toView.layer.transform = toViewRotationPerspectiveTrans;
[UIView animateWithDuration:1.0
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{fromView.layer.transform = fromViewRotationPerspectiveTrans; }
completion:^(BOOL finished) {
[fromView removeFromSuperview];
[UIView animateWithDuration:1.0
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{toView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 0.0);}
completion:nil];
}];
I was halfway there, but the missing piece, setting the m34 cell value of the transformation matrix, did the trick.
As David pointed out, your code doesn't make sense as written. You're setting the final rotation of your newView to a rotation around nothing, which will PROBABLY be equivalent to the identity matrix, but I'm not sure.
Here's what I would try (I'm tired, so let's see if I can explain this coherently...)
Animate the oldView from 0 to pi/2 as animation step 1. Set the newView to -pi/2 before beginning the second animation (rotated 90 degrees the other way.)
In the completion method, remove the old view and start an animation to set the new view's rotation back to zero. That will cause the new view to look like it's continuing to flip around in a 180 degree flip.
Here's the tricky part. Calculate the difference in size (horizontal and vertical) between the old and new views. Add (concatenate) a scale transform along with the rotation, so that when the first part of the rotation is finished, it is scaled to the average of the old and new size. Pseudocode might look like this:
//Scale to apply to oldView for the first part of the animation:
scale height = ((oldView.size.height+newView.size.height)/2) / oldView.size.height
scale width = ((oldView.size.width+newView.size.width)/2) / oldView.size.width
/*
Before beginning the second part of the animation, rotate newView to -pi/2,
and scale it by an amount that makes it the same size that oldView will be
at the end of the first animation (the average of the sizes of both views)
*/
newView scale height = ((oldView.size.height+newView.size.height)/2) /
newView.size.height
newView scale width = ((oldView.size.width+newView.size.width)/2) /
newView.size.width
in the completion block, remove oldView from it's superview,
and animate newView back to the identity transform.
If my approach is right, at the end of the first animation, oldView should be scaled to a size halfway between the sizes of oldView and newView.
The second animation, triggered in the completion block of the first, will start out with newView being the same size that oldView was scaled to at the end of the first animation. The second animation will end with the new view rotating into place and scaling back to it's original size.