Wie mache ich eine geheime iOS App Textanimation?

Question

Ich versuche, den Text Label Übergang der Secret App zu duplizieren. Ist jemand der beste Weg, um es anzugehen?

Es sieht so aus, als hätten sie jeden Buchstaben als Klartextfarbe gestartet und animieren ihn dann zu grauer und dann weißer Textfarbe.

Hier sind einige Screenshots:

Answer 1

hier ein möglicher Weg ist.

Zunächst möchten wir feststellen, dass ein UILabel einen NSAtributedString halten und anzeigen kann. Mit NSMutableAttributedString können Sie jedem Buchstaben eine andere Farbe zuweisen.

Beginnen Sie also mit zwei Etiketten, eine direkt über der anderen (d. H. Davor, versteckt es), mit dem gleichen Text, aber anderen Buchstabenfarben. Verblassen Sie nun das Alpha des obersten auf Null, so dass Sie den dahinter liegenden Schritt allmählich aufdecken. So wird jeder Buchstabe nach und nach die Farbe des Buchstabens annehmen.

Answer 2

Ich werde nur erweitern, was @matt mit einem schnellen Beispiel, wie dies getan werden könnte. Sie beginnen mit zwei Labels, eines direkt übereinander mit den gleichen Attributen und Ausrichtungen. Nachdem beide Labels konfiguriert wurden und Sie bereit sind zu animieren, müssen Sie nur das obere Label ausblenden.

- (void)awakeFromNib 
{ 
    [super awakeFromNib]; 

    [self.view setBackgroundColor:[UIColor blackColor]]; 

    NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; 

    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 100.0, 320.0, 200.0)]; 
    [label1 setNumberOfLines:0]; 
    [label1 setBackgroundColor:[UIColor clearColor]]; 
    [label1 setAttributedText:[self randomlyFadedAttStringFromString:text]]; 
    [self.view addSubview:label1]; 

    UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 100.0, 320.0, 200.0)]; 
    [label2 setNumberOfLines:0]; 
    [label2 setBackgroundColor:[UIColor clearColor]]; 
    [label2 setTextColor:[UIColor whiteColor]]; 
    [label2 setAttributedText:[[NSAttributedString alloc] initWithString:text]]; 
    [self.view addSubview:label2]; 

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ 
     [UIView animateWithDuration:1.0 animations:^{ 
      [label2 setAlpha:0.0]; 
     } completion:^(BOOL finished) { 
      [label2 removeFromSuperview]; 
     }]; 
    }); 
} 

Dann erstellen Sie eine spezielle attributierte Zeichenfolge für die untere Beschriftung. Diese attributierte Zeichenfolge sollte kein Attribut ändern, das Sie für das andere Label als das NSForegroundColorAttributeName-Attribut festgelegt haben. Sie wollen oder wollen vielleicht nicht mit einem Algorithmus aufwarten, um zu bestimmen, welche Buchstaben in welcher Menge verblasst sein sollten, aber der folgende Code wird eine attributierte Zeichenfolge aus einer Eingabezeichenfolge generieren, wobei jeder Buchstabe alpha nur ein zufälliger Wert zwischen 0 ist und 1.

- (NSAttributedString *)randomlyFadedAttStringFromString:(NSString *)string 
{ 
    NSMutableAttributedString *outString = [[NSMutableAttributedString alloc] initWithString:string]; 

    for (NSUInteger i = 0; i < string.length; i ++) { 
     UIColor *color = [UIColor colorWithWhite:1.0 alpha:arc4random_uniform(100)/100.0]; 
     [outString addAttribute:NSForegroundColorAttributeName value:(id)color range:NSMakeRange(i, 1)]; 
    } 

    return [outString copy]; 
} 

Answer 3

Vielen Dank für die Hilfe. Ich konnte das mit einigen Modifikationen schaffen, damit das Label immer wieder eingeblendet wird. Hier ist meine vollständigen Quellcode: https://github.com/NatashaTheRobot/SecretTextAnimationExample

Answer 4

Hier ist eine andere Lösung https://github.com/zipme/RQShineLabel

I CADisplayLink verwenden zusammen mit NSAttributedString auf diese Weise wir nur eine UILabel benötigen, schauen :)