Secret app like text animation

Related tags

Label RQShineLabel
Overview

RQShineLabel

A UILabel subclass that lets you animate text similar to Secret app.

image

Installation

CocoaPods

RQShineLabel is available through CocoaPods, to install it simply add the following line to your Podfile:

pod "RQShineLabel"

Manually

  1. Download and drop RQShineLabel.h and RQShineLabel.m in your project.
  2. Congratulations!

Usage

- (void)viewDidLoad
{
  self.shineLabel = [[RQShineLabel alloc] initWithFrame:CGRectMake(16, 16, 298, 300)];
  self.shineLabel.numberOfLines = 0;
  self.shineLabel.text = @"some text";
  self.shineLabel.backgroundColor = [UIColor clearColor];
  [self.shineLabel sizeToFit];
  self.shineLabel.center = self.view.center;
  [self.view addSubview:self.shineLabel];
}

- (void)viewDidAppear:(BOOL)animated
{
  [super viewDidAppear:animated];
  [self.shineLabel shine];
}

Other methods

fade in with completion block

- (void)shineWithCompletion:(void (^)())completion;

fade out

- (void)fadeOut

fade out with completion block

- (void)fadeOutWithCompletion:(void (^)())completion;

Requirements

iOS >= 6.0

Author

gk

License

RQShineLabel is available under the MIT license. See the LICENSE file for more info.

