用UIScrollView产生视差效果

效果:

高级效果:

源码:

MoreInfoView.h  +  MoreInfoView.m

//
// MoreInfoView.h
// YXCell
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import <UIKit/UIKit.h> @interface MoreInfoView : UIView @property (nonatomic, strong) UIImageView *imageView; @end
//
// MoreInfoView.m
// YXCell
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "MoreInfoView.h" @implementation MoreInfoView - (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
CGRect rect = frame;
self.layer.borderWidth = 0.5f;
self.layer.borderColor = [UIColor blackColor].CGColor;
self.layer.masksToBounds = YES; _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(-, ,
rect.size.width + *,
rect.size.height)];
[self addSubview:_imageView];
}
return self;
} @end

RootViewController.m

//
// RootViewController.m
// YXCell
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "MoreInfoView.h" @interface RootViewController ()<UIScrollViewDelegate> @property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, assign) CGFloat k;
@property (nonatomic, assign) CGFloat b; @end @implementation RootViewController - (void)linearFunctionPointA:(CGPoint)pointA
pointB:(CGPoint)pointB
{
CGFloat x1 = pointA.x; CGFloat y1 = pointA.y;
CGFloat x2 = pointB.x; CGFloat y2 = pointB.y; _k = calculateSlope(x1, y1, x2, y2);
_b = calculateConstant(x1, y1, x2, y2);
} - (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor]; // 计算斜率
[self linearFunctionPointA:CGPointMake(, -)
pointB:CGPointMake(, )]; _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
_scrollView.delegate = self;
_scrollView.pagingEnabled = YES;
[self.view addSubview:_scrollView]; NSArray *picArray = @[[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""],
[UIImage imageNamed:@""]]; [picArray enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
MoreInfoView *show = \
[[MoreInfoView alloc] initWithFrame:CGRectMake(idx*self.view.bounds.size.width, ,
self.view.bounds.size.width,
self.view.bounds.size.height)];
show.imageView.image = obj; [_scrollView addSubview:show];
}]; _scrollView.contentSize = CGSizeMake(picArray.count*self.view.bounds.size.width,
self.view.bounds.size.height);
} - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat X = scrollView.contentOffset.x; [scrollView.subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
MoreInfoView *tmp = obj; if ([tmp isKindOfClass:[MoreInfoView class]])
{
// 产生视差效果
CGRect rect = tmp.imageView.frame;
rect.origin.x = _k * (X - idx*) + _b;
tmp.imageView.frame = rect;
}
}];
} // 计算用
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

需要注意的地方:

1. 这个地方的值不是随便设定的哦:)

2. 修改那个270的值来达到上图显示的各种效果

3. 下面的X - idx*320也是非常关键的哦

用UIScrollView产生视差效果的更多相关文章

  1. Swift - 用UIScrollView实现视差动画效果

    Swift - 用UIScrollView实现视差动画效果 效果 源码 https://github.com/YouXianMing/Swift-Animations // // MoreInfoVi ...

  2. UIScrollView视差效果动画

    UIScrollView视差效果动画 效果 源码 https://github.com/YouXianMing/Animations // // ScrollImageViewController.m ...

  3. 使用UITableView实现图片视差效果

    使用UITableView实现图片视差效果 视差效果如下: 原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableVi ...

  4. 滚动视差效果——background-attachment

    滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...

  5. 基于Parallax设计HTML视差效果

    年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Hea ...

  6. css中的视距perspective和视差效果

    概述 之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspec ...

  7. banner 跟随鼠标呈现视差效果

    参考 Element 官网,利用 js / jq 和 css3, 实现某图片随着鼠标移动呈现的视差效果. <!DOCTYPE html> <html> <head> ...

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

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  9. UITableViewCell图片视差效果

    UITableViewCell图片视差效果 效果 源码 https://github.com/YouXianMing/Animations 细节 OffsetImageCell.m OffsetCel ...

随机推荐

  1. CRF两个例子的理解

    概率计算例子: 预测例子:

  2. springweb flux 服务器推送事件

    以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...

  3. 不开vip会员照样看vip电影(亲测有效)

    此为临时链接,仅用于文章预览,将在短期内失效关闭 不开vip会员照样看vip电影(亲测有效) 2018-03-08 mr_lee Python达人课堂 刚刚测试,真实有效,颇不接待要分享了... 土豪 ...

  4. mac 上安装 redis

    1.从http://redis.io 下载redis包,这里选择了redis-3.2.3 2.将下载的 redis-3.2.3.tar.gz 包拷贝到 /usr/local 目录 3.执行 sudo ...

  5. jqGrid随窗口大小变化自适应大小-转

    第一种: jqGrid随窗口大小变化自适应宽度 $(function(){ $(window).resize(function(){ $("#listId").setGridWid ...

  6. Spark2.3.1中用各种模式来跑官方Demo

    1  使用单机local模式提交任务 local模式也就是本地模式,也就是在本地机器上单机执行程序.使用这个模式的话,并不需要启动Hadoop集群,也不需要启动Spark集群,只要有一台机器上安装了J ...

  7. centOS7.2下 搭建gitlab使用git为团队管理代码

    最近更换了阿里云服务器  使用centOS7.2,目前配置1核2G,搭建gitlab有点吃力,另外如果1核1g就不要搭建了,推荐配置是2核4G以上 下面来简单记录整个搭建过程 注意: 本次实验OS为c ...

  8. MVC 基架不支持 Entity Framework 6 或更高版本 即 NuGet的几个小技巧

    MVC 基架不支持 Entity Framework 6 或更高版本.有关详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=276833. 原因:mvc版 ...

  9. C学习笔记(1)-结构体、预处理与多文件结构程序设计

    一.结构体的定义与使用 #include <stdio.h> //定义结构体(类似模板) typedef struct { char name[50]; int age; char add ...

  10. 小白学习之Code First(二)

    Code First约定: 注:EDMX模板 (SSDL:存储模型=>数据库表 ,CSDL:概念模型=>实体,C-S模型=>存储和概念模型之间的映射关系) System.Data.E ...