Intégrer un gif animé dans une (partit) d'un UIScrollView

Salut, 


 


J'aurai une question concernant le problème dans lequel je suis :

 

j'ai actuellement un UIScrollView avec une image par scroll tout cela fonctionne bien, mais j'aimerai ajouter une image gif animée dans la 5ème page du scroll, j'ai bien réussi à  l'ajouter mais j'arrive pas à  l'animer comme prévu.

Si quelqu'un pourrait m'aider là -dessus ça serait super-sympa.

 


Code source .m



- (void) viewDidLoad
{
// Création du ScrollView //
    //Put the names of our image files in our array.
    imageArray = [[NSArrayalloc] initWithObjects:@page1.jpg,@page2.jpg,@page3.jpg,@page4.jpg,@page5.png,@page6.png,@page7.png,@page8.jpg,@page9.jpg,@page10.jpg,@page11.jpg,@page12.jpg,@page13.png,@page14.jpg,@page15.jpg,@page16.jpg,@page17.jpg,@page18.png,@page19.jpg,@page20.jpg,@page21.jpg,@page22.png,@page23.png,@page24.png,@page25.jpg,@page26.jpg,@page27.jpg,@page28.jpg, nil];
    
    
    imageArray2 = [[NSArrayalloc]
                   initWithObjects:@cercle1.tiff, @cercle2.tiff, @cercle3.tiff, nil];
    
    
    
    //Set the content size of our scrollview according to the total width of our imageView objects.
    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * [imageArraycount], scrollView.frame.size.height);
    
    
    
    self.scrollView.pagingEnabled = YES;
    
    
    for (int i = 0; i < [imageArray count]; i++) {
        //We'll create an imageView object in every 'page' of our scrollView.
        CGRect frame;
        frame.origin.x = self.scrollView.frame.size.width * i;
        frame.origin.y = 0;
        frame.size = self.scrollView.frame.size;
        
        imageView = [[UIImageViewalloc] initWithFrame:frame];
        imageView.image = [UIImageimageNamed:[imageArrayobjectAtIndex:i]];
        [self.scrollViewaddSubview:imageView];
        
    }
    
    for (int i = 0; i < [imageArray2 count]; i++) {
        //We'll create an imageView object in every 'page' of our scrollView.
        CGRect frame;
        frame.origin.x = self.scrollView.frame.size.width * 2;
        frame.origin.y = 0;
        frame.size = self.scrollView.frame.size;
        imageView = [[UIImageViewalloc] initWithFrame:frame];
        imageView.image = [UIImageimageNamed:[imageArray2objectAtIndex:i]];
        [self.scrollViewaddSubview:imageView];
        
    }

}


#pragma mark - UIScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
    static NSInteger previousPage = 0;
    CGFloat pageWidth = scrollView.frame.size.width;
    float fractionalPage = scrollView.contentOffset.x / pageWidth;
    NSInteger page = lround(fractionalPage);
    
    
    if (previousPage != page)
    {
        previousPage = page;
        
        if(page == 0)
        {


        }
        if(page == 1) // ETC...
    }
}


On m'a parler de conteneur web (UIWebView), mais j'arrive pas du tous à  placer ce conteneur à  la 5 ème page du scroll ?



 


Merci d'avance,


Bilel 


