web-dev-qa-db-ja.com

iPhoneのスムーズなアニメーションでUILabelのフォントサイズを変更できますか?

一部のゲームメニュー画面のように選択すると、ILabelがわずかに膨らむようにします。スムーズなサイズ変更を行うには、アニメーションブロックのラベルのプロパティに変更を加える必要があると思います。

label.font.pointSizeプロパティを変更するのは明らかですが、これは読み取り専用です。

ラベルの.transformプロパティをCGAffineTransformationMakeScale()でスケーリングすると、テキストがぼやけます。

これを行う他の方法はありますか?

38
willc2

UILabelのフォントを、拡大したときに必要なサイズに設定します。次に、それを縮小します。ラベルを膨らませたい場合は、元のサイズに拡大します。

    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);
    }];
57
Bart Whiteley

[〜#〜] updated [〜#〜] for Xcode 8/Swift 3/iOS 10SDK。

SwiftでUILabel拡張機能を作成しました。ラベルが左揃えの場合は、コメント行のコメントを解除します。

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バージョン:

@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
12
mixel

FontSizeからfontSizeにアニメーション化する場合は、CATextLayerクラスを使用できます。

// 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)
5
ober

私はこれに対する解決策を作ったところです。これもCGAffineTransformScaleに基づいていますが、他にもいくつかのトリックがあり、すべてのボーダーケースを処理します。

チェックしてください: https://github.com/ivankovacevic/ARLabel

2
Ivan Kovacevic

フォントのポイントサイズを変更することはできませんが、UILabelのフォントを、必要な新しいポイントサイズを使用する新しいUIFontに置き換えることができます。

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

特にポイントサイズを増やす場合は、新しいポイントサイズに対応するようにUILabelのフレームを変更することもできます。そうしないと、ラベルがトリミングされます。

0
Jay