Animation effect 10: drop-down and special effect drop-down

Animation effect 10: drop-down and special effect drop-down

Let's continue with our animation journey today. The animation effect explained this time can be seen in many apps, that is, the effect of pulling down and enlarging the image. Let's take a look.

Note: The content display in UITableView is not the focus of this section, so it is negligible.

I. animation analysis:

1. By default, images are normally displayed (not enlarged) and the navigation bar is hidden.

2. When pulling down, the image proportion is enlarged, and the View of the tab (Tab1 and Tab2) will also follow.

3. When pushing up, when the tab is pushed to the bottom of the navigation bar, the picture disappears completely, the navigation bar also appears completely, and push up is not allowed.

Ii. solution design:

1. the header view and Tab View become the tableHeaderView of tableView. However, if you drag it up, The Tab View disappears, so it cannot reach the hover effect.

2. The Tab View becomes the group header view of tableView, And the tab is hovering over. However, when the user is dragging down, the header view should not move down, but the y value will not move down.

Final Solution: add the header view and Tab view to the Controller view and cover tableView.

The UI design is as follows:

The constraints are as follows: TableView: the distance between the top, bottom, and left is 0. Header Part: the distance between the top, left, and right of the View is 0, and the height constraint is 200. BgImage: the upper, lower, and lower sides of the Header Part are both 0. Tab: the distance between the left and right sides of the View is 0. The Bottom distance constraint of the Top Part is 0 and the height constraint is 44.
Define several operation-related macros: the height of the Header Part, the height of the navigation bar and the status bar, and the height of the Tab ".

#define kHeadHeight 200#define kNavAndStatusBarHeight 64#define kTabBarHeight 44

Then perform necessary link work. The related attributes are defined as follows:

// Background image @ property (weak, nonatomic) IBOutlet UIImageView * iconImageView; // scroll TableView @ property (weak, nonatomic) IBOutlet UITableView * tableView; // Header Part height constraint @ property (weak, nonatomic) IBOutlet NSLayoutConstraint * iconImageViewContainerHeight; // Header Part @ property (weak, nonatomic) IBOutlet UIView * iconImageViewContainer; // The title of the navigation bar @ property (nonatomic, strong) UILabel * nameLabel; // default offsetY @ property (nonatomic, assign) CGFloat lastOffsetY of TableView;

Iii. Encoding analysis:1. First set the title of the navigation bar and hide it

// Title self. nameLabel = [[UILabel alloc] init]; self. nameLabel. text = @ "Autumn hate snow"; [self. nameLabel sizeToFit]; self. navigationItem. titleView = self. nameLabel; // transmits an empty image UIImage object to the background image of the navigation bar (the navigation bar is transparent) [self. navigationController. navigationBar setBackgroundImage: [[UIImage alloc] init] forBarMetrics: UIBarMetricsDefault]; // hide the shadow bar at the bottom and pass the UIImage object [self. navigationController. navigationBar setShadowImage: [[UIImage alloc] init];

2. In the uidesign, tableView occupies the entire View. Therefore, by default, you should set tableView contentInsets so that the content displayed by tableView is under the Tab:

// Display content of tableview. The default value is self. tableView. contentInset = UIEdgeInsetsMake (kHeadHeight + kTabBarHeight, 0, 0, 0) under tabbar );

After iOS7, an additional scroll area 64 will be added to the top of all UIScrollView under the navigation controller. So Add the following sentence to cancel the default additional area.

self.automaticallyAdjustsScrollViewInsets = NO;

3. Implement the amplification effect. Obviously, the effect of amplification here is actually to control the height constraints of the "Header Part. Pull down, the constraint value increases, and pull up, the constraint value decreases. The height only controls the vertical direction of the image, and the horizontal direction does not change. Therefore, the image will be stretched in the vertical direction. Therefore, we must set the image content mode to make the image "bigger by ourselves ":

self.iconImageView.contentMode = UIViewContentModeScaleAspectFill;

The basic situation has been analyzed. Now we are considering the Boundary Value: when pulling up, when the Tab is pulled to the front and bottom of the navigation bar, that is, when the y value of the screen is 64, the navigation bar appears completely, and the Tab cannot be moved. The code for processing pull is as follows:

-(Void) scrollViewDidScroll :( UIScrollView *) scrollView {CGFloat offsetY = scrollView. contentOffset. y; CGFloat delta = offsetY-self. lastOffsetY; // drag up to reduce the height. CGFloat height = kHeadHeight-delta; if (height <kNavAndStatusBarHeight) {height = kNavAndStatusBarHeight;} self. iconImageViewContainerHeight. constant = height; // set the background image CGFloat alpha = delta/(kHeadHeight-kNavAndStatusBarHeight) of the navigation bar; // When alpha is greater than 1, the navigation bar is translucent, so do the processing, greater than 1, directly = 0.99 if (alpha> = 1) {alpha = 1;} _ nameLabel. alpha = alpha; // set the background image UIImage * image of the navigation bar = [UIImage imageWithColor: [UIColor colorWithWhite: 1 alpha: alpha]; [self. navigationController. navigationBar setBackgroundImage: image forBarMetrics: UIBarMetricsDefault];}

So far, the effect of a drop-down amplification is complete.

Note: A UImage classification is used in the code to generate a solid color image. The Code is as follows:

+ (UIImage *) imageWithColor :( UIColor *) color {// description of the rectangle CGRect rect = CGRectMake (0.0f, 0.0f, 1.0f, 1.0f); // enable the bitmap context UIGraphicsBeginImageContext (rect. size); // obtain the bitmap context CGContextRef context = UIGraphicsGetCurrentContext (); // use color to demonstrate filling context CGContextSetFillColorWithColor (context, [color CGColor]); // render context CGContextFillRect (context, context, rect); // obtain the image UIImage * theImage = UIGraphicsGetImageFromCurrentImageContext (); // end context UIGraphicsEndImageContext (); return theImage ;}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.