Is there a way to calculate the CGAffineTransform needed to transform a view from frame A to frame B?

Question

Say, I have two CGRects, CGRect A and CGRect B. My UIView's frame is the same as CGRect B, but I want to create an animation showing the UIView transitioning from frame A to B.

I'm trying to do this by changing the transform property of the UIView, so I don't have to mess around with its frame too much. However, I need the CGAffineTransform to make this possible. What is the best way to calculate this transform?

Is there any pressing reason for not simply animating frame property from CGRect A to CGRect B? — Rok Jarc, May 23 '12 at 15:37
Not pressing. But the reason is that keeping the view's frame static and using transforms to move it around significantly simplifies keeping track of it during more complex state changes (such as auto-rotation). — SpacyRicochet, May 24 '12 at 07:34

score 44 · Answer 1 · edited Nov 08 '22 at 12:45

The previous answers didn't work for me. This should work:

Swift 5 (extension)

extension CGAffineTransform {
    init(from source: CGRect, to destination: CGRect) {
        self = CGAffineTransform.identity
            .translatedBy(x: destination.midX - source.midX, y: destination.midY - source.midY)
            .scaledBy(x: destination.width / source.width, y: destination.height / source.height)
    }
}

Swift 4

func transformFromRect(from source: CGRect, toRect destination: CGRect) -> CGAffineTransform {
    return CGAffineTransform.identity
        .translatedBy(x: destination.midX - source.midX, y: destination.midY - source.midY)
        .scaledBy(x: destination.width / source.width, y: destination.height / source.height)
}

Swift

func transformFromRect(from: CGRect, toRect to: CGRect) -> CGAffineTransform {
    let transform = CGAffineTransformMakeTranslation(CGRectGetMidX(to)-CGRectGetMidX(from), CGRectGetMidY(to)-CGRectGetMidY(from))
    return CGAffineTransformScale(transform, to.width/from.width, to.height/from.height)
}

Objective-C

+ (CGAffineTransform) transformFromRect:(CGRect)sourceRect toRect:(CGRect)finalRect {
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformTranslate(transform, -(CGRectGetMidX(sourceRect)-CGRectGetMidX(finalRect)), -(CGRectGetMidY(sourceRect)-CGRectGetMidY(finalRect)));
    transform = CGAffineTransformScale(transform, finalRect.size.width/sourceRect.size.width, finalRect.size.height/sourceRect.size.height);

    return transform;
}

one of the best snippets I've ever come across. Well done – YichenBman Apr 12 '16 at 17:01 — YichenBman, Apr 12 '16 at 17:01
I added the Swift 4 version to your comment – Luís Jesus Mar 21 '18 at 23:26 — Luís Jesus, Mar 21 '18 at 23:26

score 8 · Accepted Answer · answered May 29 '12 at 15:49

I haven't been able to find a convenience method of any kind for this, so I resorted to tried and true matrix calculations to achieve this.

Given a CGRect A and CGRect B, to calculate the transformation needed to go from A to B, do the following:

CGAffineTransform transform = CGAffineTransformTranslate(CGAffineTransformIdentity, -A.origin.x, -A.origin.y);
transform = CGAffineTransformScale(transform, 1/A.size.width, 1/A.size.height);
transform = CGAffineTransformScale(transform, B.size.width, B.size.height);
transform = CGAffineTransformTranslate(transform, B.origin.x, B.origin.y);

score 4 · Answer 3 · edited May 23 '17 at 12:10

Here's a variation on josema.vitaminew answer that also considers aspect ratio (useful if you are working with videos or images):

+ (CGAffineTransform)transformFromRect:(CGRect)sourceRect toRect:(CGRect)finalRect keepingAspectRatio:(BOOL)keepingAspectRatio {
    CGAffineTransform transform = CGAffineTransformIdentity;

    transform = CGAffineTransformTranslate(transform, -(CGRectGetMidX(sourceRect)-CGRectGetMidX(finalRect)), -(CGRectGetMidY(sourceRect)-CGRectGetMidY(finalRect)));

    if (keepingAspectRatio) {
        CGFloat sourceAspectRatio = sourceRect.size.width/sourceRect.size.height;
        CGFloat finalAspectRatio = finalRect.size.width/finalRect.size.height;

        if (sourceAspectRatio > finalAspectRatio) {
            transform = CGAffineTransformScale(transform, finalRect.size.height/sourceRect.size.height, finalRect.size.height/sourceRect.size.height);
        } else {
            transform = CGAffineTransformScale(transform, finalRect.size.width/sourceRect.size.width, finalRect.size.width/sourceRect.size.width);
        }
    } else {
        transform = CGAffineTransformScale(transform, finalRect.size.width/sourceRect.size.width, finalRect.size.height/sourceRect.size.height);
    }

    return transform;
}

score 4 · Answer 4 · answered May 13 '17 at 20:41

A nice Swift 3 solution:

extension CGAffineTransform {
    init(from: CGRect, toRect to: CGRect) {
        self.init(translationX: to.midX-from.midX, y: to.midY-from.midY)
        self = self.scaledBy(x: to.width/from.width, y: to.height/from.height)
    }
}

score 1 · Answer 5 · answered Oct 11 '14 at 12:52

1

The last line in the above code snippet needs to be changed as follows:

transform = CGAffineTransformTranslate (transform, B.origin.x*A.size.width/B.size.width, B.origin.y*A.size.height/B.size.height);

answered Oct 11 '14 at 12:52

HarryS

323
3
13

software evolved · Answer 6 · 2020-02-28T19:30:48.723

I started to use Kanobius answer, but either I'm misunderstanding his use of the term "aspect ratio" or he is, because it didn't perform as I expected. Here's my version that keeps the aspect ratio of the original view (by applying the scaling to both H and W) to achieve an "aspect fit" behavior

+ (CGAffineTransform)transformFromRect:(CGRect)sourceRect toRect:(CGRect)finalRect keepingAspectRatio:(BOOL)keepingAspectRatio
{
    CGAffineTransform transform = CGAffineTransformIdentity;

    // since the scale transform works around the midpoints, align them before doing the transform.
    transform = CGAffineTransformTranslate(transform, -(CGRectGetMidX(sourceRect)-CGRectGetMidX(finalRect)), -(CGRectGetMidY(sourceRect)-CGRectGetMidY(finalRect)));

    CGFloat originalHeight = sourceRect.size.height;
    CGFloat scaledHeight = finalRect.size.height;
    CGFloat hScalePercentage = scaledHeight / originalHeight;

    CGFloat originalWidth = sourceRect.size.width;
    CGFloat scaledWidth = finalRect.size.width;
    CGFloat wScalePercentage = scaledWidth / originalWidth;

    if (keepingAspectRatio)  
    {
        CGFloat scalePercentage = MIN(hScalePercentage, wScalePercentage);   // the most amount of scaling == smallest float number
        transform =  CGAffineTransformScale(transform, scalePercentage, scalePercentage);
    }
    else
    {
        transform = CGAffineTransformScale(transform, wScalePercentage, hScalePercentage);
    }

    return transform;
}

Is there a way to calculate the CGAffineTransform needed to transform a view from frame A to frame B?

6 Answers6

Swift 5 (extension)

Swift 4

Swift

Objective-C