[Objective-C] UILabel letters animation

Today, a simple class to make easily an UILabel letters animation, that scroll in “circular” way.

uilabel nsstring animation letters
How is made?

I use some UIScrollView with inside an UILabel with n rows, filled by the alphabet letter, like this:

A
B
C
D
[…]

To make the animation, better, to go to a specific letter, i’ve used scrollToRect method of UIScrollView… et voilà, animation is done.

This is the core:

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]- (void) WriteWord:(NSArray*)letters startFrom:(int)i animated:(BOOL)anim
{
_Current = i;
if ( _Current >= DEFAULT_SCROLLERS ) return;

[UIView animateWithDuration:self.Speed delay:0.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^
{
APScrollView *scroll = (APScrollView*)[self viewWithTag:START_TAG + _Current];
NSString *l = letters[_Current];

int pos = [scroll atPosition:l];
[scroll scrollRectToVisible:CGRectMake(0, (DEFAULT_FONT_SIZE+4) * pos, (DEFAULT_FONT_SIZE-2), 20) animated:!anim];
} completion:^(BOOL finish){
[self WriteWord:letters startFrom:++_Current animated:anim];
}];
}[/code]

It’s a recursive method that animate all the scrollviews (and the letters!).

You can find the sample project on my github, here.

Easily, add in your projects the files APScroller.h and APScroller.m and where you want, simply use:

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]_Scroller = [[APScroller alloc] initWithFrame:CGRectMake(32, 100, 12 * MAXSCROLL, 50)];
[self.view addSubview:_Scroller];[/code]

and to animate a string, call

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”][_Scroller setWorld:@"ALBERTOPASCA" animated:YES];[/code]

You can also set the Speed of animation.

Enjoy and feel free to edit and improve my code.

 

Ref: albertopasca.it
Ref: github

Alberto Pasca
Latest posts by Alberto Pasca (see all)