UIScrollView實現六棱柱圖片瀏覽效果

#import "PhotoDrumBrowseView.h"
@interface PhotoDrumBrowseView()<UIScrollViewDelegate>
@property(nonatomic,strong) UIScrollView * baseScrollView;
@property(nonatomic,strong) UIView * baseView;
@property(nonatomic,assign) CGRect originalBaseViewFrame;
@end
@implementation PhotoDrumBrowseView
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self createUI];
        [self addDrumBrowseImageView];
    }
    return self;
}
- (void)createUI{
    //滾動視圖其實主要是用來通過位置偏移進行計算旋轉的角度（通過偏移量與總寬度計算旋轉角度與一周2π的比值）
    self.baseScrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
    self.baseScrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:self.baseScrollView];
    CGFloat cellWidth = self.frame.size.width * 5.0 / 6.0;
    CGFloat cellHeight = cellWidth / 0.618;
    //加載六棱柱六個面
    self.baseView = [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width - cellWidth) / 2.0, (self.frame.size.height - cellHeight) * 1 / 3.0, cellWidth, cellHeight)];
    self.originalBaseViewFrame = self.baseView.frame;
    [self.baseScrollView addSubview:self.baseView];
}
//創建六棱柱面
- (void)addDrumBrowseImageView{
    int num = 6;
    //一些角度計算
    float radian = (M_PI * 2) / num;
    float cellWidth = self.baseView.frame.size.width / 2.0;
    float cellHeight = cellWidth / 0.618;
    //前後z軸偏移值
    float needBFOff = cellWidth * sin(radian);
    //左右x軸偏移值
    float needLROff = cellWidth / 2.0 * cos(radian) + cellWidth / 2.0;
    self.baseScrollView.contentSize = CGSizeMake(self.frame.size.width / 2.0 + self.baseView.frame.size.width * num, 0);
    self.baseScrollView.delegate = self;
    for (int i = 0; i < num; i ++) {
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.baseView.frame.size.width - cellWidth) / 2.0, (self.baseView.frame.size.height - cellHeight) / 2.0, cellWidth, cellHeight)];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.clipsToBounds = YES;
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"fd%d",i % 3 + 1]];
        [self.baseView addSubview:imageView];
        switch (i) {
            case 0:
            {
                //前左
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, -needLROff, 0,needBFOff / 2.0);
                imageView.layer.transform = CATransform3DRotate(imageView.layer.transform,- radian, 0, 1, 0);
            }
                break;
            case 1:
            {
                //前
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, 0, 0, needBFOff);
            }
                break;
            case 2:
            {
                //前右
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, needLROff, 0,needBFOff / 2.0);
                imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, radian, 0, 1, 0);
            }
                break;
            case 3:
            {
                //前右
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, needLROff, 0, - needBFOff / 2.0);
                imageView.layer.transform = CATransform3DRotate(imageView.layer.transform,- radian, 0, 1, 0);
            }
                break;
            case 4:
            {
                //後
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, 0, 0, - needBFOff);
            }
                break;
            case 5:
            {
                //後左
                imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, -needLROff, 0,- needBFOff / 2.0);
                imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, radian, 0, 1, 0);
            }
                break;
            default:
                break;
        }
    }
    //同時設置六個面的透視參數
    CATransform3D transformPerspective = CATransform3DIdentity;
    transformPerspective.m34 = -1.0f/800;
    self.baseView.layer.sublayerTransform = transformPerspective;
}
#pragma mark - 滾動進行圖形變換
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    float offset = CGRectGetMinX(self.originalBaseViewFrame);
    //通過偏移量計算應該繞y軸旋轉的角度
    float persent = (scrollView.contentOffset.x - offset) / (scrollView.contentSize.width - offset);
    //修改基礎視圖的frame，保持相對位置不變
    self.baseView.frame = CGRectMake(self.originalBaseViewFrame.origin.x + scrollView.contentOffset.x, self.originalBaseViewFrame.origin.y, self.originalBaseViewFrame.size.width, self.originalBaseViewFrame.size.height);
    //進行y軸旋轉
    CATransform3D transformR = CATransform3DMakeRotation(-(M_PI * 2) * persent, 0, 1, 0);
    CATransform3D transformPerspective = CATransform3DIdentity;
    transformPerspective.m34 = -1.0f/800;
    self.baseView.layer.sublayerTransform = CATransform3DConcat(transformR, transformPerspective);
}
@end