ios 扑克牌效果轮播_缩放效果的轮播图 iOS

电玩女神 2023-01-09 12:43 212阅读 0赞

![Image 1][]

111.gif

做个一个缩放的轮播图，基本实现功能。

简单的记录下思路:

因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二张，倒数第一张)，右边两张(第一张，第二张)

1、实现图片缩放功能(主要代码)

\-(void)scaleImagevWithCenterX:(CGFloat)centerx\{

for (UIImageView \*imagev in self.imgViewArr) \{

//计算当前控件与显示区中心点的相对距离

CGFloat distance = ABS(imagev.center.x - centerx);

//设置缩放系数

CGFloat factor=self.scaleFactor;

//获取缩放倍数

CGFloat scales=1/(1+distance\*factor);

//进行缩放

imagev.transform=CGAffineTransformMakeScale(scales, scales);

\}

\}

2、实现分页效果，主要是借助了scrollview的delegate，根据图片的宽度，目标偏移量x，计算出偏移后的页数，再根据velocity.x滑动的力度，算出，便宜后是否还要平移居中调整

\- (void)scrollViewWillEndDragging:(UIScrollView \*)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint \*)targetContentOffset\{

3、实现循环，如果到了第二张图，直接contentOffset到倒数第二张，反之，依然。具体在方法scrollOver中。

4、添加定时器，scrollViewWillBeginDragging停止，scrollViewDidEndDragging:

willDecelerate:开启

5、写完发现个问题，定时器循环没问题，但是，手动循环，有时连续滑动，直接到达第一张或末张，在scrollViewDidScroll中，写入下面方法，解决

if (scrollView.contentOffset.x< self.imgWidth) \{

scrollView.contentOffset = CGPointMake(self.imgWidth, 0);

self.scrollView.contentOffset=CGPointMake(self.imgWidth \* (self.imgViewArr.count - 3), 0);

self.currentIndex = self.imgViewArr.count - 3;

\}else if (scrollView.contentOffset.x > (self.imgArr.count - 2) \* self.imgWidth)\{

self.scrollView.contentOffset = CGPointMake(self.imgWidth \* 2, 0);

self.currentIndex = 2;

\}

\[demo地址(点击跳转)\](https://github.com/yuanweiqianyu/BannerView)

个人感觉，自己完成的轮播还是有些问题，如有大神，有改进方案，或者别的思路，敬请交流，指正。

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关轮播图效果

效果图： ![1264306-20190925165841953-217666741.gif][] 1.引入依赖 implementation 'com.yout

Dear 丶/ 2023年08月17日 17:09/ 0 赞/ 137 阅读

相关 ios 扑克牌效果轮播_缩放效果的轮播图 iOS

![Image 1][] 111.gif 做个一个缩放的轮播图，基本实现功能。简单的记录下思路: 因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二

电玩女神/ 2023年01月09日 12:43/ 0 赞/ 213 阅读

相关 iOS广告轮播图

文章目录引言 I、自定义cell封装CycleScrollView 1.1 cell 头文件 1.2 cell 实现文件

你的名字/ 2022年10月17日 13:56/ 0 赞/ 182 阅读

相关 html轮播图京东效果,JavaScript仿京东轮播图效果

本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码，供大家参考，具体内容如下做了一个仿京东的轮播图，当然没有人家官网的精美啦。 ![3f7d657d

比眉伴天荒/ 2022年10月06日 04:56/ 0 赞/ 259 阅读

相关 jquery实现轮播图效果

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果先看下最后的效果图 ![Center]

野性酷女/ 2022年08月07日 04:58/ 0 赞/ 266 阅读

相关 ios图片轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/11959.html][http_www.demodashi.com_demo_119

一时失言乱红尘/ 2022年05月29日 00:20/ 0 赞/ 260 阅读

相关 iOS 封装跑马灯和轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/14075.html][http_www.demodashi.com_demo_140

曾经终败给现在/ 2022年05月10日 03:06/ 0 赞/ 198 阅读

相关 javascript实现轮播图效果

实现效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

r囧r小猫/ 2022年04月14日 06:26/ 0 赞/ 394 阅读

相关 JS实现轮播图效果

一、用JS实现轮播图,简单分为五大步，具体看代码块注释 1.自动播放 2.鼠标进入停止播放 3.鼠标离开继续播放 4.点豆豆跳转到对应图片 5.给图片添加超

深藏阁楼爱情的钟/ 2022年03月17日 14:14/ 0 赞/ 400 阅读

相关抽屉效果的轮播图

![20190228153250498.gif][] 效果如上使用css，通过计算，实现上面的动画效果。代码： <style> {

╰半夏微凉°/ 2022年03月15日 02:12/ 0 赞/ 250 阅读