Comments
  • found some bugs with _fadeoutDuration

    found some bugs with _fadeoutDuration

    I have tried to change the _fadeoutDuration from 2.5s to another value, but it doesn't work I find that you made mistake in this function,

    - (void)startAnimationWithDuration:(CFTimeInterval)duration
    {
      self.beginTime = CACurrentMediaTime();
      self.endTime = self.beginTime + self.shineDuration;
      self.displaylink.paused = NO;
    }
    

    Maybe you should add duration rather than self.shineDuration I fixed it but another bug happen, and I fixed it finally with inserting these code below into your updateAttributedString

      if (now > self.endTime) {
        self.displaylink.paused = YES;
    
          for (NSUInteger i = 0; i < self.attributedString.length; i++) {
              self.characterAnimationDelays[i] = @(arc4random_uniform(self.fadeoutDuration / 2 * 100) / 100.0);
              CGFloat remain = self.fadeoutDuration - [self.characterAnimationDelays[i] floatValue];
              self.characterAnimationDurations[i] = @(arc4random_uniform(remain * 100) / 100.0);
          }
    
        if (self.completion) {
          self.completion();
        }
    

    You use self.shineDuration in setAttributedText, it will affect the fadeoutAnimation, I add those code to update characterAnimationDurations to get the right fadeoutAnimation. Need pull request? Hope you can understand my Chiglish :)

    opened by zpz1237 4
  • trying to do animation after fadeout completion but not work.

    trying to do animation after fadeout completion but not work.

    I want to create the animation that the label shines first, then followed by fading out the text and then switching the image in an imageview and after the completion of switching image I want to shine some other text, and repeat this process forever. Yet I do not know why the completion block for fadeout is not called. Here is some of my code:

    • (void)Animate { if (self.shineLabel.isVisible) { //NSLog(@"is visible"); [self.shineLabel fadeOutWithCompletion:^{ NSLog(@"text = %@",self.shineLabel.text); [self changeText]; [self startAnimatingBackground]; [self.shineLabel shineWithCompletion:^{ [self Animate]; }]; //[self startAnimatingBackground]; }]; } else { [self.shineLabel shineWithCompletion:^{ [self Animate]; }]; } }
    • (void)startAnimatingBackground { NSLog(@"start animating background"); UIImage *image = [self.imageArray objectAtIndex:(count % [self.imageArray count])]; [UIView transitionWithView:self.imageLayer1 duration:2.0f options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ self.imageLayer1.image = image; }completion:^(BOOL finished) { NSLog(@"finished"); count++; }]; }
    opened by Nazgugu 4
  • fadeoutDuration

    fadeoutDuration

    There is a property fadeoutDuration but doesn't have any impact on animation and it is not used anywhere in code. As a workaround I'm using shineDuration instead.

    opened by zvjerka24 3
  • Not working with IBOutlets

    Not working with IBOutlets

    Hello!

    I love it, but I cannot use it by creating an UILabel with custom class RQShineLabel through an IBOutlet in my storyboard.

    The only thing missing to work is to add the "awakeFromNib" function in the RQShineLabel implementation. I have added it and called [self commonInit] and it works perfectly, so if you wish, i think you can add that to be able to use it from storyboards or nibs :)

    PS: I am someway new at developing with iOS, so my "solution" may not be the 'perfect one' (hell, it can be a total mess! :P) . I just know that an IBOutlet called from storyboards/nibs calls the "awakeFromNib" function, so I changed it in your code so I can use it 'not' programatically :)

    Thanks for the code!!!

    opened by crubiales 3
  • First Line Alignment Error

    First Line Alignment Error

    If you set the UILabel alignment to center or right with multiline text (2+ more lines) the first line is aligned to the left while the rest of the lines are aligned center or right.

    opened by joeblau 2
  • Fixed multiline label animation issue

    Fixed multiline label animation issue

    Skip whitespace and newline characters animation, as this can sometimes cause the first line of multiline label to jump after the animation is complete

    opened by maxkonovalov 1
  • Color of text?

    Color of text?

    I've been having trouble getting this to work with a black/dark colored text. I know RQShineLabel defaults to using a white text color, but does it currently support different color texts? If not has anyone forked this to support that?

    Thanks.

    opened by Steven4294 1
  • Positioning in Landscape causes issues

    Positioning in Landscape causes issues

    For some reason, in Landscape, the coordinates totally freak out. I can change it to (5, 5, 250, 500) and it will not appear where it should be, in fact, I can't even use negatives to get it to appear at the top. I'm attaching it to the subview of my overall view, so 0,0, should signify the top left, but no go. Still working on this, but I'm pretty sure it has to do with my app working in landscape and not portrait.

    Edit: Just realized I complained without leaving anything positive: big thanks to the author for the control, it's super beautiful and exactly what I need for my project, I just have to get it to work :-)

    opened by davidvanbeveren 1
  • Manual Installation

    Manual Installation

    CocoaPods and Carthage are awesome tools and make our life really easier, but there are some devs who still don't know how to use them.

    It would be cool to add the Manual installation guide in your README.md. You can take a look at my iOS Readme Template to see how you can do it.

    opened by lfarah 0
  • Incorrect value is used?

    Incorrect value is used?

    https://github.com/zipme/RQShineLabel/blob/master/Classes/RQShineLabel.m#L149

    I guess it's

    self.endTime = self.beginTime + duration;
    

    instead of

    self.endTime = self.beginTime + self.shineDuration;
    
    opened by ZhiyuanSun 1
  • Here is a working SWIFT example: Auto change text with timer

    Here is a working SWIFT example: Auto change text with timer

    Just wanted to put it out there in case anyone needs it. Here is a swift controller, and changes the text itself with a timer.

    // // IntroViewController.swift // // Created by Jason wang on 8/16/17. //

    import Foundation import UIKit import RQShineLabel import Parse

    class IntroViewController: UIViewController { var shineLabel = RQShineLabel() var timer = Timer() var textArray = ["111", "222", "333"] var currentCount = 0

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        self.shineLabel.shine()
    }
    
    var background1 = UIImageView()
    var background2 = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        background1 = UIImageView(image: UIImage(named: "IntroBackground1")!)
        background1.contentMode = .scaleAspectFill
        background1.frame = self.view.bounds
        self.view.addSubview(background1)
        
        background2 = UIImageView(image: UIImage(named: "IntroBackground2")!)
        background2.contentMode = .scaleAspectFill
        background2.frame = self.view.bounds
        background2.alpha = 0
        self.view.addSubview(background2)
        
        self.shineLabel = RQShineLabel(frame: CGRect(x: 16, y: 16, width: 298, height: 300))
        self.shineLabel.numberOfLines = 0;
        self.shineLabel.text = "Welcome to my app"
        self.shineLabel.backgroundColor = UIColor.clear
        self.shineLabel.font = UIFont(name: "HelveticaNeue-Light", size: 18.0)
        self.shineLabel.center = self.view.center;
        self.view.addSubview(self.shineLabel)
        
        scheduledTimerWithTimeInterval()
    
        self.view.bringSubview(toFront: self.logo)
        self.view.bringSubview(toFront: self.loginView)
    }
    
    func scheduledTimerWithTimeInterval(){
        // Scheduling timer to Call the function "updateCounting" with the interval of 1 seconds
        timer = Timer.scheduledTimer(timeInterval: 8, target: self, selector: #selector(self.updateCounting), userInfo: nil, repeats: true)
    }
    
    func updateCounting(){
        if (self.shineLabel.isVisible) {
            self.shineLabel.fadeOut(completion: {
                let textIndex = self.currentCount % self.textArray.count
                let text = self.textArray[textIndex]
                self.shineLabel.text = text
                self.currentCount += 1
                UIView.animate(withDuration: 2.5, animations: {
                    if (self.background1.alpha > 0.1) {
                        self.background1.alpha = 0;
                        self.background2.alpha = 1;
                    }
                    else {
                        self.background1.alpha = 1;
                        self.background2.alpha = 0;
                    }
                })
                self.shineLabel.shine()
            })
        } else {
            self.shineLabel.shine()
        }
        
    }
    

    }

    opened by wy1024 2
  • How to implement this with swift?

    How to implement this with swift?

    Hi, I'd like to ask you how can I use this component with Swift? I'm not familiar with Objective C at all.

    Especially lines: self.shineLabel = [[RQShineLabel alloc] initWithFrame:CGRectMake(16, 16, 298, 300)]; and [self.shineLabel shine];

    Thank you

    Edit:

    Sorry with stupid question. Here is my solution: Ad.1 self.shineLabel = RQShineLabel(frame: CGRectMake(16, 16, 298, 300)) Ad.2 self.shineLabel.shine()

    opened by ghost 0
