Is it possible to change the font size of UILabel with smooth animation on the iPhone?

Question

I want UILabel to swell slightly when selected, as on some game menu screens. To get a smooth resizing, I suggest that I have to make some changes to the properties of the label in the animation block.

The obvious thing to try is to change the label.font.pointSize property, but this is read-only.

Scaling the .transform property with CGAffineTransformationMakeScale () makes the text blurry.

Is there any other way to do this?

Answer 1

Set the font to UILabel as the size you want when it is enlarged. Then reduce it. When you want the label to swell, scale it to its original size.

messageLabel.font = [UIFont boldSystemFontOfSize:45]; messageLabel.transform = CGAffineTransformScale(messageLabel.transform, 0.25, 0.25); [self.view addSubview:messageLabel]; [UIView animateWithDuration:1.0 animations:^{ messageLabel.transform = CGAffineTransformScale(messageLabel.transform, 4, 4); }]; 

Answer 2

UPDATED for Xcode 8 / Swift 3 / iOS 10 SDK.

I created the UILabel extension in Swift. Uncomment commented out the lines if your label is left justified.

 import UIKit extension UILabel { func animateToFont(_ font: UIFont, withDuration duration: TimeInterval) { let oldFont = self.font self.font = font // let oldOrigin = frame.origin let labelScale = oldFont!.pointSize / font.pointSize let oldTransform = transform transform = transform.scaledBy(x: labelScale, y: labelScale) // let newOrigin = frame.origin // frame.origin = oldOrigin setNeedsUpdateConstraints() UIView.animate(withDuration: duration) { // self.frame.origin = newOrigin self.transform = oldTransform self.layoutIfNeeded() } } } 

Objective-C version:

 @interface UILabel(FontAnimation) - (void) animateToFont:(UIFont*)font withDuration:(NSTimeInterval) duration; @end @implementation UILabel(FontAnimation) - (void) animateToFont:(UIFont*)font withDuration:(NSTimeInterval) duration { UIFont * oldFont = self.font; self.font = font; // CGPoint oldOrigin = self.frame.origin; CGFloat labelScale = oldFont.pointSize / font.pointSize; CGAffineTransform oldTransform = self.transform; self.transform = CGAffineTransformScale(self.transform, labelScale, labelScale); // CGPoint newOrigin = self.frame.origin; // self.frame = CGRectMake(oldOrigin.x, oldOrigin.y, self.frame.size.width, self.frame.size.height); [self setNeedsUpdateConstraints]; [UIView animateWithDuration:duration animations: ^{ // self.frame = CGRectMake(newOrigin.x, newOrigin.y, self.frame.size.width, self.frame.size.height); self.transform = oldTransform; [self layoutIfNeeded]; }]; } @end 

Answer 3

If you want to animate from fontSize to fontSize, you can use the CATextLayer class

 // create text layer let textLayer = CATextLayer() textLayer.font = UIFont.systemFontOfSize(50) textLayer.fontSize = 50 textLayer.string = "text" textLayer.foregroundColor = UIColor.redColor().CGColor textLayer.backgroundColor = UIColor.blackColor().CGColor textLayer.frame = CGRect(x: 100, y: 100, width: 100, height: 100) view.layer.addSublayer(textLayer) // animation let animation = CABasicAnimation(keyPath: "fontSize") animation.toValue = 10 animation.duration = 3 textLayer.layer.addAnimation(animation, forKey: nil) 

Answer 4

I just decided for this. It is also based on the CGAffineTransformScale, but it also has some other sleeve tricks and handles all boundary cases:

Check it out: https://github.com/ivankovacevic/ARLabel

Answer 5

You cannot change the font point size, but you can replace the UILabel font with the new UIFont, which uses the new point size you want.

 label.font = [UIFont fontWithName:@"Arial-BoldMT" size:12.0]; // ... some time later label.font = [UIFont fontWithName:@"Arial-BoldMT" size:14.0]; 

You probably also want to change the UILabel frame to accommodate the new point size, especially if you increase the point size. Otherwise, your label will be truncated.