關於實現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可自行自定義,也可使用定時器做成自動旋轉效果





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章