Erreur d'indication en faisant clignoter l'élément d'interface utilisateur

Question

J'ai une vue où l'utilisateur doit faire une sélection avant qu'un bouton ne fonctionne. Pour que cela soit plus évident, je veux que l'élément qui représente la sélection qui doit être faite clignote si le bouton (grisé) est pressé en premier. C'est à dire. Je veux indiquer que c'est une erreur dans cet état et attirer l'attention de l'utilisateur sur l'élément d'interface utilisateur qu'ils doivent utiliser en premier.

Ma tentative actuelle d'avoir l'élément (self.display dans le code ci-dessous) clignote rapidement deux fois est la suivante:

@IBAction func inactiveButtonClick() { 
    let period = 0.16 

    UIView.animate(withDuration: period/2, delay: 0.0, options: [.curveEaseInOut, .autoreverse, .repeat], animations: { 
     self.display.alpha = 0 
    }, completion: { _ -> Void in 
     self.display.alpha = 1 
    }) 

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + period*2, execute: { 
     self.display.layer.removeAllAnimations() 
    }) 

} 

Cela fonctionne assez bien, mais ne se sent pas à 100% à droite, et l'animation est parfois coupée des fractions de seconde avant qu'elle ne finisse. Je suppose que je pourrais mettre en file d'attente deux animations, mais je me demande s'il existe un moyen plus facile d'accomplir cela. Existe-t-il des moyens intégrés pour faire clignoter un élément de l'interface utilisateur pour indiquer une erreur? Si non, existe-t-il des combinaisons de «courbes» et de fréquences «connues» qui transmettent cette information à un utilisateur?

Answer 1

animations d'images clés semblent comme un ajustement parfait dans ce scénario:

UIView.animateKeyframes(withDuration: period, delay: 0.0, options: [], animations: { 
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: { 
     self.display.alpha = 0 
    }); 
    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: { 
     self.display.alpha = 1 
    }); 
}, completion: nil); 

Vous créez d'abord une animation image clé d'une durée de la période. A l'intérieur du bloc d'animations, vous pouvez ajouter des animations d'images clés personnalisées en spécifiant l'heure de début relative (entre 0 et 1 - 1 fin de l'animation de l'image clé, donc votre durée). Donc d'abord, nous ajoutons une animation qui commence au début et sa durée relative est de 0,5 pour 1/2 de la durée totale de l'animation. La deuxième animation commencera quand la première finira à la moitié de l'animation totale et continuera pour le reste 1/2 du temps d'animation.

Espérons que cela aide