How to implement animation like UBER app text while launching

Question

Hey help me to achieve UBER app like animation while we launch the app. The animation is done when the app launches and UBER is written in an animated way. I tried by using UIBezier Path... But didn't achieved the desired effect. The sample code is

 - (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor redColor];
    // Do any additional setup after loading the view, typically from a nib.

    self.animationLayer = [CALayer layer];
    self.animationLayer.frame = CGRectMake(20.0f, 64.0f,
                                           CGRectGetWidth(self.view.layer.bounds) - 40.0f,
                                           CGRectGetHeight(self.view.layer.bounds) - 84.0f);
    [self.view.layer addSublayer:self.animationLayer];
    [self setupTextLayer];
    [self startAnimation];
}


- (void) setupTextLayer
{
    if (self.pathLayer != nil) {
        [self.penLayer removeFromSuperlayer];
        [self.pathLayer removeFromSuperlayer];
        self.pathLayer = nil;
        self.penLayer = nil;
    }

    // Create path from text
    // See: http://www.codeproject.com/KB/iPhone/Glyph.aspx
    // License: The Code Project Open License (CPOL) 1.02 http://www.codeproject.com/info/cpol10.aspx
    CGMutablePathRef letters = CGPathCreateMutable();

    CTFontRef font = CTFontCreateWithName(CFSTR("Helvetica-Bold"), 40.0f, NULL);
    NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:
                           (__bridge id)font, kCTFontAttributeName,
                           nil];
    NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:@"UBER"
                                                                     attributes:attrs];
    CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);
    CFArrayRef runArray = CTLineGetGlyphRuns(line);

    // for each RUN
    for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++)
    {
        // Get FONT for this run
        CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);
        CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);

        // for each GLYPH in run
        for (CFIndex runGlyphIndex = 0; runGlyphIndex < CTRunGetGlyphCount(run); runGlyphIndex++)
        {
            // get Glyph & Glyph-data
            CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1);
            CGGlyph glyph;
            CGPoint position;
            CTRunGetGlyphs(run, thisGlyphRange, &glyph);
            CTRunGetPositions(run, thisGlyphRange, &position);

            // Get PATH of outline
            {
                CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);
                CGAffineTransform t = CGAffineTransformMakeTranslation(position.x, position.y);
                CGPathAddPath(letters, &t, letter);
                CGPathRelease(letter);
            }
        }
    }
    CFRelease(line);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointZero];
    [path appendPath:[UIBezierPath bezierPathWithCGPath:letters]];

    CGPathRelease(letters);
    CFRelease(font);

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame = self.animationLayer.bounds;
    pathLayer.bounds = CGPathGetBoundingBox(path.CGPath);
    //pathLayer.backgroundColor = [[UIColor yellowColor] CGColor];
    pathLayer.geometryFlipped = YES;
    pathLayer.path = path.CGPath;
    pathLayer.strokeColor = [[UIColor blackColor] CGColor];
    pathLayer.fillColor = nil;
    pathLayer.lineWidth = 3.0f;
    pathLayer.lineJoin = kCALineJoinBevel;

    [self.animationLayer addSublayer:pathLayer];

    self.pathLayer = pathLayer;

    UIImage *penImage = [UIImage imageNamed:@"noun_project_347_2.png"];
    CALayer *penLayer = [CALayer layer];
    penLayer.contents = (id)penImage.CGImage;
    penLayer.anchorPoint = CGPointZero;
    penLayer.frame = CGRectMake(0.0f, 0.0f, penImage.size.width, penImage.size.height);
    [pathLayer addSublayer:penLayer];

    self.penLayer = penLayer;
}

- (void) startAnimation
{
    [self.pathLayer removeAllAnimations];
    [self.penLayer removeAllAnimations];

    self.penLayer.hidden = NO;

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 10.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

    CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    penAnimation.duration = 10.0;
    penAnimation.path = self.pathLayer.path;
    penAnimation.calculationMode = kCAAnimationPaced;
    penAnimation.delegate = self;
    [self.penLayer addAnimation:penAnimation forKey:@"position"];
}

hello Fiaona, can you please upload any Image, that we will understand what you want — Mehul, Sep 10 '15 at 09:18
i have few Animation mu own added, if you want that, then i will give you — Mehul, Sep 10 '15 at 09:20
is it correct ?? Link : https://www.cocoacontrols.com/controls/vtxkaraokelyricview — Mehul, Sep 10 '15 at 09:28
one minute ... Let me see if i can give any gif image... Thanks for the link. But please install uber and see the effect.. — User1075, Sep 10 '15 at 09:30
i have see that text ANIMATION, its not text animation, its a video File Added in Background.. haha.. — Mehul, Sep 10 '15 at 09:39
Fiona, i have one more animation, might be helpful to you. Link : https://github.com/overboming/ZCAnimatedLabel — Mehul, Sep 10 '15 at 09:43
@Fiaona Shoff, from my point of view, its very difficult. you have to deep knowledge of CaAnimation (CAAnimation is an abstract animation class). — Mehul, Sep 10 '15 at 09:46
Thank You so much for the link.... I will try to implement it... Please help me in trying by individual try... If you succeed post the code as answer and i will surely support you — User1075, Sep 10 '15 at 09:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89255/discussion-between-mehul-and-fiona-shoff). — Mehul, Sep 10 '15 at 09:47
Very few people are going to install an app just to see what you are talking about. You should use an app like Reflector to capture a GIF of the animation you are after and post it as part of your question. — Duncan C, Sep 12 '15 at 19:20

score 2 · Answer 1 · answered Sep 15 '15 at 11:54

Uber is using a series of images to achieve the animation effect for the text. You can check this for yourself:

Download the app using iTunes on desktop.
Locate the app in Finder.
Extract the app contents using the Archive Utility.
Explore the contents.

You will find a series of 68 images with the filename as logo-000.png to logo-067.png, in all three resolutions.

Using these images the app simply uses a UIImageView and calls the following method on it:

UIImageView *imageView;

imageView.animationImages = @[[UIImage imageNamed:@"logo-000"], [UIImage imageNamed:@"logo-001"] , ...];
[imageView startAnimating];

Or

imageView.image = [UIImage animatedImageNamed:@"logo-" duration:5.0]; //Dont know the duration for sure.

How to implement animation like UBER app text while launching

1 Answers1