Frame Animation with CGAffineTransform

One of the most powerful and useful property of UIView is transform, which takes a CGAffineTransform. This is a matrix that express how each pixel of UIView should be modified, applying some mathematical formulas.

CGAffineTransformScale: CGAffineTransformScale use for scale a view up and down. A transform value of 5.0 means make the view 5 times bigger than actual frame.

CGAffineTransformRotate: Use for rotate a view by given angle. It uses radian.


Here a piece of code for render a view  with animation from center.

UIImageView *aniView;

//method for display subview.
-(void) displaySubView{
    //Create object for sub view
    if (!aniView) {
        aniView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.center.x, self.view.center.y, 0, 0)];
        aniView.backgroundColor = [UIColor clearColor];
        aniView.image = [UIImage imageNamed:@"imagename.png"];
        aniView.clipsToBounds = YES;
        aniView.center = self.view.center;
      // Reduce view to 1/10th of its original frame
        aniView.transform = CGAffineTransformScale(aniView.transform, .01, .01);
        [self.view addSubview:aniView];
    }
    [UIView animateWithDuration:1 animations:^{
        // return the view to original frame
        aniView.transform = CGAffineTransformScale(aniView.transform, 100, 100);
      
    }];
}
//Method for hide subview
-(void) hideSubView{
    [UIView animateWithDuration:1 animations:^{
        aniView.transform = CGAffineTransformScale(aniView.transform, .01, .01);
    }];
}

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.