Objective-C : Animation des propriétés d’une vue

objective-c-logo

Pour donner un peu plus de vie à une liste de contacts, je souhaitais ajouter un effet de battement de cœur à un contact lorsque celui-ci se connecte. Voici comment j'ai procédé :

1. Récupérer les données

Un battement de cœur cela semble simple : une pulsation toutes les secondes mais sur quelle échelle ? Essayons donc avec des données "réelles"! Sur le site Physionet, nous avons accès à une importante base de données de signaux physiologiques, intéressons-nous alors aux données d'un ECG (Electrocardiogramme) : http://physionet.org/lightwave.

Ce site fournit le graphique et les données brutes du signal choisi :

Capture d’écran 2015-04-09 à 09.13.42

Capture d’écran 2015-04-09 à 09.14.37

 

 

 

2. Purger les données

Conservons uniquement les données de l'ECG filtrées et nettoyons les avec Excel :

Capture d’écran 2015-04-09 à 09.20.40

Après avoir conservé une seule pulsation (une seconde), il reste tout de même 500 valeurs. Pour chaque changement de la variation nous conservons la donnée brute, ce qui nous permet de réduire à une vingtaine de valeurs que nous transformons en un coefficient d'augmentation de taille :

Capture d’écran 2015-04-09 à 09.25.54

3. Mise en oeuvre dans le code

Pour mettre en place ce battement de coeur, nous allons faire varier l'échelle (taille) d'une UIView en lui ajoutant une Animation gérée avec des "Key Frames" : CAKeyframeAnimation Class Reference - Apple Developer

Les KeyFrame Animation permettent de définir plusieurs valeurs sur une échelle de temps que l'on définit soi même.

Ci-dessous le code commenté à mettre en place :

Capture d’écran 2015-04-09 à 09.48.44

 

Et voici le résultat :

 

Ci-dessous le projet Xcode de cet exemple :

TestAnimation

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.