关于实现3D立体旋转效果的轮播视图

时间:2024-04-04 20:14:26

关于实现3D立体旋转效果的轮播视图关于实现3D立体旋转效果的轮播视图



立方体旋转这里用的是UICollectionView 去实现,重写UICollectionViewLayout的布局,再加入3D设置代码,当视图返回了三个以上的cell时,便可实现无缝连接的旋转立体视觉感,这里建议三个到六个之间,当返回的cell数越多,会越接近圆形! 下面贴代码:


-.第一步建立一个新的文件继承至UICollectionViewLayout 文件名为CircleLayout

.h文件为:

#import <UIKit/UIKit.h>


@interface 3DcleLayout :UICollectionViewLayout

@property(nonatomic,assign) CGSize itemSize;//cell的尺寸


- (instancetype)initWithItemSize:(CGSize)itemSize;//重写cell尺寸方法

@end


.m文件实现

#import "3DcleLayout.h"


@implementation CircleLayout


/**

 重写尺寸初始化方法


 @param itemSize cell尺寸

 @return返回对象

 */

- (instancetype)initWithItemSize:(CGSize)itemSize

{

    if (self = [superinit]) {

        _itemSize = itemSize;

    }

    returnself;

}



/**

 返回尺寸大小


 @return 返回尺寸大小

 */

-(CGSize)collectionViewContentSize

{

    float width =self.collectionView.frame.size.width *([self.collectionViewnumberOfItemsInSection:0 ]+2);

    float height=self.collectionView.frame.size.height;

    CGSize  size =CGSizeMake(width, height);

    return size;

}



- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

    returnYES;

}


//这里是关键,这设置3d效果

#pragma mark - UICollectionViewLayout

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

{

    //3D代码

    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];

    UICollectionView *collection =self.collectionView;

    float width = collection.frame.size.width;

    float height = collection.frame.size.height;

    float x = collection.contentOffset.x;

    CGFloat arc =M_PI * 2.0f;

    NSInteger numberOfVisibleItems = [self.collectionViewnumberOfItemsInSection:0];


    attributes.center =CGPointMake(x+width * 0.5,height * 0.5);

//  attributes.size = CGSizeMake(width * 0.5, height - 40);

    attributes.size =_itemSize;

    

    CATransform3D transform =CATransform3DIdentity;

    transform.m34 = -1.0f/700.0f;


    CGFloat radius = attributes.size.width/2/tanf(arc/2.0f/numberOfVisibleItems);

    CGFloat angle = (indexPath.row-x/width+1)/ numberOfVisibleItems * arc;

    transform = CATransform3DRotate(transform, angle,0.0f, 1.0f,0.0f);

    transform = CATransform3DTranslate(transform,0.f, 0.0f, radius);

    attributes.transform3D = transform ;


    return attributes;

}

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

{

    NSArray *arr = [superlayoutAttributesForElementsInRect:rect];

    if ([arrcount] >0) {

        return arr;

    }

    NSMutableArray* attributes = [NSMutableArrayarray];

    for (NSInteger i=0 ; i < [self.collectionViewnumberOfItemsInSection:0 ]; i++) {

        NSIndexPath* indexPath = [NSIndexPathindexPathForItem:i inSection:0];

        [attributes addObject:[selflayoutAttributesForItemAtIndexPath:indexPath]];

    }

    return attributes;

}



@end



第二步:第一步已经封装好了3D效果,接下来只要去初始化UICollectionView的时候调用它即可,方法是在一个UIviewController,或者UIView上初始化一个UICollectionView,例如:

 //控制上下左右边距

    self.collectionView = [[UICollectionViewalloc]

               initWithFrame:rect

        collectionViewLayout:[[CircleLayoutalloc]

                                 initWithItemSize:CGSizeMake(

                                                      rect.size.width *0.55,

                                                      rect.size.height -placeBank)]];


placeBank是控制3d轮播图距离上下边距的大小,rect是collectionView的frame.


到这里以后只需要在实现对应的代理方法,返回3个以上cell即可实现,cell可自行自定义,也可使用定时器做成自动旋转效果