美文网首页
导航头像放大缩小动画简单实现

导航头像放大缩小动画简单实现

作者: Nicole__Zhang | 来源:发表于2017-03-08 10:37 被阅读98次
    效果图.gif
    #import "ViewController.h"
    
    @interface ViewController ()<UITableViewDelegate>
    {
        
    }
    
    @property (nonatomic , strong) UIImageView *headerImageView;     /**< <#description#> */
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        UIView *titleView = [[UIView alloc] init];
        self.navigationItem.titleView = titleView;
        
        NSLog(@"%@",NSStringFromCGRect(self.navigationItem.titleView.frame));
        
        self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
        self.headerImageView.layer.cornerRadius = 20.f;
        self.headerImageView.layer.masksToBounds = YES;
        self.headerImageView.image = [UIImage imageNamed:@"head"];
      
        // 保证用户头像水平居中
        self.headerImageView.center = CGPointMake(titleView.center.x, 0);
        [titleView addSubview:self.headerImageView];
        
        
        UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
        tableView.backgroundColor = [UIColor whiteColor];
        [self.view addSubview:tableView];
        
        tableView.delegate = self;
    }
    
    
    
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
        CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top;
        CGFloat scale = 1.f;
        
        // 放大
        if (offsetY < 0) {
            scale = MIN(1.5, 1 - offsetY / 300);
        } else if (offsetY > 0) {
            // 缩小
            scale = MAX(0.45, 1 - offsetY / 300);
        }
        
        //进行缩放
        self.headerImageView.transform = CGAffineTransformMakeScale(scale, scale);
        // 保证缩放后y坐标不变
        CGRect frame = self.headerImageView.frame;
        frame.origin.y = -self.headerImageView.layer.cornerRadius / 2;
        self.headerImageView.frame = frame;
    }
    
    
    @end
    

    相关文章

      网友评论

          本文标题:导航头像放大缩小动画简单实现

          本文链接:https://www.haomeiwen.com/subject/vjcbgttx.html