{"id":289,"date":"2012-12-05T21:58:37","date_gmt":"2012-12-05T20:58:37","guid":{"rendered":"http:\/\/www.albertopasca.it\/whiletrue\/?p=289"},"modified":"2018-05-25T17:23:18","modified_gmt":"2018-05-25T15:23:18","slug":"objective-c-uilabel-letters-animation","status":"publish","type":"post","link":"https:\/\/www.albertopasca.it\/whiletrue\/objective-c-uilabel-letters-animation\/","title":{"rendered":"[Objective-C] UILabel letters animation"},"content":{"rendered":"

Today, a simple class to make easily an UILabel letters animation, that scroll in \u201ccircular\u201d way.<\/p>\n

\"uilabel<\/center>How is made?<\/p>\n

<\/p>\n

I use some UIScrollView with inside an UILabel with n rows, filled by the alphabet letter, like this:<\/p>\n

A
\nB
\nC
\nD
\n[\u2026]<\/p><\/blockquote>\n

To make the animation, better, to go to a specific letter, i\u2019ve used scrollToRect method of UIScrollView\u2026 et voil\u00e0, animation is done.<\/p>\n

This is the core:<\/p>\n

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]-\u00a0(void)\u00a0WriteWord:(NSArray*)letters startFrom:(int)i animated:(BOOL)anim
\n{
\n _Current\u00a0=\u00a0i;
\n if\u00a0(\u00a0_Current >=\u00a0DEFAULT_SCROLLERS\u00a0)\u00a0return;<\/p>\n

[UIView animateWithDuration:self.Speed delay:0.0\u00a0options:UIViewAnimationOptionTransitionCrossDissolve animations:^
\n {
\n APScrollView\u00a0*scroll\u00a0=\u00a0(APScrollView*)[self viewWithTag:START_TAG\u00a0+\u00a0_Current];
\n NSString\u00a0*l\u00a0=\u00a0letters[_Current];<\/p>\n

int\u00a0pos\u00a0=\u00a0[scroll atPosition:l];
\n [scroll scrollRectToVisible:CGRectMake(0,\u00a0(DEFAULT_FONT_SIZE+4)\u00a0*\u00a0pos,\u00a0(DEFAULT_FONT_SIZE-2),\u00a020)\u00a0animated:!anim];
\n }\u00a0completion:^(BOOL\u00a0finish){
\n [self WriteWord:letters startFrom:++_Current animated:anim];
\n }];
\n}[\/code]<\/p>\n

It\u2019s a recursive method that animate all the scrollviews (and the letters!).<\/p>\n

You can find the sample project on my github,\u00a0here<\/a>.<\/p>\n

Easily, add in your projects the files\u00a0APScroller.h<\/strong>\u00a0and\u00a0APScroller.m<\/strong>\u00a0and where you want, simply use:<\/p>\n

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]_Scroller\u00a0=\u00a0[[APScroller alloc]\u00a0initWithFrame:CGRectMake(32,\u00a0100,\u00a012\u00a0*\u00a0MAXSCROLL,\u00a050)];
\n[self.view addSubview:_Scroller];[\/code]<\/p>\n

and to animate a string, call<\/p>\n

[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"\u00a0animated:YES];[\/code]<\/p>\n

You can also set the Speed of animation.<\/p>\n