IOS realizes text animation effects with _ios navigation bar gradients

The effect chart is as follows

The analysis is as follows:

1. The navigation bar is hidden at the beginning, and the gradient is scrollview as the scroll

2. The navigationitem on both sides of the navigation bar is always displayed

3. Navigation bar reference to the Home app, the use of hair glass effect, the background is a picture

4. Pull down to enlarge picture effect

5.title Text Animation effect

Through simple analysis, the system's navigation bar to achieve the above effect a little difficult, directly customize a fake navigation bar easier point

The effect of distributed disassembly is achieved above

I. Dropdown enlarge header Picture

-(void) viewdidload {[Super viewdidload];

 [Self.view AddSubview:self.scaleImageView];
  Set the constraint on the display picture [_scaleimageview mas_makeconstraints:^ (Masconstraintmaker *make) {make.top.mas_equalTo (0);
  Make.left.equalTo (Self.view.mas_left);
  Make.right.equalTo (Self.view.mas_right);
 Make.height.mas_equalTo (KHEARDH);
}]; }//TableView lazy Load-(UITableView *) tableview{if (_tableview = = nil) {_tableview = [[UITableView Alloc]initwithframe:sel
  F.view.bounds Style:uitableviewstyleplain];
  _tableview.contentinset = Uiedgeinsetsmake (kHeardH-35, 0, 0, 0);
  _tableview.delegate = self;
  _tableview.datasource = self;
 _tableview.separatorstyle = Uitableviewcellseparatorstylenone;
return _tableview;
  }//Picture lazy load-(Uiimageview *) Scaleimageview {if (!_scaleimageview) {_scaleimageview = [[Uiimageview alloc] init];
  _scaleimageview.contentmode = Uiviewcontentmodescaleaspectfill;
  _scaleimageview.clipstobounds = YES;

 _scaleimageview.image = [UIImage imagenamed:@ "666"]; } return_scaleimageview; }//navigation bar height #define Knavbarh 64.0f//Head picture height #define KHEARDH #pragma mark-uiscrollviewdelegate-(void) Scrollviewdi
 Dscroll: (Uiscrollview *) ScrollView {//Compute current offset position cgfloat OffsetY = Scrollview.contentoffset.y;
 CGFloat Delta = offsetY-_lastoffsety;
 Dlog (@ "delta=%f", Delta);
 Dlog (@ "offsety=%f", OffsetY);
 CGFloat height = Kheardh-delta;
 if (height < Knavbarh) {height = Knavbarh;
 } [_scaleimageview mas_updateconstraints:^ (Masconstraintmaker *make) {make.height.mas_equalTo (height);
}]; }

Two. The Navigationitem on the left and right side of the navigation bar is always displayed

-(void) viewdidload {[Super viewdidload];
Add directly to the controller's view, and note that the order is added, and will be obscured after adding the navigation bar [self confignavigationbar];
 }-(void) confignavigationbar{//Left return button UIButton *backbtn = [[UIButton alloc]init];
 Backbtn.frame = CGRectMake (0, 20, 44, 44);
 [Backbtn setimage:[uiimage imagenamed:@ "Special_back"] forstate:uicontrolstatenormal];

 [Backbtn addtarget:self Action: @selector (back) forcontrolevents:uicontroleventtouchupinside];
 Right Share button UIButton *shartbtn = [[UIButton alloc]init];
 Shartbtn.frame = CGRectMake (SCREENWIDTH-44, 20, 44, 44);
 [Shartbtn setimage:[uiimage imagenamed:@ "Special_share"] forstate:uicontrolstatenormal];
 [Shartbtn addtarget:self Action: @selector (Sharebtnclick) forcontrolevents:uicontroleventtouchupinside];
 [Self.view ADDSUBVIEW:BACKBTN];
[Self.view ADDSUBVIEW:SHARTBTN]; 
}//Return-(void) back{[Self.navigationcontroller popviewcontrolleranimated:yes];} 

three. Customize navigation bar and glass effect and title text animation effect

Hide System navigation Bar-(void) Viewwillappear: (BOOL) animated{[Super viewwillappear:animated];
Self.navigationController.navigationBar.hidden = YES;

 }-(void) viewdidload {[Super viewdidload];
 Self.navigationController.navigationBar.hidden = YES;
 Self.lastoffsety =-kheardh+35;
 [Self.view AddSubview:self.tableView];
 Self.tableView.backgroundColor = [Uicolor Clearcolor];
 [Self.view AddSubview:self.navigationView];
Self.navigationController.navigationBar.barStyle = Uibarstyleblack;
  }//Custom navigation bar-(UIView *) navigationview{if (_navigationview = = nil) {_navigationview = [[UIView alloc]init];
  _navigationview.frame = CGRectMake (0, 0, screenwidth, Knavbarh);
  _navigationview.backgroundcolor = [Uicolor Clearcolor];

  _navigationview.alpha = 0.0;
 Add child controls [self setnavigationsubview];
