Search code examples
objective-cframecgaffinetransform

Translate and scale UIView in Objective-C

I want to animate a view by centering one of it's points to the center of the screen and then scale it up.

So, if I have this screen (S) with a view (V) in it, and a certain point (x):

+-------------+
|S-----------+|
||V          ||
||           ||
||           ||
||           ||
||           ||
||  x        ||
||           ||
|+-----------+|
+-------------+

I want it to animate to this position:

   +-----------+
+---V---------+|
|S |          ||
|  |          ||
|  |          ||
|  |          ||
|  |   x      ||
|  |          ||
|  +----------|+
|             |
|             |
+-------------+

where the point is centered in the screen, and then scale it like this:

+-------------------+
|V                  |
|                   |
|                   |
|                   |
|+-------------+    |
||S            |    |
||             |    |
||             |    |
||             |    |
||      x      |    |
||             |    |
||             |    |
||             |    |
||             |    |
|+-------------+    |
+-------------------+

however, I can't accomplish this, even using CGAffineTransformConcat, which I though is it designed exactly for cases like this.

I have tried this:

CGAffineTransform translateTransform = CGAffineTransformMakeTranslation(deltaPoint.x, deltaPoint.y);
CGAffineTransform scaleTransform = CGEqualAffineTransformMakeScale(40);

self.screenView.transform = CGAffineTransformConcat(translateTransform, scaleTransform);

where deltaPoint is a CGPoint having it's x and y equal to the distance between the point's absolute coordinates (relative to the screen) and the coordinates of the center of the screen, but it animates the point slightly to the right.

I also tried calculating the deltaPoint after scaling to no avail:

self.screenView.transform = CGEqualAffineTransformMakeScale(40);

// calculate deltaPoint

self.screenView.transform = CGAffineTransformTranslate(self.screenView.transform, deltaPoint.x, deltaPoint.y);

In both cases, if I comment out the scaling transform, the translation works, it moved it perfectly center, so the problem isn't in the deltaPoint calculation.

Solution

  • You want to scale your view with scale factor (Sx, Sy) and move the point (x0, y0) to (x1, y1). And you calculated dx,dy. So let do some calculation: 

    Sx.x0 + a = x0 + dx => a = dx - (Sx-1).x0
Sy.y0 + b = y0 + dy => b = dy - (Sy-1).y0

    With Sx = Sy = 40 so we have a = dx - 39.x0 and b = dx - 39.y0. So we have transform vector like that

    CGAffineTransform scaleTransform = CGAffineTransformMake(40, 0, 0, 40, a, b);
self.screenView.transform = CGAffineTransformConcat(translateTransform, scaleTransform);

    x0, y0 is your original point x in view v, before any transformation. You can call it pointX.x, pointX.y. You are using scale factor is 40 in your example so I re-use it. So that Sx-1 and Sy - 1 will return the same value, 39.