# Integrating an endlessly flipping 3D banner in one minute

Language: en
Canonical: [Integrating an endlessly flipping 3D banner in one minute](<https://allluckly.cn/en/journal/2015-10-24-integrating-an-endlessly-flipping-3d-banner-in-one-minute/>)
中文：[中文 HTML](<https://allluckly.cn/%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD/Private>)
English: [English HTML](<https://allluckly.cn/en/journal/2015-10-24-integrating-an-endlessly-flipping-3d-banner-in-one-minute/>)
Published: 2015-10-24T00:00:00+08:00
Modified: 2026-10-23T10:44:59+08:00
Author: [Bison](<https://allluckly.cn/about/>)

Combines left and right swipe gestures with transition animations to cycle through banner images in 3D. It covers component import and tap delegation, while explicitly noting that the effect uses a private animation API and is retained as a technical experiment.

Originally credited to Bison. Content is retained as published.

English translation of the [Chinese original](<https://allluckly.cn/%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD/Private>), translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

**Before you read** This technical note dates from 2015–2017. The examples have not been rerun as part of this archive update. Explicitly uses a private system transition API and states that the approach is unsuitable for apps intended for store release.

> "iOS technical sharing, iOS development, iOS development tips, iOS development blog" Bison

This historical illustration is currently unavailable. [The original image URL is retained](<http://upload-images.jianshu.io/upload_images/671504-4615c325630ecbe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240>) for reference. This is an impressive advertising carousel feature used in many `APP` include this feature, such as `礼物说` There are a few others whose names I have forgotten. Here is a brief explanation of how this feature works. First, define the basic controls as follows.

```css
- (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];
}
```

Then implement the methods for each gesture.

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

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

Now it is time to implement the 3D transition animation.

```css
#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"];
}
```

Does something still seem missing? A banner needs images, of course. Here is how to obtain them.

```css
#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];
}
```

Trigger an event by tapping an image

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

## Integration

Import the header: `#import "SayGift_3DBanner_View.h"`.

Drag the `SayGift_3DBanner_View` files into your project.

Implement the `ClickImgDelegate` delegate.

```css
   

- (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];

}
```

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

### PS

#### The transition animation uses a private system `API`, so it cannot be used in an `APP` intended for App Store release. That is unfortunate. I thought of an approach that might bypass Apple's detection during submission, and it seemed potentially workable.

### [Click to download the demo](<https://github.com/AllLuckly/SayGift_3DAdvertisement>)

Finally, here are screenshots of the result.

This historical illustration is currently unavailable. [The original image URL is retained](<http://upload-images.jianshu.io/upload_images/671504-0e4df3c94d09e081.gif?imageMogr2/auto-orient/strip>) for reference.

Recommended reading: [Integrating Alipay friend sharing in three minutes](<http://www.jianshu.com/p/05a3087cd796>)

Copyright ©Bison. Reproduction without permission is prohibited.