animateWithDuration - UITextFieldのFadeIn/FadeOutアニメーション

Question

私が取り組んでいるアプリにスコアカウンターがあります。単に数値を変更するのではなく、古いスコアがスケールアップしてフェードアウトする間に、新しいスコアをフェードインしたいと思います。

次は私が得たほど近い：

 UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: { 

     self.scoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)" 
     self.scoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5) 
     self.scoreOutlet.alpha = 0.0 

     }) { (_) in 
      UIView.animateWithDuration(0.0, animations: { 

       self.scoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0) 
       self.scoreOutlet.alpha = 1.0 

      }) 
    } 

私はこれらが同時に起こるしたいと思います。私は、クロージャが最初のアニメーションの0.6秒後に発生したことを実現しますが、animateWithDurationブロックを入れ子にすることは、ここで最もクリーンなアプローチであるとは思いませんでした。..

望ましい結果

20から25までのスコアが変更された場合： 25がフェードインしますが、同時に、20がフェードアウトし、大きくスケーリングされ、わずかに上に移動します。

Answer 1

2つのラベル、1新規の古いスコア1の場合、この方法では1つのアニメーションで両方を実行でき、完了したら新しいスコアをoldScoreLabelに設定し、もう一方のエーテルがあなたがスコアを更新するとき、eは準備ができています。

あなたはこのような何かを得る必要があります。これには比較的醜いソリューションは、フェードインとフェードアウトのビューをそれぞれ、次にあなたが微調整することによって、それらをアニメーション化表しテキストフィールド上に2つのラベルを配置することになる

UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: { 
     self.scoreOutlet.alpha = 0.0 

     self.newScoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)" 
     self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5) 
     self.newScoreOutlet.alpha = 1.0 

     }) { (_) in 
      UIView.animateWithDuration(0.0, animations: { 

       self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0) 
       self.newScoreOutlet.alpha = 0.0 

       self.scoreOutlet.alpha = 1.0 
       self.scoreOutlet.text = self.newScoreOutlet.text 
      }) 
    } 

Answer 2

をそれらのtransformおよびalphaプロパティ

我々はテキストをテキストフィールド内に配置された場合のフレームを見つける必要がありまず：

let textRect = textField.textRectForBounds(textField.bounds) 

その後、我々は、ラベルを作成し、textFieldにそれらを追加します。

let fadeOutTextLabel = UILabel(frame: textRect) 
fadeOutTextLabel.text = textField.text 
fadeOutTextLabel.textColor = textField.textColor 
fadeOutTextLabel.font = textField.font 

let fadeInTextLabel = UILabel(frame: textRect) 
fadeInTextLabel.text = textField.text == "20" ? "25": "20" 
fadeInTextLabel.textColor = textField.textColor 
fadeInTextLabel.font = textField.font 

fadeInTextLabel.alpha = 0.0 
fadeInTextLabel.transform = CGAffineTransformMakeScale(1.5, 1.5) 

textField.addSubview(fadeInTextLabel) 
textField.addSubview(fadeOutTextLabel) 

- -

ビューを拡大縮小すると、スーパービューのフレームを超えて拡大される可能性があるため、clipsToBoundsをfalseに設定する必要がありますクリップされ得ることから、それをベント：

textField.clipsToBounds = false 

-

をアニメーションブロックでは、私たちが行う必要があるすべては、2つのラベルのtransformとalpha値スワッピングさ：

UIView.animateWithDuration(
    0.7, 
    animations: { 
    fadeOutTextLabel.transform = CGAffineTransformMakeScale(1.5, 1.5) 
    fadeOutTextLabel.alpha = 0.0 

    fadeInTextLabel.transform = CGAffineTransformIdentity 
    fadeInTextLabel.alpha = 1.0 
    }, 
    completion: { finished in 
    fadeOutTextLabel.removeFromSuperview() 
    fadeInTextLabel.removeFromSuperview() 

    self.textField.clipsToBounds = true 
    self.textField.text = fadeInTextLabel.text 
}) 

-

を

サンプルプロジェクトをhereからwnloadしてください。