zoukankan      html  css  js  c++  java
  • 简单的代码实现的炫酷navigationbar

    动图

    技术原理:

    当你下拉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
  • 相关阅读:
    Python之路-(js正则表达式、前端页面的模板套用、Django基础)
    Python之路-jQuery
    单例模式实际应用
    hibernate联合主键注解配置
    spring:ContextLoaderListener接口
    Struts2 校验
    Control character in cookie value, consider BASE64 encoding your value-Cookie保存中文出错[转]
    基于Cookie跨域的单点登录问题
    Spring:启动项目时加载数据库数据(总结)
    Oracle表分区[转]
  • 原文地址:https://www.cnblogs.com/fengmin/p/5599719.html
Copyright © 2011-2022 走看看