动图
技术原理:
当你下拉scrollview的时候,会监听scrollview的contentOffset来调整头部背景图片的位置,通过CGAffineTransformMakeTranslation和CGAffineTransformScale实现头像的缩小。
具体代码实现:
-(void)willMoveToSuperview:(UIView *)newSuperview { [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil]; self.scrollView.contentInset = UIEdgeInsetsMake(self.frame.size.height, 0 ,0, 0); self.scrollView.scrollIndicatorInsets = self.scrollView.contentInset; } -(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { CGPoint newOffset = [change[@"new"] CGPointValue]; [self updateSubViewsWithScrollOffset:newOffset]; } -(void)updateSubViewsWithScrollOffset:(CGPoint)newOffset { float destinaOffset = -64; float startChangeOffset = -self.scrollView.contentInset.top; newOffset = CGPointMake(newOffset.x, newOffset.y<startChangeOffset?startChangeOffset:(newOffset.y>destinaOffset?destinaOffset:newOffset.y)); float subviewOffset = self.frame.size.height-40; float newY = -newOffset.y-self.scrollView.contentInset.top; float d = destinaOffset-startChangeOffset; float alpha = 1-(newOffset.y-startChangeOffset)/d; float imageReduce = 1-(newOffset.y-startChangeOffset)/(d*2); self.subTitleLabel.alpha = alpha; self.titleLabel.alpha = alpha; self.frame = CGRectMake(0, newY, self.frame.size.width, self.frame.size.height); self.backImageView.frame = CGRectMake(0, -0.5*self.frame.size.height+(1.5*self.frame.size.height-64)*(1-alpha), self.backImageView.frame.size.width, self.backImageView.frame.size.height); CGAffineTransform t = CGAffineTransformMakeTranslation(0,(subviewOffset-0.35*self.frame.size.height)*(1-alpha)); _headerImageView.transform = CGAffineTransformScale(t, imageReduce, imageReduce); self.titleLabel.frame = CGRectMake(0, 0.6*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(1-alpha), self.frame.size.width, self.frame.size.height*0.2); self.subTitleLabel.frame = CGRectMake(0, 0.75*self.frame.size.height+(subviewOffset-0.45*self.frame.size.height)*(1-alpha), self.frame.size.width, self.frame.size.height*0.1); }
Demo分享:
GitHub:https://github.com/ianisme/CoolNavi