使用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

就是这么简单:)

使用UITableView实现图片视差效果

时间： 2024-11-08 23:29:21

使用UITableView实现图片视差效果的相关文章

OCiOS动效设计：UITableView 实现滚动视差效果

前言最近在使用'悦跑圈'这个App,其'跑鞋展厅'功能的滚动视差效果深深地吸引了我,在网上搜罗了大量的资料,如下,我将仿照该效果简单介绍实现方法. 效果演示细节实现 OffsetImageCell.m - (void)cellOffset { // 1.获取cell在屏幕中的rect CGRect centerToWindow = [self convertRect:self.bounds toView:self.window]; // 2.获取cell中心点y轴坐标 CGFloat cen

基于Parallax设计HTML视差效果

年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Head最合适不过了,大家可以看这个官方Demo. 一.准备工作如果不想用cdn的话,就下载 1.在github上下载parallax 2.下载jquery 二.实现效果这里只介绍最简单的使用方法,先上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g

使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了:先扔一个最终实现的效果图先分析下效果图中实现的功能点顶部下拉时背景图形成视差效果上拉时标题栏透明切换显示底部实现TabLayout+ViewPager+Fragment+RecyclerV

JS实现有点炫的图片展示效果-图片解体和组合

经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://runjs.cn/detail/tl9quyke查看源码http://runjs.cn/code/tl9quyke HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. 1 <div i

网站——循环图片切换效果（最近做网站，已经快炸了）

看一下效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"><head><meta

一款在论坛上看到的JS封装的随机过渡方式的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS3 实现六边形Div图片展示效果

效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的). 最外层div(boxF)旋转120度.第二层(boxS)旋转-60度,第三层(boxT)再旋转

图片剪切效果

第一篇博文,把今天写的一个实现图片剪切效果的JS脚本发上来基本思路: 三层结构,第一层为透明度是0.7的图片,第二层为正常的图片,第三层使用一个DIV作为选取框,采用CSS中的绝对定位进行覆盖 HTML代码 <div id="box"> <img id="img-1" src="imgs/cat-1.jpg"/> <img id="img-2" src="imgs/cat-2.jpg&