3 votes

Afficher un chronomètre animé comme le compteur de la pompe à essence à l'aide de NSTimer

Je suis nouveau dans le développement iOS.Lorsque j'appuie sur le bouton de démarrage du chronomètre, je veux afficher la minuterie comme un effet de jeton de compteur.J'ai joint l'image pour votre référence.J'ai fait pour afficher les secondes et les minutes mais je ne sais pas, comment animer l'effet de défilement automatique ? Comment puis-je faire cela ?

Lorsque le compteur est en mouvement, il ne doit pas sauter d'un chiffre à l'autre, mais passer d'un chiffre à l'autre en douceur, tout comme le compteur de la pompe à essence. Merci de votre compréhension. Default state

start 1

enter image description here

enter image description here

2voto

J'ai déjà fait quelque chose de ce genre auparavant - ce code n'est pas nécessairement propre, mais il fait l'affaire.

Vous souhaitez créer deux UILabel dans votre fichier .h :

IBOutlet UILabel *figureLabel1;
IBOutlet UILabel *figureLabel2;

Vous souhaitez ensuite créer un BOOL afin que nous puissions savoir quel UILabel est visible par l'utilisateur.

BOOL firstLabel;

Imaginons donc que l'étiquette initiale (affichant le chiffre 1) soit figureLabel1 et l'avenir UILabel à afficher (en montrant le chiffre 2) est le suivant figureLabel2 . Cependant, lorsque le compteur ajoute un, alors le figureLabel2 se déplace vers le haut et prend la figureLabel1 à la place du président. Ensuite, pendant que le figureLabel1 est caché, il prend la place de figureLabel2 cuando figureLabel1 était visible.

Voir ici :

    // Check what label is showing
    if (firstLabel == YES) {

    // Following code the hide and move the figureLabel1

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationDelegate: self]; //or some other object that has necessary method
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

    // Slowing fade out the figureLabel1
    [figureLabel1 setAlpha:0];

    // Move the figureLabel1 up and out of the way
    [figureLabel1 setFrame:CGRectMake(20, 108, 287, 55)];

    [UIView commitAnimations];

    // Following code the show and move the figureLabel2

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];

    // Slowing fade in the figureLabel2
    [figureLabel2 setAlpha:1];

    // Move the figureLabel2 up and into position
    [figureLabel2 setFrame:CGRectMake(20, 141, 287, 55)];

    [UIView commitAnimations];

    // Update BOOL for next label
    firstLabel = NO;

} else {
    // Exactly the same but opposite

}

Comme je l'ai dit, ce n'est pas très joli, mais cela montre le concept de base. Tous nos vœux de réussite !

1voto

Hayaßusa Points 1

Vous devez faire défiler manuellement tableView au lieu de scrollToRowAtIndexPath parce que cette animation utilise son propre intervalle de temps et qu'il est très difficile, voire impossible, de modifier son intervalle de temps.

Je suis donc en train d'implémenter une API pour ce genre de problèmes et j'ai créé une application de démonstration pour vous avec un défilement fluide comme vous le souhaitez.

Vous devez utiliser une minuterie externe qui se déclenche toutes les 1 secondes et une minuterie interne qui se déclenche toutes les 0,03 secondes. La hauteur de ma tableRow étant de 30, j'ai calculé l'intervalle de la minuterie interne comme suit :---

Déplacez 30 pixels pendant 1 seconde, puis Déplacement d'un pixel pendant 0,33 seconde à l'intérieur de la minuterie interne.

La minuterie interne sera invalidée et déclenchée toutes les 1 secondes comme initialisé dans la minuterie externe.

Et la minuterie interne effectuera le mouvement de la cellule.

dial4 est un tableView

Jetez un coup d'œil à mon code.

#define rowHeight 30

-(void)startCounter
{
    outertimer=[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(snapCell) userInfo:nil repeats:YES];
}

-(void)stopCounter
{
    [outertimer invalidate];
}

-(void)snapCell
{
    NSLog(@"Initialize Internal timer %i",secLsb);
    secLsb++;

    if (secLsb==10) {
        [dial4 setContentOffset:CGPointMake(0, 0) animated:NO];
        secLsb=0;
         NSLog(@"dial content offset y is %f",dial4.contentOffset.y);
    }

    [internaltimer invalidate];
    internaltimer=[NSTimer scheduledTimerWithTimeInterval:0.03
                                     target:self
                                   selector:@selector(automaticScroll)
                                   userInfo:nil
                                    repeats:YES];
}

-(void)automaticScroll
{
    NSLog(@"val is & y ======== %f",dial4.contentOffset.y);

    [dial4 setContentOffset:CGPointMake(dial4.contentOffset.x,dial4.contentOffset.y+1) animated:NO];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return rowHeight;
}

Jetez un coup d'œil à Compteur de temps

0voto

Niru Mukund Shah Points 2260

D'après l'image, on peut supposer que vous essayez d'obtenir un effet comme un compte à rebours. Jetez un coup d'œil à compte à rebours ici. Cela peut vous aider d'une manière ou d'une autre.

Bonne programmation !

0voto

0voto

Steven McGrath Points 1147

Plusieurs bonnes idées ont été émises jusqu'à présent, mais j'en ajouterai une autre.

Tout d'abord, veillez à configurer la vue du conteneur (votre rectangle bleu) pour découper les enfants, en utilisant la case à cocher Découper les vues secondaires dans le Constructeur d'interface.

Deuxièmement, ajoutez un ensemble de vues enfant avec des images de chaque chiffre pour chaque chiffre à présenter (4 * 10 = 40 vues enfant dans votre cas). Utilisez des balises dans IB afin de pouvoir accéder facilement à chacune d'entre elles. Définissez les limites initiales juste en dessous de votre marge inférieure.

Appeler UIView animateWithDuration. Dans le bloc d'animation, définissez le cadre de la nouvelle vue numérique pour qu'elle apparaisse dans les limites de la vue parentale découpée, et définissez le cadre de l'ancienne vue numérique pour qu'il soit juste au-dessus des limites du conteneur. Comme les changements de cadre des deux vues sont animés dans le même bloc, cela créera l'effet d'un nouveau chiffre qui glisse vers le haut tandis que l'ancien chiffre glisse vers le haut.

Dans le bloc d'achèvement, remettez le cadre de l'ancien chiffre à sa position d'origine sous la vue du conteneur.

Avec cette approche, vous pouvez jouer avec la durée et les courbes de synchronisation, afin d'émuler la pause qui se produit lorsque chaque chiffre est entièrement affiché entre les transitions.

Une approche similaire peut également être utilisée avec CALayer ou avec des sprites, mais les UIViews sont légères, performantes et plus faciles à assembler dans Interface Builder.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X