使用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:.f];
}

#pragma mark - Table view data source

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

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == )
    {
        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:.f];
        }

        return cell;
    }
}

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

    return ;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 防止出现bug
    if (scrollView.contentOffset.y <= )
    {
        _showImageCell.layer.masksToBounds = NO;
    }
    else
    {
        _showImageCell.layer.masksToBounds = YES;
    }

    // 计算偏移量
    _showImageCell.showImageView.y \
        = calculateSlope(, , , )*scrollView.contentOffset.y +
    calculateConstant(, , , );
}

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:.f];
    _rootBlurImage = [[IMAGE scaleWithFixedWidth:.f] grayScale];
}

#pragma mark - Table view data source

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

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == )
    {
        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:.f];
        }

        return cell;
    }
}

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

    return ;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 防止出现bug
    if (scrollView.contentOffset.y <= )
    {
        _showImageCell.layer.masksToBounds = NO;
    }
    else
    {
        _showImageCell.layer.masksToBounds = YES;
    }

    // 计算偏移量
    _showImageCell.showImageView.y \
        = calculateSlope(, , , )*scrollView.contentOffset.y +
    calculateConstant(, , , );

    // 计算偏移量
    _showImageCell.showBlurImageView.y \
    = calculateSlope(, , , )*scrollView.contentOffset.y +
    calculateConstant(, , , );

    // 计算偏移量
    _showImageCell.showBlurImageView.alpha \
    = calculateSlope(, , , )*scrollView.contentOffset.y +
    calculateConstant(, , , );
}

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 = .f;
        [self addSubview:_showBlurImageView];
    }
    return self;
}

@end

就是这么简单:)