Une UITableView animée

25.04.2012

Les animations sont un élément central des applications mobiles : chaque centimètre carré d’écran étant précieux, les animations sont un bon moyen de rajouter du sens à une interface utilisateur. On les retrouve d’ailleurs à de très nombreux endroits sur iOS ; cela dit, après plusieurs années d’utilisation, du renouveau dans ce domaine est toujours agréable.

Au début de ce mois, Hakim El Hattab a écrit une très impressionnante démo de défilements en CSS3 que vous pouvez essayer dans votre navigateur web (s’il est suffisament récent). Si cette démo fonctionne parfaitement bien sur un ordinateur de bureau, elle n’est en revanche pas encore au point sur mobile : l’animation est relativement lente sur un iPhone, et la page peut même faire planter Mobile Safari.

Néanmoins le concept est vraiment très bon, et ces démos ne réclament qu’à briller sur iPhone. C’est précisément ce que nous avons fait.

Encore mieux, nous avons écrit tout notre code comme une sous-classe très simple de UITableView. Ainsi, utiliser ces animations dans votre propre projet est extrêmement simple : il suffit de rajouter deux fichiers, et de choisir l’animation qui vous plait. Vous pouvez même très simplement rajouter vos propres animations.

Le code source est disponible sous une license BSD sur notre repository GitHub.

Faites attention néanmoins : bien que ces effets soient particulièrement ludiques, il ne faut pas en abuser. En fonction du contexte, ils peuvent faire plus de mal que de bien à votre interface. Cependant, pour notre démonstration nous avons choisi des effets particulièrement visibles : étant donné votre cas d’usage, il est tout à fait possible d’écrire vos propre transitions, plus subtiles et plus adaptées.