Réponses

  • As tu essayé de mettre ton gif dans une view normal voir dans une application a part voir déjà  si ça viendrait pas de ta façon d'implémenter les gif parce que je vois pas trop en quoi le fait de le charger dans une scrollview changerais quoi que ce soit par contre ça ajoute un niveau de difficulté.


  • Salut, 


     


    Oui je les fait et sa fonctionne bien même sur la première page du ScrollView, mais quand j'essaie de le mettre sur la 4 ème page la j'ai plus les animations, j'ai uniquement des images fixe.


     


    Est-ce que vous avez une idée sur la cause du problème ?


     


    Ajout d'une image gif fonctionnel sur la première page du scrollView



    CGRect cercleGif1 = CGRectMake ( self.scrollView.frame.size.width * 0, 0.0, self.scrollView.frame.size.width , self.scrollView.frame.size.height ) ;

    CGFloat ImageRefWidth44 = 400.0;
    CGFloat imageRefHeight44 = 15.0;

    CGRect imgGif1 = CGRectMake(cercleGif1.origin.x + 509 - ImageRefWidth44 / 2, cercleGif1.origin.y + 750 - imageRefHeight44 / 2, ImageRefWidth44, imageRefHeight44);

    animatedImageView1 = [[UIImageView alloc] initWithFrame:imgGif1];
    animatedImageView1 = [[UIImageView alloc] initWithFrame:self.view.bounds];
    animatedImageView1.animationImages = [NSArray arrayWithObjects:
    [UIImage imageNamed:@cercle1.tiff],
    [UIImage imageNamed:@cercle2.tiff],
    [UIImage imageNamed:@cercle3.tiff],
    [UIImage imageNamed:@cercle4.tiff],
    [UIImage imageNamed:@cercle5.tiff],
    [UIImage imageNamed:@cercle6.tiff],
    [UIImage imageNamed:@cercle7.tiff],
    [UIImage imageNamed:@cercle8.tiff],
    [UIImage imageNamed:@cercle9.tiff],
    [UIImage imageNamed:@cercle10.tiff],
    [UIImage imageNamed:@cercle11.tiff],
    [UIImage imageNamed:@cercle12.tiff],
    [UIImage imageNamed:@cercle13.tiff],
    [UIImage imageNamed:@cercle14.tiff],
    [UIImage imageNamed:@cercle15.tiff],
    [UIImage imageNamed:@cercle16.tiff],
    [UIImage imageNamed:@cercle17.tiff],
    [UIImage imageNamed:@cercle18.tiff],
    [UIImage imageNamed:@cercle19.tiff],nil];
    animatedImageView1.animationDuration = 2.2f;
    animatedImageView1.animationRepeatCount = 2;
    [animatedImageView1 startAnimating];
    [self.scrollView addSubview: animatedImageView1];

    Merci encore


  • NasatyaNasatya Membre
    juillet 2014 modifié #4

    animatedImageView1 = [[UIImageView alloc] initWithFrame:imgGif1];
    animatedImageView1 = [[UIImageView alloc] initWithFrame:self.view.bounds];


    Ces deux lignes cote a cote me semblent étranges je sais pas pourquoi vous faites ça mais du coup la frame de votre image sera du type (0, 0, self.view.size.width, self.view.size.height) du coup votre image ne sera surement pas à  l'index 4 sur votre scrollView.


     


    Sinon je vois pas trop pourquoi ça ne fonctionnerait pas désolé.


  • NasatyaNasatya Membre
    juillet 2014 modifié #5

    Je viens de faire un test rapide à  base de storyboard 



    UIImage *image = [UIImage animatedImageNamed:@img- duration:4.0f];
    self.imageV.image = image;
    [self.scroll setContentSize:CGSizeMake(2000, self.scroll.frame.size.height)];

    Mes images s'appellent img-1.png, img-2.png... l'origine de mon imageV en x est de 1250 en gros et quand je scroll sur ma scrollView le tout fonctionne sans souci je sais pas de quoi vient votre problème mais je ne penses pas que ça soit de la faute de la scrollView. Bon courage pour la suite.


  • Merci pour tes explication, oui je l'avais mis dans la première vue pour voir si l'animation fonctionné bien ce qui explique cette ligne (0, 0, self.view.size.width, self.view.size.height) 


     


    Dans ton exemple tu a bien placer ton UIImageView animé à  la 4ème page ou cela apparait directement dans la première page du scrollView ?


  • AliGatorAliGator Membre, Modérateur
    juillet 2014 modifié #7


    animatedImageView1 = [[UIImageView alloc] initWithFrame:imgGif1];
    animatedImageView1 = [[UIImageView alloc] initWithFrame:self.view.bounds];

    Ces deux lignes cote a cote me semblent étranges je sais pas pourquoi vous faites ça

    oui pareil ça n'est pas très logique :

    Allouer une ImageView pour l'affecter à  la variable... puis juste après en allouer une autre pour remplacer la première dans cette variable, du coup la première ne sert plus à  rien.


    C'est comme si tu faisais "x=5" puis juste la ligne d'après "x=12" du coup le 5 est écrasé par le 12 et la ligne x=5 est inutile.


    Et en plus la première ligne vous passez en paramètre à  initWithFrame un truc nommé imgGif1 et vu le nom de la variable ça laisse penser que ce imgGif1 est une NSImage alors que initWithFrame attend un CGRect. Soit la variable imgGif1 est bien un CGRect et elle est alors sans doute mal nommée, soit c'est bien une image comme le laisse penser son nom et du coup vous passez un paramètre invalide à  initWithFrame.
  • Oui mon image est bien placé dans une position lointaine (index 3 ou 4) je le dis quand j'énonce sa position x je ne penses vraiment pas que la position de l'image soit importante. Je penses plus à  un problème de l'implémentation du gif mais bon là  je saurais vraiment pas dire ce qui ne va pas. Désolé.


  • Salut AliGator,


     


    Pour réponde à  ta question imgGif1 est un CGRect, comme tu peux le voir ci dessous j'essaie d'ajouter cette image animé à  l'index[4] du scrollView.


     


    Mais quand je scroll jusqu'a l'index[4] l'image animé se replace automatiquement à  l'index[0] (la première page) et je comprend pas pourquoi, merci de m'avoir aidé je vais corriger les faute que tu ma dit et réessayer.


     


    Nasatya, je vais essayer ton code qui est un peu différent du mien, et je te dirai si sa fonctionne pour moi,


     


    merci encore pour ton aide.



    CGRect cercleGif1 = CGRectMake ( self.scrollView.frame.size.width * 4, 0.0, self.scrollView.frame.size.width , self.scrollView.frame.size.height ) ;

    CGFloat ImageRefWidth44 = 400.0;
    CGFloat imageRefHeight44 = 15.0;

    CGRect imgGif1 = CGRectMake(cercleGif1.origin.x + 509 - ImageRefWidth44 / 2, cercleGif1.origin.y + 750 - imageRefHeight44 / 2, ImageRefWidth44, imageRefHeight44);

    animatedImageView1 = [[UIImageView alloc] initWithFrame:imgGif1];
    animatedImageView1 = [[UIImageView alloc] initWithFrame:self.view.bounds];
    animatedImageView1.animationImages = [NSArray arrayWithObjects:
    [UIImage imageNamed:@cercle1.tiff],
    [UIImage imageNamed:@cercle2.tiff],
    [UIImage imageNamed:@cercle3.tiff],
    [UIImage imageNamed:@cercle4.tiff],
    [UIImage imageNamed:@cercle5.tiff],
    [UIImage imageNamed:@cercle6.tiff],
    [UIImage imageNamed:@cercle7.tiff],
    [UIImage imageNamed:@cercle8.tiff],
    [UIImage imageNamed:@cercle9.tiff],
    [UIImage imageNamed:@cercle10.tiff],
    [UIImage imageNamed:@cercle11.tiff],
    [UIImage imageNamed:@cercle12.tiff],
    [UIImage imageNamed:@cercle13.tiff],
    [UIImage imageNamed:@cercle14.tiff],
    [UIImage imageNamed:@cercle15.tiff],
    [UIImage imageNamed:@cercle16.tiff],
    [UIImage imageNamed:@cercle17.tiff],
    [UIImage imageNamed:@cercle18.tiff],
    [UIImage imageNamed:@cercle19.tiff],nil];
    animatedImageView1.animationDuration = 2.2f;
    animatedImageView1.animationRepeatCount = 2;
    [animatedImageView1 startAnimating];
    [self.scrollView addSubview: animatedImageView1];
  • Si ton image revient à  l'index 0 quand tu scroll c'est que quelque part dans le delegate de ton scroll view tu dois redonner une frame à  ton image. Sinon c'est que y a un souci mystique ça arrive que très rarement mais bon on est jamais à  l'abris :).


  • Nasatya j'ai essayer ton code, mais quand je scroll à  la 3 ème page je suis bloquer je peux que revenir en arrière


  • Si tu es sur iPad et que tu as pas changé le contentSize c'est normal. Il faut que tu adapte le content size "magique" (mon 2000 naze ce qu'il ne faut jamais au grand jamais mettre dans une application) à  n*(largeur de ta scroll view) ce qui donnerais un n*CGRectGetWidth(self.scrollView.frame) enfin un truc du genre. "n" représentant le nombre de page voulu.


  • Ok merci je vais essayer sa


  • Salut, 


     


    Je viens d'essayer à  nouveau et je suis toujours bloqué à  la page 4, je peux plus avancé je peux uniquement revenir en arrière.


     


    Ci-dessous tu peux voir le code que j'utilise dans la function


    - (void)viewDidLoad



    UIImage *image = [UIImage animatedImageNamed:@cercle1.gif duration:4.0f];
    self.imageView.image = image;
    [self.scrollView setContentSize:CGSizeMake(self.scrollView.frame.size.width * 4, self.scrollView.frame.size.height)];

    Il y'a certainement une erreur, mais bizarrement j'arrive à  ajouter des boutons et des images fixe sur n'importe qu'elle pages du scrollView mais quand je veux ajouter une image animé tel qu'un gif ou autre animation crée, la sa bloque.


     


    Merci encore pour ton aide


  • Même en utilisant ce code ci-dessous, la même erreur ce produit



    UIImage *image = [UIImage animatedImageNamed:@cercle1.gif duration:4.0f];
    self.imageView.image = image;
    [self.scrollView setContentSize:CGSizeMake(4* CGRectGetWidth(self.scrollView.frame), self.scrollView.frame.size.height)];
  • Remplace ton 



    4 * CGRectGetWidth(self.scrollView.frame)

    Par



    NB_PAGE * CGRectGetWidth(self.scrollView.frame)

    Où NB_PAGE égale le nombre de page que tu veux dans ton scrollView.


     


    Bien sur à  chaque changement de NB_PAGE il faut remettre à  jour le contentSize de la scrollView.


  • Oui quand n =  le nombre de page et que tu met ton n égale à  4 ben tu as 4 pages ça parait logique faut que tu relise mieux ton code ça donne l'impression que tu comprends que moyennement ce que tu fais. 


     


    La scroll view à  une frame une forme rectangulaire qui défini sa partie visible 


    Elle à  aussi une contentSize la partie "interne" de la scrollView ou tu pourras afficher des données qui seront accessible au scroll


     


    Donc si on regarde ça on se dis que la frame est la fraction visible de ton contentSize 


     


    Du coup dans le cas ou on active le scroll page par page on peut définir que la frame est la taille d'une page. 


     


    Donc pour avoir "n" pages on doit juste définir une content size vertical ou horizontal "n" fois superieur  a la taille de ta frame : 


     


    Pour un scroll horizontal : n * CGRectGetWidth(self.scroll.frame)


    Pour un scroll vertical :     n * CGRectGetHeigth(self.scroll.frame) 


     


    Avec "n" égale donc à  ton nombre de page. Si tu met des nombres "magique" (défini manuellement) comme dans mon exemple (ce qui était une erreur j'aurais du le corriger avant de poster) assure toi au moins qu'ils soient juste.


     


    Pour en revenir au sujet initial tu remarquera que dans mon exemple les se termine par une suite de chiffre img1.png img2.png img3.png.... par contre dans ma ligne de code il n'y à  pas de chiffre car c'est justement cette abscence de numéro qui permet à  la fonction de définir qu'elle sera l'image suivante à  afficher.


     


    Le chiffre passé en paramètre défini le temps que devra prendre une boucle complète en gros si tu as 25 images et que tu passes 1sec en paramètre tu auras une animation à  25img/sec et si tu passes 5 secondes en paramètre tu auras une animation à  5img/sec.


  • Merci pour votre aide, je viens de trouver la solution à  mon problème :


     


    Je crée un conteneur dans l'index[x] d'un UIScrollView, ensuite dans ce conteneur je place mes image animé, mes animation ou tous autre chose.


     


    Merci encore pour votre aide

Connectez-vous ou Inscrivez-vous pour répondre.