1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.
  2. Bonjour tout le monde ! Veillez consulter la Politique de forum pour comprendre nos règles, Merci a vous !
    Rejeter la notice

TUTO Création d'une animage animé avec un "Bounce effect"

Discussion dans 'Graphique & IHM' créé par PhantomX, Avr 12, 2019.

  1. PhantomX

    PhantomX Member

    Inscrit:
    Juil 11, 2018
    Messages:
    78
    J'aime reçus:
    61
    Bonjour à vous,
    Voici un petit bout de code vous permettant de créé une plaquette d'image pour animé une image avec un "Bounce effect". L'idée met venu suite à la discussion

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!



    Pour ce faire, crée une fenêtre avec ces champs : (garder les mêmes noms si vous copier/coller le code)
    1x image nommée : IMG_Plaquette
    1x image nommée : IMG_Original
    1x image nommée : IMG_Animer
    1x bouton : nommée le comme vous voulez :p

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!



    Dans "IMG_Original", placer l'image que vous voulez voir "bondir", par défaut j'ai monter le code avec une image de 32x32 pixels. (vous pourrez modifier les paramètres du code)

    Dans le boutons vous pouvez copier/coller ce code (évidement, lisez-le et essayer de le comprendre et modifiez selon vos besoin)

    Code (Windev):

    //  **** Paramètre des images ****
    // Image original
        DimImageOriginal_Largeur     est un entier = 32    // à modifié selon les dimensions de l'image original
        DimImageOriginal_Hauteur    est un entier = 32    // à modifié selon les dimensions de l'image original

    // Paramètre pour la plaquette
        NbrImageTotal         est un entier = 12 // Quantité d'image total
        NbrImageEnLargeur     est un entier = 1  // Nombre d'images en largeur  // Paramètre non pris en charge pour le moment
       
        NbrImageHauteur        est un entier = NbrImageTotal / NbrImageEnLargeur

    // Nbr de pixel que l'image se déplace à chaque plan
        PasDeDeplacement est un numérique = 1
        Deplacement est un entier = 0

    // Padding
        DimPadding_Largeur    est un entier = 4    // espace à gauche à droite de l'image
        DimPadding_Dessous    est un entier = 4    // espace sous l'image pour ne pas sortir du cadre
       
    // espace au dessus de l'image pour éviter que l'image déborde lors de la monter
    // récupération du même padding que le dessous,
    // récupération du déplacement total de l'image :
    // nombre d'images en hauteur de la plaquette X par le PAS de déplacement qu'on divise par 2 (l'image monte et redescend)
        DimPadding_Dessus    est un entier = DimPadding_Dessous + ((NbrImageHauteur * PasDeDeplacement) / 2)  


    //Dimension de la plaquette contenant les images
        DimPlaquette_Largeur est un entier = (DimImageOriginal_Largeur + (DimPadding_Largeur * 2)) * NbrImageEnLargeur
        DimPlaquette_Hauteur est un entier = (DimImageOriginal_Hauteur + DimPadding_Dessus + DimPadding_Dessous)  * NbrImageHauteur
       

    // Dimensionnement des images mémoires
        ImgOriginal est une Image
        ImgOriginal..Largeur = DimImageOriginal_Largeur
        ImgOriginal..Hauteur = DimImageOriginal_Hauteur

        ImgPlaquetteMemoire est une Image
        ImgPlaquetteMemoire..Largeur = DimPlaquette_Largeur
        ImgPlaquetteMemoire..Hauteur = DimPlaquette_Hauteur

    // x, y dans la plaquette
        ximg est un entier = 0
        yimg est un entier = 0
       
       
       
       
    //  **** Création de la plaquette ****

    // Récupération de l'image qu'on veut dupliquer
        ImgOriginal = IMG_Original  // ici on va chercher l'image dans le champ image mais pourrait provenir d'un lien, à modifier au besoin


    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (ImgPlaquetteMemoire)



    // Boucle de création des images
    POUR i = 1 _À_ NbrImageTotal
        ximg = DimPadding_Largeur
       
        // si on est rendu à plus à moitié des images on revient pour un effet de bounce
            SI NbrImageTotal / i >= 2 ALORS
                PasDeDeplacement = -

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (PasDeDeplacement)
            SINON
                PasDeDeplacement =

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (PasDeDeplacement)
            FIN
           
            Deplacement = Deplacement + PasDeDeplacement
       
       
        SI i = 1 ALORS
            // 1ere image, on veut juste l'espace de notre padding au dessus
            yimg = DimPadding_Dessus
        SINON
            // les autres images, on exécute le calcul suivant :
            // x fois l'espace du padding de dessus, x-1 fois la hauteur de l'image et x-1 fois le padding du dessous, on ajoute le déplacement de l'image pour le bounce effect
            yimg = (i * DimPadding_Dessus) + ((i-1) * DimImageOriginal_Hauteur) + ((i-1) * DimPadding_Dessous) + Deplacement
        FIN
       

        // ajout de l'image à la plaquette à l'endroit désiré
           

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (ImgOriginal, ImgPlaquetteMemoire, 0, 0, DimImageOriginal_Largeur, DimImageOriginal_Hauteur, ximg, yimg, DimImageOriginal_Largeur, DimImageOriginal_Hauteur)
           
    FIN

    // ferme le dessin mémoire
       

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (ImgPlaquetteMemoire)


    //  **** Affichage du résultat à l'écran ****

    // redimensionne une image à l'écran pour voir notre planchette une fois terminé
        IMG_Plaquette..Hauteur     = DimPlaquette_Hauteur
        IMG_Plaquette..Largeur     = DimPlaquette_Largeur
        IMG_Plaquette             = ImgPlaquetteMemoire

    // on met la nouvelle image dans le champ image animé et on l'anime pour voir le résultat
        IMG_Animer                 = ImgPlaquetteMemoire
        IMG_Animer..Animation     = Faux
        IMG_Animer..Largeur     = DimImageOriginal_Largeur + (DimPadding_Largeur*2)
        IMG_Animer..Hauteur     = DimImageOriginal_Hauteur + DimPadding_Dessous + DimPadding_Dessus
       
       

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (IMG_Animer, acpDurée, 30ms)
       

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (IMG_Animer, acpNbImageX, NbrImageEnLargeur)
       

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (IMG_Animer, acpNbImageY, NbrImageHauteur)
       
        IMG_Animer..Animation     = Vrai


    //  **** Sauvegarde de l'image ****

    // on sauvegarde l'image dans le dossier EXE du projet pour récupéré notre image
        SI

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (ImgPlaquetteMemoire,

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    (

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ()) + "Animation_" +

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    + ".png") ALORS
           

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ("Image sauvegardée")
        FIN
     
    Si tout a bien fonctionné, vous devriez voir la IMG_PLAQUETTE avec votre image répété x fois dessus et IMG_ANIMER devrait s'animer.

    Vous avez maintenant un petit bout de code vous permettant de créer des animation "bounce" très rapidement :)

    Modifier les paramètres à votre guise selon vos image.

    Le code n'a pas été tester à 100% en modifiant les paramètres alors gênez vous pas si vous voyez des amélioration, mais bon... je crois que c'est un bon départ.

    En espérant que ca puisse aider plusieurs personne

    Au plaisir :)
     
    Tags:
    khaliassas, suenodesign et WX1331 aiment ça.
  2. popoy

    popoy Well-Known Member
    MEMBRE WX

    Inscrit:
    Fev 23, 2018
    Messages:
    2,879
    J'aime reçus:
    1,531
    il manque juste les paramètres de l'image animé.
    On les trouve sur #17 de ce post

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!


    ici l'animation est programmé, mais on peut enregistré la plaquette.
     
    PhantomX apprécie ceci.

Partager cette page

Chargement...