Setting a rotation point for CGAffineTransformMakeRotation Swift

Question

I am using the code below to rotate UIImageViews to different angles.

self.imageOne.transform = CGAffineTransformMakeRotation(CGFloat(-rotation))
self.imageTwo.transform = CGAffineTransformMakeRotation(CGFloat(-rotation-0.1))
self.imageThree.transform = CGAffineTransformMakeRotation(CGFloat(-change+0.1))

Is there any way to make it so the images pivot from the top instead of the middle? I would like to avoid getting sprites involved because I have never used them, and don't know how to make sprites work in a single view application. Thanks for your time.

Answer 1

What you are looking for is the anchorPoint property of your views' layers. This property basically represents the handle that is be used while the view is being moved around.

It defaults to the center of your view so and that why you are always seeing your view rotating form the middle.

You can use this great method i've found here on SO to change the anchorPoint of you views to the top (use CGPointMake(0, 0.5f))

// Swift version
// Place this before you set the transform property
setAnchorPoint(CGPointMake(0, 0.5), view: imageOne)
setAnchorPoint(CGPointMake(0, 0.5), view: imageTwo)
setAnchorPoint(CGPointMake(0, 0.5), view: imageThree)

func setAnchorPoint(anchorPoint: CGPoint, view: UIView) {
    var newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform)
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform)

    var position : CGPoint = view.layer.position

    position.x -= oldPoint.x
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

This is the objective c version of the same code

// Obj-c version
// Place this before you set the transform property
[self setAnchorPoint:CGPointMake(0, 0.5f) forView:imageOne];
[self setAnchorPoint:CGPointMake(0, 0.5f) forView:imageTwo];
[self setAnchorPoint:CGPointMake(0, 0.5f) forView:imageThree];

-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x,
                                   view.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x,
                                   view.bounds.size.height * view.layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);

    CGPoint position = view.layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

I'd encourage you to try to understand yourself what this code is doing once you have seen what the anchorPoint property represents. (the method is by user: Anand K)

Answer 2

Here's a Swift 3 extension based off of mttcrp's answer. It took me a while to figure out that the CGPoint isn't a coordinate in the view, but rather a proportion. For example, if you rotated the view around the point CGPoint(x: 0.5, y: 1) it would rotate around the bottom center of the view. Hope this helps!

extension UIView{
    func setAnchorPoint(anchorPoint: CGPoint) {

        var newPoint = CGPoint(x: self.bounds.size.width * anchorPoint.x, y: self.bounds.size.height * anchorPoint.y)
        var oldPoint = CGPoint(x: self.bounds.size.width * self.layer.anchorPoint.x, y: self.bounds.size.height * self.layer.anchorPoint.y)

        newPoint = newPoint.applying(self.transform)
        oldPoint = oldPoint.applying(self.transform)

        var position : CGPoint = self.layer.position

        position.x -= oldPoint.x
        position.x += newPoint.x;

        position.y -= oldPoint.y;
        position.y += newPoint.y;

        self.layer.position = position;
        self.layer.anchorPoint = anchorPoint;
    }
}

and you would use it like this:

let view = UIView() //This could be anything that inherits from UIView
view.setAnchorPoint(anchorPoint: CGPoint(x: 0.5, y: 1))