Comment faire des animations en Swift

Dans cette article nous allons voir 2 méthodes basiques pour créer des animations simples mais qui peuvent rendre votre applications exceptionnelle.

Les animations classiques

La principale fonction qu’on utilise pour animer une vue c’est :

UIView.animate(withDuration: 0.5, animations: {
    // Do animation
})

À l’intérieur du paramètre animations, on modifie les vues qui constitueront l’animation.

Au lieu d’être instantanées, les changements vont se faire en un nombre donné de secondes (le nombre passé au paramètre withDuration).

Par exemple si vous voulez déplacer une vue vers le haut, vous pouvez changer la position de son centre dans le paramètre animations :

UIView.animate(withDuration: 0.5, animations: {
    view.center = CGPoint(x: 50, y: 50)
})

On peut faire pareil avec n’importe quelle autre propriété de la vue.

On peut aussi modifier la propriété transform d’une vue pour faire d’autre types d’animations : les transformations.

Elles permettent de déplacer et d’animer des vues plus simplement.

Il y a 3 types de transformations :

• les translations
• les agrandissements (scales)
• les rotations

Par exemple :

UIView.animate(withDuration: 0.5, animations: {
    let translate = CGAffineTransform(translationX: 0, y: 100)
    let rotate = CGAffineTransform(rotationAngle: 360)
    let scale = CGAffineTransform(scaleX: 5, y: 5)

    // On applique une transformation
    view.transform = scale

    // On combine 2 animations
    view.transform = translate.concatenating(rotate)
})

Cette méthode peut également prendre d’autres paramètres pour avoir un plus grand contrôle sur votre animation.

Vous avez les paramètres :

• delay : le délai après lequel on lance l’animation
• usingSpringWithDamping : l’oscillation à la fin de l’animation
• initialVelocity : la vitesse initiale
• options : un tableau contenant des paramètres additionnels (vous avez la liste des paramètres dans la (documentation d’Apple)[https://developer.apple.com/documentation/uikit/uiview/animationoptions]) comme repeat, curveLinear…
• completion : le code à éxécuter après la fin de l’animation

Faire des animations avec des contraintes Auto Layout

Beaucoup de gens pensent que ce n’est pas possible. Mais ça l’est.

Il y a plusieurs façons de le faire.

Par exemple, tu peux mettre plusieurs contraintes et changer leurs priorités en fonction de ce que tu veux activer ou non.

Tu peux aussi créer plusieurs contraintes et changer la propriété isActive de la contrainte pour la desactiver ou non.

Ou tu peux aussi changer la constante d’une contrainte pour l’animer.

Par exemple, si je définis la contrainte suivante :

let centerY = button.centerYAnchor.contraint(equalTo: view.centerYAnchor)
centerY.isActive = true

Je peux ensuite déplacer mon élément avec notre fonction animate :

centerY.constant = -300

UIView.animate(withDuration: 0.5, animations: {
    self.view.layoutIfNeeded()
})

Utiliser la fonction layoutIfNeeded() sert à dire à notre vue qu’on a changer quelque chose dans l’interface et qu’il faut la recharger.

Conclusion

Il y a énormément de choses qui sont encore à voir avec les animations. Mais maintenant vous avez les bases qui vous permettent de faire à peu près n’importe quelle animation.

Je vous recommande de voir comment animer des boutons en complément de cette article.

Les animations peuvent complètement transformer une interface, à condition de ne pas en abuser !