2つの数字の間のUILabelテキストをアニメーション化しますか?


80

私はiPhoneとMacプログラミング(以前はWindows用に開発された)に不慣れで、質問があります:

イーズアウトスタイルで5から80など、2つの数値の間のtextプロパティをアニメーション化するにはどうすればよいですか?それは可能ですか?Googleで1時間検索しましたが、問題を解決するものが見つかりませんでした。私が欲しいもの:簡単なゲームのためにユーザーのお金をアニメートします。アニメーションなしで50から100などになると、見栄えが悪くなります。UILabelCoreAnimation

それを行う方法を知っている人はいますか?

ありがとう!


2
これは古い質問ですが、Pop(Facebookアニメーションフレームワーク)が良い解決策になるでしょう。textプロパティを直接アニメーション化できます。
jrturton 2014年

回答:


160

自動遷移を使用できます。それは完全にうまく機能しています:

// Add transition (must be called after myLabel has been displayed)
 CATransition *animation = [CATransition animation];
animation.duration = 1.0;
animation.type = kCATransitionFade;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[myLabel.layer addAnimation:animation forKey:@"changeTextTransition"];

// Change the text
myLabel.text = newText;

このコードは、myLabelがすでに表示されている場合に機能します。そうでない場合、myLabel.layerはnilになり、アニメーションはオブジェクトに追加されません。


スウィフト4になること:

let animation: CATransition = CATransition()
animation.duration = 1.0
animation.type = kCATransitionFade
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
myLabel.layer.add(animation, forKey: "changeTextTransition")

2
これを試しましたが(アニメーションが追加されたときにレイヤーがnilにならないように)、テキストはまだアニメーション化されていません。他の落とし穴はありますか?
elsurudo 2013年

5
ちなみに、テキストを変更してフェード効果を発生させるたびに、テキストを変更する直前にアニメーションを追加する必要があります。ただし、毎回新しいトランジションをインスタンス化する必要はありません。同じインスタンスを何度も再利用できます。
ランス

2
問題は、数値をアニメーション化する方法でした。たとえば、2つの間でグラフィカルにフェードするのではなく、値をインクリメントします。使用PRTween:github.com/shu223/TweenDemo/tree/...
15:06

14
実際、のインスタンスにを設定removedOnCompletionすると、ラベルへのすべての変更がアニメーション化されます。NOCATransitiontext
マークアダムス

1
@kientuxキーについて特別なことは何もありませんchangeTextTransition。これは単にアニメーションを識別する文字列です。つまり、後で追加したアニメーションを識別するために使用できる文字列です。後でアニメーションを識別できるようにする必要がない場合は、を指定するだけnilです。
jamesk 2017年

27

それはうまくいきます!

Objective-C

[UIView transitionWithView:self.label 
                  duration:.5f 
                   options:UIViewAnimationOptionCurveEaseInOut | 
                           UIViewAnimationOptionTransitionCrossDissolve 
                animations:^{

    self.label.text = rand() % 2 ? @"111!" : @"42";

} completion:nil];

スウィフト2

UIView.transitionWithView(label, duration: 0.25, options: [.CurveEaseInOut, .TransitionCrossDissolve], animations: {
    self.label.text = (arc4random() % 2 == 0) ? "111" : "222"
}, completion: nil)

スウィフト3、4、5

UIView.transition(with: label, duration: 0.25, options: [.curveEaseInOut, .transitionCrossDissolve], animations: {
    self.label.text = (arc4random() % 2 == 0) ? "111" : "222"
}, completion: nil)

1
の変更など、他のプロパティでも機能しましimageUIImageView
SaltyNuts 2015年

7

PRTweenと呼ばれるさまざまなタイミング関数を使用して値をトゥイーンするための優れたエンジンを見つけました。クラスをインストールし、次の行に沿っていくつかのコードを作成します。

- (IBAction)tweenValue
{
    [[PRTween sharedInstance] removeTweenOperation:activeTweenOperation];
    PRTweenPeriod *period = [PRTweenPeriod periodWithStartValue:0.0 endValue:100.0 duration:1.0];
    activeTweenOperation = [[PRTween sharedInstance] addTweenPeriod:period
                                                             target:self
                                                           selector:@selector(update:)
                                                     timingFunction:&PRTweenTimingFunctionCircOut];
}

- (void)update:(PRTweenPeriod*)period
{
    self.animatingView.center = CGPointMake(period.tweenedValue + 100.0, 200.0);
    self.valueLabel.text = [NSString stringWithFormat:@"%.2f", period.tweenedValue];
}

私のために御馳走を動作します。:)


5

新しい番号で前の番号を押しのけてカウントアップおよびカウントダウンしたい場合(ティッカーなど):

let animation = CATransition()
animation.removedOnCompletion = true
animation.duration = 0.2
animation.type = kCATransitionPush
animation.subtype = newValue > value ? kCATransitionFromTop : kCATransitionFromBottom
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
valueLabel.layer.addAnimation(animation, forKey:"changeTextTransition")

ねえ!ご回答有難うございます!これはかなりうまく機能します。私はさらに質問があるだけです。テキストの一部だけをアニメーション化する方法を知っていますか?3番目のキャラクターのように、残りは変更しないでください?数字を表示するラベルを実装したいと思います。値が変更された場合、数字のみがアニメーション化され、実際に変更されます。
ラースピーターセン

個人的には、この種のことのためにCoreGraphicsとCoreAnimationを使用することを検討したいと思います。または、いくつかのラベルをごまかしてつなぎ合わせることができますか?文字列の複雑さによって異なります。
Adam Waite 2018年

3

Swift 2.0では、次のUIView.transitionWithView()方法を使用します。

UIView.transitionWithView(self.payPeriodSummaryLabel,
        duration: 0.2,
        options: [.CurveEaseInOut, .TransitionCrossDissolve],
        animations: { () -> Void in
            self.label.text = "your text value"
        }, completion: nil)

1

別の簡単な代替手段

extension UILabel {    
    func countAnimation(upto: Double) {
        let from: Double = text?.replace(string: ",", replacement: ".").components(separatedBy: CharacterSet.init(charactersIn: "-0123456789.").inverted).first.flatMap { Double($0) } ?? 0.0
        let steps: Int = 20
        let duration = 0.350
        let rate = duration / Double(steps)
        let diff = upto - from
        for i in 0...steps {
            DispatchQueue.main.asyncAfter(deadline: .now() + rate * Double(i)) {
                self.text = "\(from + diff * (Double(i) / Double(steps)))"
            }
        }
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.