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

电玩女神 2023-01-09 12:43 232阅读 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 条评论，232人围观）

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

相关阅读

相关轮播图效果

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

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

相关轮播图的动画效果

实现的效果：图片匀速滑动，右下角的小图片也跟着变色。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

拼搏现实的明天。/ 2023年07月04日 14:19/ 0 赞/ 19 阅读

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

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

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

相关 iOS广告轮播图

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

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

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

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

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

相关 ios图片轮播效果

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

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

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

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

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

相关 javascript实现轮播图效果

实现效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

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

相关 JS实现轮播图效果

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

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

相关抽屉效果的轮播图

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

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