Text Animation

A well design  user interface is a key feature of an application.  A end user only interact with UI part an application, so making an  attractive user interface  force user to play with application.
A small small effect like animation help to improve interface design.

In this blog, i am going to display text message with animations.
Click here for download "TextAnimationView" classes.

Create a new project(TextAnimationApplication).
and add downloaded classes to project

Now go to ViewController.m class and import "TextAnimationView.h" file
and declare a variable

TextAnimationView *textAnimationView;                                                        

define below method to add TextAnimationView to ViewController's view

-(void) addTextAnimationView{
//initialize instance
    textAnimationView = [[TextAnimationView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 100) withMessage:@"It's a sample marquee message."];
    [self.view addSubview:textAnimationView];
//Default text appearance animation
    [textAnimationView displayMessageViewWithPresentationType:AnnouncementViewPresentWithCenterAnimation withSpinAnimation:YES];
}

In ViewController.h class declare an IBAction method

-(IBAction)buttonAction:(UIButton *)sender;


Now Switch to main.storyboard file and add UIButtons for different different animations.

In the sample project i added 10 buttons for display text message with 10 different-different animation. Add all buttons with declared method with TouchUpInside event.

Define IBAction method in ViewController.m, file

-(IBAction)buttonAction:(UIButton *)sender{
    switch (sender.tag) {
        case 1://display text with scale transform           
[textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithCenterAnimation withSpinAnimation:YES];
            break;
        case 2:
// display text animation view from top of the screen to declared frame with simple animation.
            [textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithTopAnimation withSpinAnimation:NO];
            break;
         case 3:
// display text animation view from left of the screen to declared frame with spin animation.
             [textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithLeftAnimation withSpinAnimation:YES];
            break;
        case 4:
// display text animation view from alpha value animation with spin animation.       
     [textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithAlpha withSpinAnimation:YES];
            break;
        case 5:
// display text animation view from the bottom of the screen to declared frame with spin animation.
             [textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithBottomAnimation withSpinAnimation:YES];
            break;
        case 6:
// display text animation view from right of the screen to declared frame with out spin animation.
             [textAnimationView displayMessageViewWithPresentationType:TextAnimationViewPresentWithRightAnimation withSpinAnimation:NO];
            break;
        case 7:
// display text animation view with marquee animation from right
             [textAnimationView setTextMarquee:YES withDirectionType:TextMarqueeFromRight];
            break;
        case 8:
// display text animation view with marquee animation from left
             [textAnimationView setTextMarquee:YES withDirectionType:TextMarqueeFromLeft];
            break;
        case 9:
// display text animation view with marquee animation from Top            [textAnimationView setTextMarquee:YES withDirectionType:TextMarqueeFromTop];
            break;
        case 10:
// display text animation view with character animation(one by one character animation)
             [textAnimationView displayTextWithTypingAnimation:@"It's a sample marquee message."];
            break;
           
        default:
            break;
    }
}

Now run the project and click on buttons for display text message with animations.
Click here for download sample project.