Move and resize UILabel with CGAfficeTransform

Question

Basically I want to move a UILabel up 20px and resize it to 55% of it's original size.

=> x stays the same, y,height, width decrease.

What I came up is following :

//_line a UILabel* 
CGFloat scaleFactor = 0.55f;
[UIView animateWithDuration:1.0 animations:^{
    CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -20);
    transform = CGAffineTransformScale(transform, scaleFactor, scaleFactor);
    _line.transform = transform;
}];

Unfortunately I don't get the expected result. It (slightly) moves up but also moves to the right.

What am I missing ?

Answer 1

This did the job fob me : a second translation

CGFloat scaleFactor = 0.55f;
CGFloat x_delta = _line.frame.size.width * (1-scaleFactor);
CGFloat y_delta = _line.frame.size.height * (1-scaleFactor);

[UIView animateWithDuration:1.0 animations:^{
    CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -20);
    transform = CGAffineTransformScale(transform, scaleFactor, scaleFactor);
    transform = CGAffineTransformTranslate(transform, -x_delta, -y_delta);
    _line.transform = transform;
}];

Answer 2

The problem is that you're using Auto Layout. Auto Layout and view transforms are enemies of one another. You perform the transform, but then Auto Layout kicks in and changes the frame of the label essentially back to what it was.

Answer 3

The problem is that you're overwriting the transform. You initially set transform to the translation transformation, and then before anything has happened you reset it to the scale transformation. So all it's doing is the scale action.

Instead you need to combine the two matrices and store their combination into transform. Try this:

CGFloat scaleFactor = 0.55f;
[UIView animateWithDuration:1.0 animations:^{
    CGAffineTransform translationTransform = CGAffineTransformMakeTranslation(0, -20);
    CGAffineTransform scaleTransform = CGAffineTransformMakeScale(scaleFactor, scaleFactor);
    CGAffineTransform totalTransform = CGAffineTransformConcat(translationTransform, scaleTransform);
    _line.transform = totalTransform;
}];