Bison教你1分钟集成3D无限翻转的Banner

gift.png 这是一个很炫的广告轮播功能,很多APP都有这个功能,比如说礼物说 还有几个忘记名字了。。。 在这里给大家简单的讲下该功能是怎么实现的 首先是定义一下基本的控件,代码如下

- (void)show3DBannerView{
    
    _imageArr = @[@"0.jpg",@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg"];
    //定义图片控件
    _imageView=[[UIImageView alloc]init];
    _imageView.frame= CGRectMake(0, 0, MainScreenW, 180);
    _imageView.contentMode=UIViewContentModeScaleAspectFit;
    
    _imageView.image=[UIImage imageNamed:_imageArr[0]];//默认图片
    _imageView.userInteractionEnabled = YES;
    self.userInteractionEnabled = YES;
    [self addSubview:_imageView];
    _imageView.tag = 10;
     //默认点击第一张
    UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doDoubleTap:)];
    [_imageView addGestureRecognizer:doubleTap];
    
    //添加手势
    UISwipeGestureRecognizer *leftSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
    leftSwipeGesture.direction=UISwipeGestureRecognizerDirectionLeft;
    [self addGestureRecognizer:leftSwipeGesture];
    
    UISwipeGestureRecognizer *rightSwipeGesture=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
    rightSwipeGesture.direction=UISwipeGestureRecognizerDirectionRight;
    [self addGestureRecognizer:rightSwipeGesture];
}

然后实现各手势的方法

#pragma mark 向左滑动浏览下一张图片
-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:YES];
}

#pragma mark 向右滑动浏览上一张图片
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{
    [self transitionAnimation:NO];
}

下面到了我们该实现3D的转场动画了的时候了

#pragma mark 转场动画
-(void)transitionAnimation:(BOOL)isNext{
    //1.创建转场动画对象
    CATransition *transition=[[CATransition alloc]init];
    
    //2.设置动画类型,注意对于苹果官方没公开的动画类型只能使用字符串,并没有对应的常量定义
    transition.type=@"cube";
    
    //设置子类型
    if (isNext) {
        transition.subtype=kCATransitionFromRight;
    }else{
        transition.subtype=kCATransitionFromLeft;
    }
    //设置动画时常
    transition.duration=1.0f;
    
    //3.设置转场后的新视图添加转场动画
    _imageView.image=[self getImage:isNext];
    [_imageView.layer addAnimation:transition forKey:@"KCTransitionAnimation"];
}

是不是还觉得缺了什么啊?Banner怎么可能少的了图片呢? 下面是获取图片的方法

#pragma mark 取得当前图片
-(UIImage *)getImage:(BOOL)isNext{
    if (isNext) {
        _currentIndex=(_currentIndex+1)%_imageArr.count;
    }else{
        _currentIndex=(_currentIndex-1+_imageArr.count)%(int)_imageArr.count;
    }
    NSString *imageName = _imageArr[_currentIndex];
    
    
    _imageView.tag = _currentIndex+10;
    //增加点击手势
    UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doDoubleTap:)];
    
    [_imageView addGestureRecognizer:doubleTap];
    
    
    return [UIImage imageNamed:imageName];
}

点击图片触发事件

- (void)doDoubleTap:(UITapGestureRecognizer*)gesture
{
    
      [_delegate ClickImg:(int)gesture.view.tag];
}

集成方法

导入头文件#import "SayGift_3DBanner_View.h"

SayGift_3DBanner_View文件拉进自己的工程

实现ClickImgDelegate代理

- (void)viewDidLoad {
    [super viewDidLoad];
    SayGift_3DBanner_View *Banner_View = [[SayGift_3DBanner_View alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 180)];
    Banner_View.delegate = self;
    [Banner_View show3DBannerView];
    [self.view addSubview:Banner_View];

}
//点击了第几张图片
- (void)ClickImg:(int)index{
     NSLog(@"点击了第%d张",index);
}

PS

由于转场的动画使用的是系统的私有API,所以不能用在需要上架的APP里面哦!有点遗憾哈.......想到了一个方法貌似可以绕过苹果的检测上传,感觉还可以实行的样子

Demo下载地址:https://github.com/AllLuckly/SayGift_3DAdvertisement

最后我把效果图贴出来给大家看看

3D.gif

好文推荐:Bison教你3分钟集成支付宝好友分享

更多经验请点击

如对你有帮助,请不要吝惜你的star和喜欢哦!

技术交流群:534926022(免费) 511040024(0.8/人付费)

推荐一款学习iOS开发的app_____|______| | 传送门 原文在:http://www.allluckly.cn/ 版权归©Bison所有 如需转载请保留原文超链接地址!否则后果自负!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

Android MP3录制,波形显示,音频权限兼容与播放

</p> Demo :https://github.com/CarGuo/RecordWave

1522
来自专栏Android 开发学习

NestedScrollView 嵌套 ListView 实现滑动折叠效果

4195
来自专栏葬爱家族

Android高级动画(4)完结篇目录回顾封装库总结

Android高级动画(1)http://www.jianshu.com/p/48554844a2db Android高级动画(2)http://www.ji...

1052
来自专栏非著名程序员

Android自定义 View 实战之 StickerView

本篇文章为利用Matrix自定义View三部曲的第一部曲。 虽然Android内置了许多View供开发者组合和使用,但其多样性还是不足,在很多场景或功能需求下...

2059
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1243
来自专栏向治洪

android 二维码简化,实现仿qq扫描效果

了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做...

7235
来自专栏青蛙要fly的专栏

图片操作系列 —(2)手势旋转图片

在上次的文章:图片操作系列 —(1)手势缩放图片功能中,我们已经学会了如何用手势来对图片进行缩放。这次我们继续来看第二个操作,那就是如何用手势来旋转图片。

1724
来自专栏葬爱家族

Android高德之旅(3)UI Setting

前两篇讲到了地图的基础显示和地图类型,今天来记录下高德地图交互相关的设置。地图的触摸事件很丰富,有单击、双击、单指拖拽、双指拖拽、双指旋转、双指缩放等,高德提供...

1363
来自专栏何俊林

一个酷炫的音乐播放界面

前言:网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。本文是AchillesL出于学习与挑战的想法,思考播放界面背后的实...

1K6
来自专栏Android先生

带着问题去看源码——TextView篇

首先我们先大致的想一下这个问题问的是关于哪一块的知识,如果毫不犹豫上去就是一通回答,这样显得太不明智了,我也知道会重新测量,为什么?下面我们从源码的角度去看。既...

863

扫码关注云+社区