DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE
Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Image
  • Présentation
  • Fabriquer une image animée par WINDEV/WINDEV Mobile/WEBDEV
  • Utiliser une image animée dans une application WINDEV/WINDEV Mobile ou un site WEBDEV
  • Utiliser une image animée dans une application WINDEV ou WINDEV Mobile
  • Utiliser une image animée dans un site WEBDEV
  • Programmation d'une image animée
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
WINDEV, WINDEV Mobile et WEBDEV permettent de manipuler plusieurs types d'images animées :
  • Les images animées par défaut. Ces images ont un format d'images animées (GIF animé par exemple). La gestion de ces images animées est automatique. Aucune configuration spécifique n'est nécessaire.
    Android Les images animées par défaut (par exemple les GIF animés) ne sont pas disponibles.
  • Les images animées par WINDEV/WINDEV Mobile/WEBDEV. Ces images contiennent tous les dessins de l'animation.
WEBDEV - Code Serveur Remarque : WEBDEV permet également :
Cette page d'aide présente comment manipuler les images animées par WINDEV, WINDEV Mobile et WEBDEV.
Fabriquer une image animée par WINDEV/WINDEV Mobile/WEBDEV
Pour construire une image animée :
  1. Créez un fichier image.
  2. Dans ce fichier image, insérez les différents dessins composant l'animation. Ces dessins peuvent être aussi bien présentés en ligne ou en colonne, ou une combinaison de lignes et de colonnes.
Attention : Chaque dessin doit avoir la même taille et l'espace entre chaque dessin doit être identique.
Exemple :
Utiliser une image animée dans une application WINDEV/WINDEV Mobile ou un site WEBDEV
WINDEVAndroidiPhone/iPadJava

Utiliser une image animée dans une application WINDEV ou WINDEV Mobile

Pour utiliser une image animée personnalisée dans une application WINDEV ou WINDEV Mobile :
  1. Créez un champ Image.
  2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel du champ Image).
  3. Dans l'onglet "Général", sélectionnez le fichier contenant l'image animée.
  4. Dans l'onglet "Détail", paramétrez les options d'animation. Choisissez le type d'animation et configurez les options associées.
Selon le mode d'affichage choisi, les options peuvent varier.
Les options "en boucle" ou "aller-retour" permettent de paramétrer le mode de lecture des dessins du fichier image. Il est possible de lire les images de gauche à droite et de bas en haut ("sens normal") ou dans le "sens inverse".
Il est possible d'indiquer :
  • Le temps d'affichage de chaque dessin de l'animation (option "Durée / Image").
  • Le nombre de dessins présents dans la largeur et la hauteur du fichier image. En fonction du nombre indiqué, l'image sera automatiquement découpée en autant de dessins que nécessaire.
L'animation sera réalisée en affichant chaque dessin à intervalle de temps régulier.
WEBDEV - Code Serveur

Utiliser une image animée dans un site WEBDEV

Pour utiliser une image animée personnalisée dans un site WEBDEV :
  1. Créez un champ Image.
  2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel du champ Image).
  3. Dans l'onglet "Général" :
    • Sélectionnez le fichier contenant l'image animée.
    • Cochez l'option "L'image est une planche d'animation" et dans la fenêtre qui s'ouvre, paramétrez les options d'animation.
      • Les options "en boucle" ou "aller-retour" permettent de paramétrer le mode de lecture des dessins du fichier image. Il est possible de lire les images de gauche à droite et de bas en haut ("sens normal") ou dans le "sens inverse".
      • Le temps d'affichage de chaque dessin de l'animation (option "Durée entre chaque image").
      • Le nombre de dessins présents dans la largeur et la hauteur du fichier image. En fonction du nombre indiqué, l'image sera automatiquement découpée en autant de dessins que nécessaire.
L'animation sera réalisée en affichant chaque dessin à intervalle de temps régulier.
WINDEVAndroidiPhone/iPadJava
Programmation d'une image animée
Différentes fonctions du WLangage permettent de gérer les images animées. Ces fonctions sont les suivantes :
AnimationChangeParamètreChange un des paramètres d'animation utilisé pour :
  • une image animée (dans un champ Image),
  • un texte animé (dans un champ Libellé).
AnimationChangeTypeChange le type d'animation :
  • d'une image dans un champ Image.
  • d'un texte dans un champ libellé.
AnimationLitParamètreLit la valeur d'un des paramètres d'animation défini pour un champ Image ou pour un champ Libellé.
Différentes propriétés du WLangage permettent de gérer les images animées. Ces propriétés sont les suivantes :
AnimationLa propriété Animation permet de gérer l'animation d'une image.
AnimationInitialeLa propriété AnimationInitiale permet de connaître l'état initial de l'animation dans un champ Image, un champ Bouton, un champ Libellé ou un champ Carrousel.
Liste des exemples associés :
Le champ Image (animations) Exemples unitaires (WINDEV) : Le champ Image (animations)
[ + ] Animation d'une image avec WINDEV.

Dans cet exemple, nous abordons les deux principaux thèmes suivants :
1/ les animations de type "dessin animé"  (image à animer)
2/ les animations de type "zoom en boucle" (défilement).

Résumé de l'exemple livré avec WINDEV :
Cet exemple montre un certain nombre de possibilités offertes par WINDEV pour animer des images.
Cette liste est loin d'être exhaustive car en combinant les différents modes, le nombre d'animations possibles est supérieur à 2.000.
Cet exemple propose des animations sans aucun code et des animations programmées.
Voir Aussi
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale