iPhone réaliser une animation fluide à l'aide de la barre de progression de la minuterie

Je suis en train de mettre en œuvre un questionnaire simple application sur l'iphone dans l'esprit de l'apprentissage, une partie de cette application est d'une minuterie.

Je veux que mon minuteur de compte à rebours de 10 à 0. J'ai eu un simple NSTimer qui se répète et appelle une méthode, à chaque seconde, et dans cette méthode que j'ai mise à jour d'un label qui affiche le temps restant, qui fonctionne très bien.

Maintenant, au lieu de l'affichage de la minuterie à l'aide d'une étiquette que je voulais utiliser une barre de progression graphique, j'ai donc créé une dizaine d'images, une pleine longueur (représentant 10), la prochaine 9/10 de la taille et ainsi de suite, et dans ma répétition de minuterie plutôt la méthode de mise à jour d'une étiquette-je mettre à jour une UIImage avec l'image appropriée au fil du temps la barre de progression devient de plus en plus petites.

Mon problème est qu'en raison de la façon dont je l'ai mis en œuvre la barre de progression, ça n'est pas très lisse, quand il met à jour à chaque seconde. Est-il une autre façon pour moi de l'approche de développement de ce type de fonctionnalité? J'ai entendu dire que vous pourriez utiliser un extensible image pour obtenir un effet plus lisse, mais je ne pouvais pas voir de bons exemples.

Tous les conseils et les exemples de code de bienvenue, juste essayer d'apprendre ici.

Il va chercher plus fluide avec plus d'images de la mise à jour plus souvent, par exemple, 1/10ème de seconde. Dépend si c'est la solution que vous recherchez. (le bar)
Pourquoi n'utilisez vous pas un simple UIProgressView? Beaucoup plus simple à gérer.
merci, je n'avais pas vu UIProgressView (yep débutant à l'iPhone dev ici)
merci pour la suggestion - j'ai décidé à l'encontre de cette approche car je ne voulais pas créer de nombreuses images & lire que le chargement beaucoup de gens de cette façon ne serait pas bon pour la performance.

OriginalL'auteur MattStacey | 2011-06-07

5

Après enquête sur les quelques options que j'ai décidé d'utiliser un UIProgressView (suggéré par sudo dans les commentaires) couplé avec un NSTimer qui met à jour les progrès de dix fois par seconde pendant une dizaine de secondes, j'ai utilisé cette solution car:
1. C'est un élément standard fourni par apple.
2. Cette option n'a pas la surcharge de la création et de chargement de 100 images (comme suggéré par le Krypton dans les commentaires).
3. Par le NSTimer je peux ajouter une case à la fonction updateProgressBar pour ajouter des commentaires à l'utilisateur lorsque la minuterie atteint faible, de l'e.e. vibreur pour les trois dernières secondes, etc (à l'aide de l'animation, je ne pense pas que j'aurais cette option).
À l'aide du code ci-dessous supposent j'ai un UIProgressView variable nommée 'progressView", un NSTimer nommé "timer" et un virgule flottante variable nommée "time", puis:
```
-(void)updateProgressBar
{
    if(time <= 0.0f)
    {
        //Invalidate timer when time reaches 0
        [timer invalidate];
    }
    else
    {
        time -= 0.01;
        progressView.progress = time;
    }
}

-(void)animateProgressView2
{
    progressView.progress = 1;
    time = 1;
    timer = [NSTimer scheduledTimerWithTimeInterval: 0.1f
                                             target: self
                                           selector: @selector(updateProgressBar)
                                           userInfo: nil
                                            repeats: YES];
}
```
Une autre façon j'ai fait (après avoir vu Disco commentaires), mais a décidé contre a été d'utiliser l'animation. Dans cet exemple, j'ai créé deux images png, nommé " redbar.png' et 'greenbar.png', l'idée d'apporter ils seraient placés les uns sur les autres (la barre verte en haut/au premier plan), et sur la durée de l'animation de la barre verte se rétrécit, révélant la barre rouge en arrière-plan.
```
UIImage *green= [UIImage imageNamed:@"greenbar.png"];
UIImage *red= [UIImage imageNamed:@"redbar.png"];

redBar.image = red; //allocate the red image to the UIImageView
redBar.frame = CGRectMake(20,250,220,30);//set the size of the red image

greenBar.image = green; //allocate the green image to the UIImageView
greenBar.frame = CGRectMake(20,250,220,30);//set the size of the green image

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:10]; //the time you want the animation to last for
[UIView setAnimationDidStopSelector:@selector(animationFinished)];//the method to be called once the animation is finished
    //at the end of the animation we want the greenBar frame to disappear
    greenBar.frame = CGRectMake(20,250,0,30);
[UIView commitAnimations];
```
Une solution idéale serait de combiner les UIProgressView et la UIAnimation bloc, mais ce n'est pas actuellement une option (voir cette question animer un UIProgressView du changement).

Espère que cela aide quelqu'un dans l'avenir.

EDIT::

Il semble que le idéal solution que j'ai mentionné ci-dessus est maintenant disponible dans iOS5, prises à partir de l'apple site de référence:

setProgress:animation:
Ajuste le courant des progrès montrés par le récepteur, éventuellement animer le changement.
- (void)setProgress:(float)animée d'avancement:(BOOL)animé
Il y a une grave faiblesse dans la deuxième manière à vous offrir dans votre post (je veux dire que les cas avec UIImage + UIImage) - si le périphérique été tourné nous avons eu de sérieux rotation de l'animation des gal. De Plus, nous ne pouvons pas faire d'orientation dépendant de redimensionner la barre de progression, parce que lors de la rotation de l'appareil, notre barre de progression devrait redimensionner, respectivement, et cela est impossible, car elle est déjà dans un autre animation de la transaction.

OriginalL'auteur MattStacey
1

Peut ne pas être ce que vous cherchez, mais peut vous aider.
Pourquoi ne pas avoir un UIImageView avec votre image en taille réelle puis appliquer de la UIView animations pour une durée déterminée? De cette façon, la réduction se fera en douceur.
```
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"YourImage.png"]];
imageView.frame = CGRectMake(0,0,320,30);//starts big
[self.view addSubview:imageView];
[UIView beginAnimations:@"Progress Bar Animation" Context:nil];
[UIView setAnimationDuration:10]; //whatever time you want
imageView.frame = CGRectMake(0,0,10,30);//ends small
[UIView commitAnimations];
```
C'est peut être ce que vous cherchez, je ne suis pas sûr. Semble juste un peu plus facile que d'utiliser des dix images différentes.

Merci pour votre réponse Disco, m'a aidé sur mon chemin pour le choix de mon approche

OriginalL'auteur StuStirling

Je n'en augmentant le paramètre de progrès de l' (de 0,01 à 1,00) (0.001 - 1.000) et la diminution de la différence de temps entre l'établissement de valeurs de progrès.

Voici mon code ci-dessous avec trois vitesses différentes de l'animation.

 -(void)setProgressViewProgress
{
    //Check for completion
    if(progress > 1.0)
    {
        [self progressCompleted];
        return;
    }
    //Diffrent speed for range
    CGFloat speed;
    //From 0.000 to 0.500 speed is 500*0.007 = 3.5 seconds    0.007(sec) => x(sec) = Total time in range(sec) /500.0 ==> 3.5/500.0 = 0.07
    if(progress<0.50)
    {
        speed = 0.007;
    }
    //From 0.500 to 0.750 speed is 250*0.005 = 1.25 seconds 0.005(sec) => x(sec) = Total time in range(sec) /500.0 ==> 1.25/250.0 = 0.05
    else if(progress<0.75)
    {
        speed = 0.005;
    }
    //From 0.750 to 1.0 speed is 250*0.002 = 0.5 seconds 0.002(sec) => x(sec) = Total time in range(sec) /500.0 ==> 0.5/250.0 = 0.02
    else
    {
        speed = 0.002;
    }
    //Increase the progress view by 1/1000  for smooth animation
    progress+=0.001;
    [progressView setProgress:progress];
    [self performSelector:@selector(setProgressViewProgress) withObject:nil afterDelay:speed];
}

OriginalL'auteur iTamilan

Vous devez vous connecter pour publier un commentaire.