PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Accueil | Connexion | Français FR
  • 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 WatchCatalystUniversal Windows 10 AppWindows Mobile
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.
Versions 18 et supérieures
Android L'animation de la modification de champ est désormais disponible pour les applications Android.
Nouveauté 18
Android L'animation de la modification de champ est désormais disponible pour les applications Android.
Android L'animation de la modification de champ est désormais disponible pour les applications Android.
Versions 20 et supérieures
iPhone/iPad L'animation de la modification de champ est désormais disponible pour les applications iPhone/iPad.
Nouveauté 20
iPhone/iPad L'animation de la modification de champ est désormais disponible pour les applications iPhone/iPad.
iPhone/iPad L'animation de la modification de champ est désormais disponible pour les applications iPhone/iPad.
Versions 23 et supérieures
WEBDEV - Code ServeurLinuxPHP Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
Nouveauté 23
WEBDEV - Code ServeurLinuxPHP Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
WEBDEV - Code ServeurLinuxPHP Cette fonctionnalité est désormais disponible pour les sites 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/iPadWindows MobileJava

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.
Versions 23 et supérieures
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.
Nouveauté 23
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.
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/iPadWindows MobileJava
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 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.
Le champ Image (Animations) Exemples unitaires (WINDEV Mobile) : Le champ Image (Animations)
[ + ] Animation d'une image avec WINDEV Mobile.
1/ les animations de type "dessin animé"  (image à animer)
2/ les animations de type "zoom en boucle" (défilement)

Cet exemple montre un certain nombre de possibilités offertes par WINDEV Mobile 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.

1/ les animations de type "dessin animé"  (image à animer)
Une image dite à animer peut être comparée à un "dessin animé". Il s'agit d'une suite d'images fixes qui, mises les unes à la suite des autres, créent une animation. La suite d'images est regroupée dans une seule image avec un ordre logique. Celle-ci est composée d'un certain nombre de lignes et de colonnes. Il suffit alors de préciser ces informations dans la fenêtre à 7 Onglets, ainsi que la durée souhaitée entre chaque image. A l'exécution l'image s'anime.

2/ les animations de type "zoom en boucle" (défilement)
Si vous ne disposez pas d'une suite d'images fixes à animer, WINDEV Mobile vous propose de faire défiler l'image. Ceci se paramètre dans l'onglet Détail de la description de l'image (partie Animation). Vous paramétrez alors le côté d'apparition, la vitesse, le sens… Combiné au mode d'affichage de l'image (onglet général), plus de 2.000 animations différentes sont possibles.
Naturellement, tous les paramètres sont modifiables par programmation grâce aux fonctions WLangage :
AnimationChangeParamètre()
AnimationLitParamètre()
Voir Aussi
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire