IOS/Objective-C:Animation of Multiple CGAffineTransformations - ios

I am trying to perform an animation that does three things at once: translates, rotates and changes the size of an image.
I can do two at once, translate and size. However, when I add in rotation at the end of the following code, it is ignored. And if I place it at the beginning of the code, the size change is ignored. I've read that you can do a composite transition with view.transform, however, I have not been able to get that to work.
Here is my current code:
CGPoint destPoint = CGPointMake(-100,-50);
float radians =[self Degrees2Radians:-35];
[UIView animateWithDuration:2
animations:^{
//TRANSLATE
self.imageView.center = CGPointMake(self.imageView.center.x + destPoint.x, self.imageView.center.y + destPoint.y);
//ROTATE
self.imageView.transform = CGAffineTransformMakeRotation(radians);
//SCALE
self.imageView.transform = CGAffineTransformMakeScale(0.2, 0.2); // here the final size will be 20%
}
completion:nil
];
}
Can anyone recommend way to get all three things to occur simultaneously.
Here is some code for swift that uses the transform property of the view, but I have not been able to find the equivalent in Objective-C.
view.transform= CGAffineTransform(scaleX: 1.5, y: 1.5)
view.transform = view.transform.rotated(by angle: CGFloat(45 * M_PI / 180))
Thanks in advance for any suggestions.

You can use CGAffineTransformRotate function on the existing transform to apply a rotation. You can also use CGAffineTransformTranslate and CGAffineTransformScale to apply translation and scaling. Please note that, order of the operations matter.
For example if you have an existing transform myTransform you can rotate it like:
myTransform = CGAffineTransformRotate(myTransform, M_PI / 2);
The operation does not affect the input variable, instead, it returns a new transform so make sure you use the return value of the function. That's why I started the line with myTransform = ....
More information is available at https://developer.apple.com/documentation/coregraphics/cgaffinetransform-rb5?language=objc.

Related

CATransform3D UIScrollView perspective transform on zoom (3D)

I've been attempting to apply a perspective transform to achieve an effect similar to the Apple Maps 3D effect with the added constraint that the transform is applied once a certain zoom scale has been reached rather than clicking a button to enable the feature.
To achieve this I have been doing the following with very buggy results.
- (void)scrollViewDidEndZooming:(UIScrollView *)scr withView:(UIView *)view atScale:(CGFloat)scale {
NSLog(#"Scale: %f", scale);
CATransform3D transform = CATransform3DIdentity;
//z distance
float distance = [[UIScreen mainScreen] bounds].size.height;
transform.m34 = - 1.0/distance;
transform = CATransform3DRotate(transform, scale * 15 * M_PI / 180.0f, 1.f, 0.0f, 0.0f);
[UIView animateWithDuration:0.3 animations:^{
image.layer.transform = transform;
image.layer.zPosition = distance * ratio;
image.layer.position = CGPointMake([[UIScreen mainScreen] bounds].size.width/2, [[UIScreen mainScreen] bounds].size.height/3);
}];
previousScale = scale;
}
What ends up happening is that the perspective transform is applied the first time. However, it also translates the imageview, which is not what I want. Also, subsequent zoom attempts will seemingly continue rotating using the previous rotation as a base (I thought that setting the transform to the identity transform would reset this behavior).
Also, any pointers towards achieving the rotation effect would be much appreciated.
Simply, my question is as follows: How do I properly use the m34 transformation to achieve a transform effect similar to Apple Maps 3D effect.
Bonus Question: Can you point me in the right direction for achieving the rotation effect.
Thanks!
To achieve a sort of perspective changing the m34 value in the root view is not enough. The topic is quite complex and it actually requires a special hosting layer the CATransformLayer.
Here I've found a blog article that can help you. Rotation in layer language are applied in the anchor point.

Set a UIView scale transform without effecting other transforms

I have a UIView that I scale down when it is touched and scale back up when the touch is ended or cancelled.
I had been scaling the view like this
Scale down:
CGAffineTransform transform = CGAffineTransformMakeScale(0.95, 0.95);
self.transform = transform;
Scale up:
CGAffineTransform transform = CGAffineTransformMakeScale(1.0, 1.0);
self.transform = transform;
This doesn't preserve any other transform. I know I can use this to preserve the old transforms:
Scale down:
CGAffineTransform transform = CGAffineTransformScale(self.transform, 0.95, 0.95);
self.transform = transform;
Scale up:
CGAffineTransform transform = CGAffineTransformScale(self.transform, 1.0, 1.0);
self.transform = transform;
But of course here the scale up has no effect- plus there is potential to have cumulative scale down animations applied. Basically I want a way to apply the scale transform absolutely without affecting any other transform. Is there a way to do this? I don't think using 1.0/0.95 for the scale up factor, because it is possible the view could receive two touches before one is cancelled or ended.
I think I am asking the same thing as this question: Applying just the scale component of a CGAffineTransform to a UIView but I don't think the answers here will work for me.
I am targeting iOS 7 and above.
I am not sure if this is exactly what you are looking for but for me I need the scale to be absolutely consistent all the time so I modify the matrix directly.
CATransform3D transform = layer.transform;
if (makeSmaller)
{
// Scale to 0.9
transform.m11 = 0.9f;
transform.m22 = 0.9f;
}
// Cell needs to grow to normal size
else if (restoreToOriginal)
{
// Scale to 1.0 again
transform.m11 = 1.0f;
transform.m22 = 1.0f;
}
// Set the desired Y translation
transform.m42 = desiredffset;
layer.transform = transform;

Combining a UIView perspective transform with other CATranform3Ds

I'm writing an app such that sprites (subclasses of UIImageView) can be rotated, resized, and panned across the screen using gestures. I also would like to be able to apply a 3D perspective transformation to the sprites.
I have the rotate/resize/pan functionality working correctly, as well as the perspective transform. However, they don't seem to work together correctly. If I rotate an unmodified sprite, then try to skew it, the sprite 'resets' it's rotation, then applies the perspective. The opposite works though; if I skew first, I can apply any 2D transformation after without it resetting.
Here is the code I'm using: (rotate, resize, and pan are done using UIGestureRecognizers, whereas the skew uses a UISlider).
Rotate:
- (void)didRotateSprite:(UIRotationGestureRecognizer *)rotate
{
CGFloat angle = rotate.rotation;
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(spriteView.layer.transform, angle, 0, 0, 1);
spriteView.layer.transform = transform;
rotate.rotation = 0.0;
}
Resize:
- (void)didPinchSprite:(UIPinchGestureRecognizer *)pinch
{
CGFloat scale = pinch.scale;
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DScale(spriteView.layer.transform, scale, scale, 1);
view.layer.transform = transform;
pinch.scale = 1.0;
}
Perspective:
- (IBAction)perspectiveChanged:(UISlider *)slider
{
CATransform3D transform = CATransform3DIdentity;
transform.m34 = 1.0 / -100;
transform = CATransform3DRotate(transform, (1 - (slider.value * 2)) * M_PI_2, 1, 0, 0);
spriteView.layer.transform = transform;
}
Thank you!
Found the answer with a lot of debugging and the help of this question. The trick was to transform the view's perspective using:
spriteView.superview.layer.sublayerTransform = transform;
This recursively applies the transformation to the view's superview and any subviews contained in it. For more information about this, check out the documentation and Apple's Layer Style Properties guide too.

Manipulating UIView layer's CATransform3D and UIView's CGAffineTransform at the same time

This might sound like a weird question, but what I am trying to do isn't very strange. I am currently resizing a UIView via the view's CGAffineTransform like this:
self.selectedController.view.transform = CGAffineTransformScale(CGAffineTransformIdentity, resizeRatioValue, resizeRatioValue);
Where the resizeRatioValue is a value between 0.7-1.0, depending on the location of the gesture. This works great. With a pan gesture, I am able to shrink down my view beautifully.
Now, I would like to add another twist to this. As the view is shrinking, I would like to apply a rotation to the view (similar to the coverflow effect) so that it rotates and shrinks at the same time.
I can rotate the view just fine using this code:
float angle = 45.0 * progressRatio;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / 2000; // Perspective
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform,
1 * angle / (180.0 / M_PI), 0.0f, 1.0f, 0.0f);
self.selectedController.view.layer.transform = rotationAndPerspectiveTransform;
But when I put both of these together, it's one or the other. Whichever one occurs second is the one that works. I can't get them to coexist.
What can I do to make it so that these can both work together? Or is there a completely different approach that would be better suited for what I am trying to do?

affine translation prevents CGPoint relocation

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.

Resources