Owner
gk
gk
Lightweight library to set an Image as text background. Written in swift.

Simple and light weight UIView that animate text with an image.

Lucas Ortis 552 Sep 9, 2022
Configurable morphing transitions between text values of a label.

TOMSMorphingLabel Configurable morphing transitions between text values of a label. Triggering the animation is as easy as setting the labels text pro

Tom König 1.9k Nov 20, 2022
UILabel subclass, which additionally allows shadow blur, inner shadow, stroke text and fill gradient.

THLabel THLabel is a subclass of UILabel, which additionally allows shadow blur, inner shadow, stroke text and fill gradient. Requirements iOS 4.0 or

Tobias Hagemann 654 Nov 27, 2022
Custom Label to apply animations on whole text or letters.

Ophiuchus Custom Label to apply animations on whole text or letters. Check an article on our blog Inspired by this project on Dribble Installation Coc

Yalantis 885 Dec 2, 2022
Swift UIView for sliding text with page indicator

SlidingText for Swift Requirements Requires iOS 8 or later and Xcode 6.1+ Installation SlidingText is available through CocoaPods. To install it, simp

Dionysis Karatzas 53 Mar 1, 2022
Simple countdown UILabel with morphing animation, and some useful function.

CountdownLabel Simple countdown UILabel with morphing animation, and some useful function. features Simple creation Easily get status of countdown fro

keishi suzuki 903 Dec 29, 2022
UILabel replacement with fine-grain appear/disappear animation

ZCAnimatedLabel UILabel-like view with easy to extend appear/disappear animation Features Rich text support (with NSAttributedString) Group aniamtion

Chen 2.3k Dec 5, 2022
OdometerLabel - SwiftUI number label with odometer animation

Пример Simulator.Screen.Recording.-.L.iPhone.12.-.2022-01-30.at.16.26.53.mp4

Misnikov Roman 2 Jun 13, 2022
A handy class for iOS to use UILabel as a countdown timer or stopwatch just like in Apple Clock App.

MZTimerLabel Purpose MZTimerLabel is a UILabel subclass, which is a handy way to use UILabel as a countdown timer or stopwatch just like that in Apple

Mines Chan 1.6k Dec 14, 2022
NumberMorphView a view like label for displaying numbers which animate with transition using a technique called number tweening or number morphing.

NumberMorphView a view like label for displaying numbers which animate with transition using a technique called number tweening or num

Abhinav Chauhan 1.6k Dec 21, 2022
SwiftUI-Text-Animation-Library - Text animation library for SwiftUI

⚠️ This repository is under construction. SwiftUI Text Animation Library Make yo

null 28 Jan 8, 2023
CipherCode - iOS App to decode your secret message

CipherCode IOS App to decode/encode your secret message App App consist of welco

Doston Rustamov 0 Jan 15, 2022
Ported Shamirs Secret Sharing Into A Swift Package

Shamirs-Secret-Sharing-Swift Ported Shamirs Secret Sharing Into A Swift Package Based on Adi Shamir's Secret Sharing (https://en.wikipedia.org/wiki/Sh

Charles Edge 5 May 15, 2022
Secret Messenger - a free and open source Jabber (XMPP) messaging client for Apple

Secret Messenger is a free and open source Jabber (XMPP) messaging client for Apple and Android devices focused on Privacy and Security with full OMEMO encrypted messaging support.

Secret Messenger 4 May 2, 2022
An experiment for using SwiftUI's custom timing Animation to create an orbital-like animation.

Orbital-SwiftUI-Animation An experiment for using SwiftUI's custom timing curve to create an orbital-like animation. How it looks: How it works: Apply

Mostafa Abdellateef 7 Jan 2, 2023
An iOS app to turn typed text into images of handwritten text in your own handwriting style.

Text-to-Handwritting © 2021 by Daniel Christopher Long An iOS app to turn typed text into images of handwritten text in your own handwriting style. ht

Daniel Long 11 Dec 29, 2022
The app allows the user to change text color and text content when the displayed button is clicked

Hello World! App Description This application allows the user to change text color and text content when the displayed button is clicked. App Walk-tho

null 0 Mar 15, 2022
Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.

Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.

null 18 Aug 16, 2022
add text(multiple line support) to imageView, edit, rotate or resize them as you want, then render the text on image

StickerTextView is an subclass of UIImageView. You can add multiple text to it, edit, rotate, resize the text as you want with one finger, then render the text on Image.

Textcat 478 Dec 17, 2022
A framework to validate inputs of text fields and text views in a convenient way.

FormValidatorSwift The FormValidatorSwift framework allows you to validate inputs of text fields and text views in a convenient way. It has been devel

ustwo™ 500 Nov 29, 2022