return _navigationview; //Note: The Wool glass effect API is iOS8, suitable for iOS8, please use other methods-(void) setnavigationsubview{//Wool glass background Uiimageview *bgimgview = [[Uiimageview al
 LOC] Initwithframe:_navigationview.bounds]; BgimgviEw.image = [UIImage imagenamed:@ "666"];

 [_navigationview Addsubview:bgimgview]; /** Glass Special Effects type * uiblureffectstyleextralight, * uiblureffectstylelight, * Uiblureffectstyledark/uiblureffect * BL
 Ureffect = [Uiblureffect Effectwithstyle:uiblureffectstyledark];
 Mao Glass View Uivisualeffectview * Effectview = [[Uivisualeffectview alloc] initwitheffect:blureffect];
 Add to the control to have the special effect of the glass effectview.frame = bgimgview.bounds;
 [Bgimgview Addsubview:effectview];

 Set fuzzy transparency Effectview.alpha = 0.9f;
 Intermediate text box UIView *centertextview = [[UIView alloc]init];
 Self.centertextview = Centertextview;
 CGFloat centertextviewx = 0;
 CGFloat centertextviewy = 64;
 CGFloat centertextvieww = 0;

 CGFloat CENTERTEXTVIEWH = 0;
 Text size NSString *title = @ "The new picture of Rock after the Pg.lostk opened";
 NSString *desc = @ "Rock Pure Heart Square 8 sets";
 Cgsize titlesize = [title Sizewithattributes:@{nsfontattributename:[uifont Systemfontofsize:12]}];
 Cgsize descsize = [desc sizewithattributes:@{nsfontattributename:[uifont systemfontofsize:11]}]; CenTERTEXTVIEWW = titlesize.width > descsize.width?
 TitleSize.width:descSize.width;
 CENTERTEXTVIEWH = titlesize.height + descsize.height +10;
 Centertextviewx = (SCREENWIDTH-CENTERTEXTVIEWW)/2;

 Centertextview.frame = CGRectMake (centertextviewx, Centertextviewy, CENTERTEXTVIEWW, CenterTextViewH);
 Text label Uilabel *titlelabel = [[Uilabel alloc]init];
 Titlelabel.text = title;
 Titlelabel.font = [Uifont systemfontofsize:12];
 Titlelabel.textcolor = [Uicolor Whitecolor];

 Titlelabel.frame = CGRectMake (0,5, CENTERTEXTVIEWW, titlesize.height);
 Uilabel *desclabel = [[Uilabel alloc]init];
 Desclabel.textalignment = Nstextalignmentcenter;
 Desclabel.text = desc;
 Desclabel.font = [Uifont systemfontofsize:11];
 Desclabel.textcolor = [Uicolor Whitecolor];

 Desclabel.frame = CGRectMake (0, Titlesize.height + 5, CENTERTEXTVIEWW, descsize.height);
 [Centertextview Addsubview:titlelabel];
 [Centertextview Addsubview:desclabel];
[_navigationview Addsubview:centertextview]; Declare the control @proPerty (Nonatomic,strong) UIView *navigationview;  Navigation bar @property (nonatomic,strong) UIView *centertextview;  Title Text @property (assign, nonatomic) CGFloat lastoffsety; Record the last position @property (nonatomic,strong) Uiimageview *scaleimageview; Top picture Core code #pragma mark-scrollviewdelegate-(void) Scrollviewdidscroll: (Uiscrollview *) ScrollView {//Compute current offset location CG
 Float OffsetY = Scrollview.contentoffset.y;
 CGFloat Delta = offsetY-_lastoffsety;
 Dlog (@ "delta=%f", Delta);
 Dlog (@ "offsety=%f", OffsetY);
 CGFloat height = Kheardh-delta;
 if (height < Knavbarh) {height = Knavbarh;
 } cgfloat margin = 205;
  if (Delta>margin && delta<margin+39) {self.centertextview.y =--(Delta-margin);
 Self.centerTextView.alpha = 1.0;
  } if (delta>margin+39) {self.centertextview.y = 25;
 Self.centerTextView.alpha = 1.0;
 } if (delta<=margin) {self.centerTextView.alpha = 0;
  } if (delta<= 0) {self.centertextview.y = 64;
 Self.centerTextView.alpha = 0.0;
 }[_scaleimageview mas_updateconstraints:^ (Masconstraintmaker *make)
 {make.height.mas_equalTo (height);

 }];
 CGFloat alpha = Delta/(KHEARDH-KNAVBARH);
 if (Alpha >= 1.0) {alpha = 1.0;
} Self.navigationView.alpha = Alpha; }

Summarize

The above is the entire content of this article, I hope that the study or work to bring some help, if you have questions you can message exchange.