使用UITableView实现图片视差效果

使用UITableView实现图片视差效果

视差效果如下:

原理:

根据偏移量计算不同的移动速度,so easy!

//
//  RootTableViewController.h
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface RootTableViewController : UITableViewController

@end

//
//  RootTableViewController.m
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootTableViewController.h"
#import "ImageCell.h"
#import "UIImage+ImageEffects.h"
#import "FrameAccessor.h"

#define IMAGE         [UIImage imageNamed:@"girl"]
#define IMAGE_HEIGHT  [IMAGE scaleWithFixedWidth:320.f].size.height

@interface RootTableViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) ImageCell   *showImageCell;

@property (nonatomic, strong) UIImage     *rootImage;

@end

@implementation RootTableViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _rootImage = [IMAGE scaleWithFixedWidth:320.f];
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return 10;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0)
    {
        static NSString *reusedLableImage = @"Image";
        ImageCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableImage];
        if (cell == nil)
        {
            cell = [[ImageCell alloc] initWithStyle:UITableViewCellStyleDefault
                                    reuseIdentifier:reusedLableImage];
        }
        
        _showImageCell              = cell;
        cell.showImageView.image    = _rootImage;
        cell.showImageView.viewSize = _rootImage.size;

        return cell;
    }
    else
    {
        static NSString *reusedLableOne = @"Normal";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableOne];
        if (cell == nil)
        {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                          reuseIdentifier:reusedLableOne];
            
            cell.backgroundColor = [UIColor whiteColor];
            
            cell.textLabel.text = @"YouXianMing";
            cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin"
                                                  size:20.f];
        }
        
        return cell;
    }
}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 返回图片高度
    if (indexPath.row == 0)
    {
        return [IMAGE scaleWithFixedWidth:320.f].size.height;
    }
    
    return 70;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 防止出现bug
    if (scrollView.contentOffset.y <= 0)
    {
        _showImageCell.layer.masksToBounds = NO;
    }
    else
    {
        _showImageCell.layer.masksToBounds = YES;
    }
    
    // 计算偏移量
    _showImageCell.showImageView.y 
        = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y +
    calculateConstant(0, 0, 200, 100);
}

CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y2 - y1) / (x2 - x1);
}

CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
}

@end

//
//  ImageCell.h
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ImageCell : UITableViewCell

@property (nonatomic, strong) UIImageView *showImageView;

@end

//
//  ImageCell.m
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ImageCell.h"
#import "FrameAccessor.h"

@implementation ImageCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self)
    {
        _showImageView = [[UIImageView alloc] init];
        _showImageView.frame = (CGRect){CGPointZero, CGSizeZero};

        [self addSubview:_showImageView];
    }
    return self;
}

@end

好吧,止足于这种效果的话就太简单了,来点复杂的:)

//
//  RootTableViewController.h
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface RootTableViewController : UITableViewController

@end

//
//  RootTableViewController.m
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootTableViewController.h"
#import "ImageCell.h"
#import "UIImage+ImageEffects.h"
#import "FrameAccessor.h"

#define IMAGE         [UIImage imageNamed:@"girl"]
#define IMAGE_HEIGHT  [IMAGE scaleWithFixedWidth:320.f].size.height

@interface RootTableViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) ImageCell   *showImageCell;

@property (nonatomic, strong) UIImage     *rootImage;
@property (nonatomic, strong) UIImage     *rootBlurImage;

@end

@implementation RootTableViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _rootImage     = [IMAGE scaleWithFixedWidth:320.f];
    _rootBlurImage = [[IMAGE scaleWithFixedWidth:320.f] grayScale];
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return 10;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0)
    {
        static NSString *reusedLableImage = @"Image";
        ImageCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableImage];
        if (cell == nil)
        {
            cell = [[ImageCell alloc] initWithStyle:UITableViewCellStyleDefault
                                    reuseIdentifier:reusedLableImage];
        }
        
        _showImageCell              = cell;
        cell.showImageView.image    = _rootImage;
        cell.showImageView.viewSize = _rootImage.size;

        cell.showBlurImageView.image    = _rootBlurImage;
        cell.showBlurImageView.viewSize = _rootBlurImage.size;
        
        return cell;
    }
    else
    {
        static NSString *reusedLableOne = @"Normal";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reusedLableOne];
        if (cell == nil)
        {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                          reuseIdentifier:reusedLableOne];
            
            cell.backgroundColor = [UIColor whiteColor];
            
            cell.textLabel.text = @"YouXianMing";
            cell.textLabel.font = [UIFont fontWithName:@"HelveticaNeue-Thin"
                                                  size:20.f];
        }
        
        return cell;
    }
}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 返回图片高度
    if (indexPath.row == 0)
    {
        return [IMAGE scaleWithFixedWidth:320.f].size.height;
    }
    
    return 70;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 防止出现bug
    if (scrollView.contentOffset.y <= 0)
    {
        _showImageCell.layer.masksToBounds = NO;
    }
    else
    {
        _showImageCell.layer.masksToBounds = YES;
    }
    
    // 计算偏移量
    _showImageCell.showImageView.y 
        = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y +
    calculateConstant(0, 0, 200, 100);
    
    // 计算偏移量
    _showImageCell.showBlurImageView.y 
    = calculateSlope(0, 0, 200, 100)*scrollView.contentOffset.y +
    calculateConstant(0, 0, 200, 100);
    
    // 计算偏移量
    _showImageCell.showBlurImageView.alpha 
    = calculateSlope(0, 0, 200, 1)*scrollView.contentOffset.y +
    calculateConstant(0, 0, 200, 1);
}

CGFloat calculateSlope(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y2 - y1) / (x2 - x1);
}

CGFloat calculateConstant(CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2)
{
    return (y1*(x2 - x1) - x1*(y2 - y1)) / (x2 - x1);
}

@end

//
//  ImageCell.h
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ImageCell : UITableViewCell

@property (nonatomic, strong) UIImageView *showImageView;
@property (nonatomic, strong) UIImageView *showBlurImageView;

@end

//
//  ImageCell.m
//  TableView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ImageCell.h"
#import "FrameAccessor.h"

@implementation ImageCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self)
    {
        _showImageView = [[UIImageView alloc] init];
        _showImageView.frame = (CGRect){CGPointZero, CGSizeZero};
        [self addSubview:_showImageView];
        
        _showBlurImageView = [[UIImageView alloc] init];
        _showBlurImageView.frame = (CGRect){CGPointZero, CGSizeZero};
        _showBlurImageView.alpha = 0.f;
        [self addSubview:_showBlurImageView];
    }
    return self;
}

@end

就是这么简单:)