本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码，供大家参考，具体内容如下
一、实现效果
通过拖拽屏幕实现卡片移动，左右两侧的卡片随着拖动变小，中间的变大。效果如下：
二、原理说明
1、上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到π/2的范围内，y的值在x的0的是后是最大的，左右则越来越小。
2、可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下:
3、放置到手机屏幕上的效果如下:
三、代码
封装每个卡片为card.h
卡片显示在cardswitchview.h上
代码思路是假设控件的中心为原点，中轴线为x轴和y轴，当卡片的中心为距离y轴越近时，卡片长度缩短的比例越趋近1.0，当卡片中线距离y轴越远时，卡片长度缩短的比例越趋近0；
如下图所示假设方块从位置1到位置2向左移动了长度a（写代码时需要做角度和长度的转换）,那么在曲线上b的值为cos(a),假设b=0.8,那么就在位置2的时候把高度缩短为原来的0.8倍，以此类推越趋近于控件中轴线的位置卡片越长。（这里角度和长度的转换倍数依情况而定）
?
|
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
//
// cardswitchview.m
// cardswitchdemo
//
// created by apple on 2016/11/9.
// copyright © 2016年 apple. all rights reserved.
//
#import "cardswitchview.h"
#import "card.h"
//播放器界面的的宽度所占的比例
static float viewscale = 0.70f;
@interface cardswitchview ()<uiscrollviewdelegate>
{
//用于切换的scrollview
uiscrollview *_scrollview;
//用于保存各个视图
nsmutablearray *_cards;
//滚动之前的位置
cgfloat _startpointx;
//滚动之后的位置
cgfloat _endpointx;
//需要居中显示的index
nsinteger _currentindex;
}
@end
@implementation cardswitchview
-(instancetype)initwithframe:(cgrect)frame
{
if (self = [super initwithframe:frame]) {
[self buildlayout];
}
return self;
}
-(void)buildlayout
{
//初始化scrollview
_scrollview = [[uiscrollview alloc] initwithframe:self.bounds];
_scrollview.delegate = self;
_scrollview.showshorizontalscrollindicator = false;
[self addsubview:_scrollview];
//初始化其他参数
_cards = [[nsmutablearray alloc] init];
_currentindex = 0;
}
#pragma mark -
#pragma mark 视图frame配置
//卡片宽度
-(float)cardwidth
{
return viewscale*self.bounds.size.width;
}
//卡片间隔
-(float)margin
{
return (self.bounds.size.width - [self cardwidth])/4;
}
//卡片起始位置
-(float)startx
{
return (self.bounds.size.width - [self cardwidth])/2.0f;
}
#pragma mark -
#pragma mark 配置轮播图片
-(void)setcardnumber:(nsinteger)cardnumber
{
_cardnumber = cardnumber;
//初始化各个播放器位置
for (nsinteger i = 0; i<cardnumber; i++ ) {
//第一步 在scrollview上添加卡片
float viewx = [self startx] + i*([self cardwidth] + [self margin]);
card* card = [[card alloc] initwithframe:cgrectmake(viewx, 0, [self cardwidth], self.bounds.size.height)];
card.layer.borderwidth = 1.0f;
card.index = i;
[_scrollview addsubview:card];
[_cards addobject:card];
[_scrollview setcontentsize:cgsizemake(card.frame.origin.x + [self cardwidth] + 2*[self margin], 0)];
}
//更新卡片的大小
[self updatecardtransform];
}
#pragma mark -
#pragma mark scrollview代理方法
//开始拖动时保存起始位置
-(void)scrollviewwillbegindragging:(uiscrollview *)scrollview
{
_startpointx = scrollview.contentoffset.x;
}
//当scrollview拖动时 变换每个view的大小，并保证居中屏幕的view高度最高
-(void)scrollviewdidscroll:(uiscrollview *)scrollview
{
[self updatecardtransform];
}
//滚动结束，自动回弹到居中卡片
-(void)scrollviewdidenddragging:(uiscrollview *)scrollview willdecelerate:(bool)decelerate
{
//滚动到视图中间位置
dispatch_async(dispatch_get_main_queue(), ^{
[self scrolltocurrentcard];
});
}
//卡片自动居中
-(void)scrolltocurrentcard
{
_endpointx = _scrollview.contentoffset.x;
//设置滚动最小生效范围，滚动超过scrollminidistance 即视为有切换卡片的意向
float scrollminidistance = self.bounds.size.width/30.0f;
if (_startpointx - _endpointx > scrollminidistance) {
nslog(@"向右滑动屏幕");
if (_currentindex != 0) {
_currentindex -= 1;
}
}else if (_endpointx - _startpointx > scrollminidistance)
{
nslog(@"向左滑动屏幕");
if (_currentindex != _cards.count - 1) {
_currentindex += 1;
}
}
float viewx = [self startx] + _currentindex*([self cardwidth] + [self margin]);
float needx = viewx - [self startx];
[_scrollview setcontentoffset:cgpointmake(needx, 0) animated:true];
}
//更新每个卡片的大小
-(void)updatecardtransform
{
for (card *card in _cards) {
//获取卡片所在index
//获取scrollview滚动的位置
cgfloat scrolloffset = _scrollview.contentoffset.x;
//获取卡片中间位置滚动的相对位置
cgfloat cardcenterx = card.center.x - scrolloffset;
//获取卡片中间位置和父视图中间位置的间距，目标是间距越大卡片越短
cgfloat apartlength = fabs(self.bounds.size.width/2.0f - cardcenterx);
//移动的距离和屏幕宽度的的比例
cgfloat apartscale = apartlength/self.bounds.size.width;
//把卡片移动范围固定到 -π/4到 +π/4这一个范围内
cgfloat scale = fabs(cos(apartscale * m_pi/4));
//设置卡片的缩放
card.transform = cgaffinetransformmakescale(1.0, scale);
}
}
@end
|
demo下载
github项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。
相关文章
猜你喜欢
- ASP.NET本地开发时常见的配置错误及解决方法？ 2025-06-10
- ASP.NET自助建站系统的数据库备份与恢复操作指南 2025-06-10
- 个人网站服务器域名解析设置指南：从购买到绑定全流程 2025-06-10
- 个人网站搭建：如何挑选具有弹性扩展能力的服务器？ 2025-06-10
- 个人服务器网站搭建：如何选择适合自己的建站程序或框架？ 2025-06-10
