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所有 如需轉載請保留原文超連結位址！否則後果自負！