2016-05-20 5 views
1

У меня счетчик счетчиков в приложении, над которым я работаю. Вместо того, чтобы просто менять число, я хотел бы, чтобы переход к постепенному исчезновению нового балла, в то время как старая оценка масштабируется и исчезает.animateWithDuration - анимация FadeIn/FadeOut в UITextField

Следующая так близко, как я получил:

 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 блоков является чистейшим подходом здесь ..

Желаемой Result

Если изменения оценки от 20 до 25 лет : 25 будет исчезать, но в то же время 20 затухает, масштабируется больше и слегка перемещается вверх (слегка движущаяся часть не входит в мою попытку кода выше.)

ответ

2

Сделайте 2 метки, 1 для старого балла 1 для нового, таким образом, оба варианта можно сделать в 1 анимации, а в завершении установите новый балл в oldScoreLabel, чтобы другой на e готов, когда эфир вы обновите счет.

вы должны получить что-то вроде этого:

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 
      }) 
    } 
+0

Спасибо! Это создало нечто очень близкое к тому, что я представлял. – Joe

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 

-

В блоке анимации, все, что нам нужно сделать, это обмен 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 
}) 

-

enter image description here

Вы можете сделать wnload образец проекта от here.