Swift 3: Comment animer une couleur d'arrière-plan de vue similaire à une barre de progression

Question

Lorsque l'utilisateur saisit le contrôleur de vue qui contient l'image ci-dessous, je souhaite que la couleur bleue soit animée en fonction de la valeur qui est dans ce cas 70 Cela signifie que la couleur commence à charger à partir de 0px dans la vue et s'arrête à la valeur de n'importe quelle valeur. En outre, je voudrais que le nombre compte de 0 à la valeur finale en même temps que la couleur se charge. Y a-t-il des astuces/liens ou une direction dans laquelle vous pourriez me pointer pour y parvenir? Merci d'avance!

Answer 1

Créer progressView avec le désiré backgroundColor

let progressView = UIView(frame: CGRect(x: 0, y: 0, width: 1, height: 50)) 
progressView.backgroundColor = .blue 
self.view.addSubview(progressView) 

appel de la fonction suivante pour animer sa largeur proportionnelle à progress

func setProgress(_ progress: CGFloat) { 
    let fullWidth: CGFloat = 200 
    let newWidth = progress/100*fullWidth 
    UIView.animate(withDuration: 1.5) { 
     self.progressView.frame.size = CGSize(width: newWidth, height: self.progressView.frame.height) 
    } 
} 

Créer une progressLabel et une variable currentProgress

let progressLabel = UILabel(frame: CGRect(x: 0, y: 100, width: 50, height: 50)) 
var currentProgress: CGFloat = 0 
label.text = String(currentProgress) 
self.view.addSubview(progressLabel) 

Appelez la fonction suivante pour mettre à jour ses progrès dans une boucle avec retard, par exemple: setLabelProgress(initialValue: self.currentProgress, targetValue: 70)

func setLabelProgress(initialValue: CGFloat, targetValue: CGFloat) { 

    guard currentProgress != targetValue else { return } 

    let range = targetValue - initialValue 
    let increment = range/CGFloat(abs(range)) 
    let duration: TimeInterval = 1.5 
    let delay = duration/TimeInterval(range) 
    currentProgress += increment 
    progressLabel.text = String(describing: currentProgress) 

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + delay) { 
     self.setLabelProgress(initialValue: initialValue, targetValue: targetValue) 
    } 
} 

Pour la deuxième étiquette appeler la même fonction, mais la permutation initialValue et targetValue