如何製作一個祕密的iOS應用程序文本動畫

Question

我試圖複製祕密應用程序的文本標籤轉換。有沒有人最好的方法來處理它？

看起來他們每個字母都以純文本顏色開始，然後將其設置爲灰色，然後將其設置爲白色文本顏色。

下面是一些截圖：

Answer 1

這裏是一個可行的辦法。

首先，讓我們注意，一個UILabel可以保留和顯示NSAttributedString。使用NSMutableAttributedString，你可以使每個字母的顏色不同。

所以，先從標籤，在另一個之上的權利（在它的前面，即隱藏它），具有相同的文字，但不同的字母色素。現在，將頂部的alpha變成零，從而逐漸揭示其背後的一個。因此，每封信似乎都會逐漸呈現背後字母的顏色。

Answer 2

我只是真的要擴展@matt用這個如何完成的一個快速例子說。你從兩個標籤開始，一個直接在另一個上面，具有相同的屬性和對齊。在兩個標籤都配置完畢並且您準備好進行動畫製作後，您只需淡出頂部標籤即可。

- (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]; 
     }]; 
    }); 
} 

然後爲底部標籤創建一個特殊的屬性字符串。此屬性字符串不應修改您在NSForegroundColorAttributeName屬性以外的其他標籤上設置的任何屬性。您可能想也可能不想想出某種算法，以確定哪些字母應該以什麼量消失，但下面的代碼將從輸入字符串生成一個歸因字符串，其中每個字母alpha只是一個0之間的隨機值和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

感謝大家的幫助。我能夠通過一些修改來實現這個功能，以防止標籤一遍又一遍地褪色。這裏是我的全部源代碼：https://github.com/NatashaTheRobot/SecretTextAnimationExample

Answer 4

這裏是另一種解決方案https://github.com/zipme/RQShineLabel

我結合使用CADisplayLink與NSAttributedString這樣，我們只需要一個的UILabel，看看:)