AN1001 – Animation dans SHIP
Animation dans SHIP
L’animation est un élément commun à de nombreuses interfaces graphiques. Qu’il s’agisse d’un ventilateur rotatif, d’un indicateur de remplissage lent ou d’un élément lumineux, des animations subtiles peuvent améliorer une interface graphique et la rendre plus professionnelle et moderne.
Au cœur de chaque animation se trouve une série d’images qui, lorsqu’elles sont tournées sur place l’une après l’autre, forment l’impression d’un objet animé.
L’animation dans SHIP est le processus qui consiste à parcourir une série d’images à un certain rythme, en rendant chacune visible en séquence et les autres invisibles.
Fichiers de projet SHIPTide pour AN1001
En supposant que vous ayez téléchargé et installé l’environnement de développement SHIPTide Rapid GUI, téléchargez le fichier zip suivant. Décompressez les projets dans un répertoire de votre choix et ouvrez le projet correspondant à votre plateforme cible dans SHIPTide.
Il existe de nombreuses façons d’implémenter l’animation dans SHIP ; Le projet ci-joint utilise le concept d' »images groupées » et présente 4 modes de minuterie différents.
Images d’animation
Tout comme les dessins animés que vous auriez pu dessiner dans votre enfance sur un coin d’un livre et que vous avez « feuilleté » pour les animer, ces images seront affichées séquentiellement dans l’environnement d’exécution SHIPEngine. Par conséquent, lorsque vous créez les images dans Photoshop ou le programme de conception graphique de votre choix, assurez-vous que chaque image passe à la suivante exactement au bon endroit dans les limites de l’image.
Création d’un ensemble d’images d’animation
Chaque image d’animation doit être exactement de la même taille – dans cet exemple de projet, les images de ventilateur font toutes exactement 75 pixels carrés. Les voici, tous dans un format de .png alpha-blended entièrement transparent :
Dans cet exemple, les trois images en éventail ont non seulement la même taille (75 x 75 pixels), mais les dessins réels à l’intérieur des limites de l’image se trouvent exactement au même endroit que celui où ils sont tournés. Si l’une des images de ventilateur était décalée vers la droite (par exemple), vous verriez une gigue horizontale dans l’animation.
Il peut s’agir d’un effet recherché, par exemple si vous souhaitez animer une flèche se déplaçant de gauche à droite vers une cible. Mais pour de nombreuses animations, vous voudrez choisir un point central de dessin et vous assurer que les différentes versions de l’image sont centrées sur ce point à l’intérieur des limites de l’image.
Formats d’image et optimisations
Dans SHIPTide, regardez dans le volet Ressources du projet et recherchez les trois images de fans. Cliquez sur l’un d’entre eux et examinez les propriétés de l’image dans le volet Propriétés :
Toutes les images en SHIPTide doivent être pré-dimensionnés à la taille souhaitée pour l’interface graphique. SHIPTide ne met pas les images à l’échelle car sur les petits écrans LCD, les algorithmes génériques de mise à l’échelle automatique produisent rarement des résultats attrayants. Les bords sont souvent très déchiquetés et déformés.
SHIPTide ne tente pas de remplacer les outils de conception graphique haut de gamme – vous voudrez utiliser des outils comme Adobe Photoshop, Fireworks ou Illustrator pour développer vos icônes, arrière-plans et images. Vous pouvez même utiliser Microsoft PowerPoint pour générer des images – les boutons biseautés sont étonnamment faciles à créer et à exporter dans PowerPoint ! Illustrator est particulièrement puissant car vous pouvez créer vos images sources au format vectoriel, les mettre à l’échelle, les exporter à une taille fixe, puis utiliser un outil d’édition d’images comme Photoshop pour nettoyer tous les problèmes résiduels.
La création de petites images et d’icônes est un art. Des sites comme Icojam,Outil de recherche d’icônes, DryIcons (en anglais), et bien d’autres (recherchez « icônes » dans un navigateur et vous verrez !) présentent d’innombrables artistes talentueux de petites images – beaucoup peuvent être engagés pour développer vos images et s’assurer que vous avez suffisamment de droits légaux pour les utiliser.
Vous utiliserez généralement des images .png ou .gif transparentes afin que l’animation puisse se fondre en alpha sur n’importe quel arrière-plan. Bien que l’exemple de projet utilise un arrière-plan de couleur fixe, vous pouvez modifier cette couleur d’arrière-plan ou même superposer une image d’arrière-plan sous l’animation du ventilateur et le ventilateur pivotera et « flottera » sur l’arrière-plan, l’arrière-plan s’affichant à travers la partie non pale des images du ventilateur. Voici la même image de fan au-dessus d’une image où vous pouvez voir l’image sous-jacente transparaître :
Dans presque tous les outils de conception graphique, les images peuvent être enregistrées avec une profondeur de couleur de 8 ou 32 bits, avec ou sans alpha-transparence. Voici un bref tableau des différents formats d’image et de leurs capacités :
| Format | Profondeur de couleur (bits) | Transparence Alpha |
|---|---|---|
| BMP | 8,32 | Non |
| JPG | 24 | Non |
| GIF | 8 | Oui |
| PNG | 8,32 | Oui |
SHIPTide peut lire et utiliser tous ces formats. Chez Serious, nous préférons généralement les PNG 8 ou 32 bits – les PNG sont un sur-ensemble des autres formats.
Essayez de créer vos images avec une profondeur de couleur de 8 bits (avec transparence alpha) et voyez s’il y a une profondeur de couleur suffisante pour créer un résultat viable – les besoins en mémoire et les temps d’accès de ces images 8 bits plus petites sont généralement avantageux dans votre environnement d’interface graphique d’exécution. Pour des applications encore plus sensibles à la vitesse, vous pouvez pré-fusionner la ou les images sur l’arrière-plan unique souhaité et enregistrer l’image au format png/gif/jpg/bmp non transparent. Ces images, bien qu’elles ne soient pas aussi flexibles puisqu’elles ne peuvent pas être déposées sur divers arrière-plans, n’auront pas de canal de transparence et ne nécessiteront pas de fusion alpha au moment de l’exécution – une opération plus rapide et plus simple.
Groupement des images
Les trois images de fans, au lieu d’être placées directement dans la zone des ressources/images, sont placées dans un groupe nommé. Explorer le projet en SHIPTide Le groupe ressemble à ceci :
Nous expliquerons pourquoi c’est important lorsque nous montrerons comment les images sont affectées visuellement à un conteneur. Un groupe d’images peut fonctionner comme un tableau indexé de base et il existe des fonctions qui peuvent les extraire et les attribuer à des conteneurs visuels.
Création du conteneur visuel
Pour afficher une image, il suffit d’ajouter une boîte à la mise en page et de définir la propriété object pour qu’elle pointe vers l’image. Après cela, vous pouvez facilement ajuster la position de l’image et d’autres caractéristiques en manipulant les propriétés correspondantes sur la boîte.
Voici une boîte d’animation englobante du projet d’exemple :
Remarquez qu’il s’agit simplement d’une boîte centrée horizontalement et verticalement dans sa boîte parente, avec la première des trois images attachées à sa propriété d’objet. Cela configure la largeur/la hauteur/la position de la boîte au moment de la construction (par rapport au moment de l’exécution) pour correspondre aux images que nous animons.
Lorsque l’interface graphique s’exécute, cette première image s’affiche statiquement dans la page. Si vous ne voulez pas que cette image soit visible du tout jusqu’à ce qu’un signal ou une condition apparaisse, il suffit de masquer la boîte en définissant sa propriété visible sur false dans SHIPTide, puis de la définir sur true dans un script SAIL lorsque vous souhaitez que l’image soit affichée.
Le « moteur » de l’animation
Pour animer l’image, nous devons faire pivoter la propriété object du conteneur box à travers les différentes images du groupe.
Cela ne nécessite que quatre éléments de base :
- une variable qui compte en continu pour que nous puissions indexer, moduler le nombre d’images, l’image que nous voulons afficher dans la séquence
- un minuteur qui exécute la fréquence d’images de l’animation
- un auditeur qui guette la minuterie pour sonner l’alarme,
- un script qui incrémente la variable, change l’image et redémarre le minuteur
Voici ces 4 éléments de l’exemple de projet :
Dans cet exemple, la variable fanValue a le type de données Integer. Chaque fois que l‘alarme de la minuterie se déclenche (indiquant que la minuterie a expiré), l’auditeur se réveille. Notez que la condition de l’écouteur est configurée pour filtrer l’événement uniquement lorsque l’alarme est élevée.
Le script, bien documenté dans le code de cet exemple, incrémente la variable fanValue à chaque exécution du script.
Au cœur de ce texte se trouve cette expression :
box.object = getChild(fanGroup, fanValue); Le résultat de getChild() est attribué à la propriété object de la boîte. L’écran LCD sera automatiquement rafraîchi si l’image est différente de celle précédemment attribuée.
Enfin, le script redémarre le minuteur d’animation. Consultez la référence de la minuterie pour plus d’informations sur les 4 différents modes de fonctionnement de la minuterie et sur la façon de redémarrer la minuterie dans chaque mode. L’exemple de projet montre non seulement comment animer une image, mais illustre également les 4 modes de minuterie.
Démarrage et arrêt de l’animation
Vous pouvez démarrer et arrêter l’animation simplement en démarrant et en arrêtant le minuteur d’animation. Dans l’exemple de projet, le fait de toucher l’écran tactile dans la boîte conteneur active la minuterie :
Dans ce cas, le script inverse simplement la propriété enabled du minuteur, en mettant en pause/reprenant le minuteur.
Optimisation et performance
Il y a plusieurs facteurs à prendre en compte pour s’assurer que l’animation est aussi légère que possible.
Activez les minuteurs et les écouteurs uniquement lorsque nécessaire
Assurez-vous que vos minuteurs et vos écouteurs sont désactivés lorsque l’animation n’est pas requise. Si vous activez la propriété enabled de la boîte englobante,vousdésactivez tous les écouteurs à l’intérieur de ce conteneur. Cependant, le minuteur fonctionnera toujours, alors assurez-vous que la propriété enabled du minuteur est également définiesur false.
Utiliser un minuteur d’animation globale et une variable Compteur
Pour minimiser les ressources, déclarez un ensemble global de variables/minuteries/écouteurs/scripts qui peuvent piloter toutes les animations. Par exemple, la structure suivante, est une structure globale unique qui pourrait piloter les animations de l’ensemble de l’interface graphique :
Chaque animation n’aurait donc qu’une seule paire écouteur/script écoutant la variable globale animEngine.
Par exemple, si nous modifions l’un de nos fans dans la démo pour utiliser ce compteur global, la paire auditeur/script ressemblera à ceci :
Remarquez à quel point la structure est plus simple. De plus, l’activation/désactivation de l’animation implique uniquement l’activation et la désactivation de l’écouteur variable.
types d’images et construction
La vitesse de rendu des images influe sur les performances globales de l’animation et de l’interface graphique, en particulier sur les images plus grandes ou les plates-formes matérielles plus limitées sans contrôleurs graphiques matériels.
Les pixels sont rendus un par un sur ces plates-formes rendues par logiciel. Par ordre de surcharge/complexité :
- Les pixels entièrement transparents sont très rapides – ils ne font rien !
- Les pixels entièrement opaques sont rapides – ils sont simplement écrits dans la mémoire tampon
- Les pixels fusionnés alpha (partiellement opaques) sont les plus lents : la valeur actuelle de la mémoire tampon doit être lue, fusionnée avec la nouvelle valeur de couleur, puis réécrite.
Par conséquent, les animations les plus rapides proviendront d’images qui sont (a) entièrement opaques, ou (b) dont les pixels sont soit entièrement opaques, soit entièrement transparents.
