超简单实现商品详情页滑动动画效果

快速实现商品详情页上下滑动的动画效果

简单原理:创建一个headerBackview 作为 tableView 的 tableHeaderView 并实现:

[tableView insertSubview:self.headerBackview atIndex:0];

然后再-(void)scrollViewDidScroll:(UIScrollView *)scrollView的代理方法中实现相关视图frame 的变化

直接上代码

////  ViewController.m//  ZQ_GoodsDetailAnimation////  Created by hzq on 2017/6/7.//  Copyright © 2017年 zq. All rights reserved.//#import "ViewController.h"@interface ViewController ()@property(nonatomic,weak)UIView * headerBackview;

@property(nonatomic,weak)UIImageView * headerView;

@property(nonatomic,weak)UITableView * tableView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

UITableView * tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];

[self.view addSubview:tableView];

self.tableView = tableView;

tableView.delegate = self;

tableView.dataSource = self;

UIView * headerBackview = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width)];

self.headerBackview = headerBackview;

tableView.tableHeaderView= headerBackview;

UIImageView * headerView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width)];

[headerBackview addSubview:headerView];

self.headerView = headerView;

headerView.image = [UIImage imageNamed:@"tooopen_sy_127457023651.jpeg"];

[tableView insertSubview:self.headerBackview atIndex:0];

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return 10;

}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

static NSString * cellIdentifier = @"cellIdentifier";

UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (!cell) {

cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellIdentifier];

}

cell.backgroundColor = [UIColor cyanColor];

cell.textLabel.text = [NSString stringWithFormat:@"%ld",(long)indexPath.row];

return cell;

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return 100;

}

#pragma mark - UIScrollViewDelegate

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

{

CGFloat offset = scrollView.contentOffset.y;

CGRect frame = self.headerView.frame;

if (offset<0) {

frame.origin.y = offset;

frame.size.height = self.view.frame.size.width - offset;

frame.origin.x = offset/2;

frame.size.width = self.view.frame.size.width - offset;

}else{

frame.origin.y = offset/2;

}

self.headerView.frame = frame;

[self.tableView insertSubview:self.headerBackview atIndex:0];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end


附上github链接:github.com/ZIQG/ZQ_GoodsDetailAnimation 

你可能感兴趣的:(超简单实现商品详情页滑动动画效果)