美文网首页项目开发技巧iOS动画iOS动画动效
Bison教你1分钟集成3D无限翻转的Banner

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

作者: Bison | 来源:发表于2015-10-24 13:16 被阅读3591次
    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所有 如需转载请保留原文超链接地址!否则后果自负!

    相关文章

      网友评论

      • priate:怎么绕过苹果上架检测?请问大神。
      • 洪江码农申:楼主好人,楼主大神,请问您想到绕过苹果检测的办法什么呢?
        Bison:@清晨的静海 后台控制
      • 随意_M:卤煮,俺加工了下,让它自己循环起来感觉好点 :stuck_out_tongue_winking_eye:
        Bison:@浩楠哥的小猴子 👍
      • liujieyuu:绕过苹果的检测上传??怎么弄啊?卤煮
      • 大萌哥哥:怎么绕过苹果的检测啊?求教
      • Evan叶少:如何绕过苹果检测呢??App快要上线咯
      • 阿甘丽珍:牛🐮
      • WillkYang:什么办法可以绕过苹果的检测呢,之前不小心用了,怕后面上不了架,虚心求教~
        liujieyuu:@yate1996 上架成功没啊?
        WillkYang:@Bison 谢谢
        Bison:@yate1996 已发简信

      本文标题:Bison教你1分钟集成3D无限翻转的Banner

      本文链接:https://www.haomeiwen.com/subject/ebnthttx.html