iOS scrollview迴圈播放加縮放

標籤：

　　前些日子一直在研究3d的架構沒有時間寫部落格，不過最後需求改了，也沒研究出個啥。這段時間出了新的需求，需要迴圈播放圖片，並且滑動的時候中間的圖片有縮放的效果。剛開始想在網上搜尋，不過並沒有找到合適的demo，沒辦法只能寫個了。

　　首先說下思路，做這個效果需要解決三個問題。

　　第一個問題，如何控制每次滑動的距離。iOS中好像並沒有設定scrollview每次滑動的距離吧。設定其畫框的大小和pageenable的時候已經決定了其每次滑動的距離。但是需求要顯示三張圖片啊，中間大圖，兩邊的圖片只顯示一部分。也是想了個噁心的辦法，將畫框的大小設定成圖片的寬度?一個圖片之間的距離（這個距離可根據實際情況調整），將masktobounds設定為no，即可。不過這樣做有一個缺點，左右兩邊的圖片是不能響應滑動事件的，以後有時間再解決這個問題吧。

　　第二個問題，迴圈播放，這個估計都會，不解釋了，可以看代碼。

　　第三個問題，也是痛點，如何在滑動的時候改變圖片的大小。我們可以根據圖片在scrollview上的位置得到其centerx，然後根據其與contentoffset.x＋width／2.0（圖片的寬度一半）＋gap/2.0（圖片間距的一半）之間的差作為x,構建一次線性方程式，其實很簡單，看看代碼就懂了。最後設定transform。

　　可能說的不清楚，直接上代碼吧。

  1 //圖片的個數  2 #define ARRAYCOUNT 3  3 //縮放的比例  4 #define SCALE 0.369565  5 #import "ALNewKeeperScrollView.h"  6 #import "ALNewKeeperModelView.h"  7   8 @interface ALNewKeeperScrollView ()<UIScrollViewDelegate>  9 { 10     float rate; 11     float gap; 12     float whRate; 13     float width ; 14     float height; 15     BOOL ifFirstScroll; 16 } 17 @property (nonatomic, strong) UIScrollView *scrollView; 18 @end 19  20 @implementation ALNewKeeperScrollView 21  22 - (instancetype)initWithFrame:(CGRect)frame 23 { 24     if (self = [super initWithFrame:frame]) 25     { 26         [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(setClipsToBoundsYes) name:@"setClipsToBoundsYes" object:nil]; 27         [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(setClipsToBoundsNo) name:@"setClipsToBoundsNo" object:nil]; 28         rate = 640/SCREEN_WIDTH; 29         gap = (28*4)/rate; 30         whRate = (float)630/470; 31         height = 460/rate; 32         width = height/whRate; 33          34         self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, width+gap, self.height)]; 35 //        self.scrollView.backgroundColor = [UIColor cyanColor]; 36         self.scrollView.centerX = self.width*0.5; 37         self.scrollView.showsVerticalScrollIndicator = NO; 38         self.scrollView.showsHorizontalScrollIndicator = NO; 39         self.scrollView.scrollsToTop = NO; 40         self.scrollView.delegate = self; 41         self.scrollView.clipsToBounds = NO; 42         [self addSubview:self.scrollView]; 43          44         ifFirstScroll = YES; 45     } 46     return self; 47 } 48 - (void)setClipsToBoundsYes 49 { 50     self.scrollView.clipsToBounds = YES; 51 } 52 - (void)setClipsToBoundsNo 53 { 54     self.scrollView.clipsToBounds = NO; 55 } 56 - (void)config:(NSArray *)array andOffSet:(NSInteger)index 57 { 58     int arrayCount = ARRAYCOUNT; 59     int count = arrayCount+4; 60     for (int i=0; i<count; i++) 61     { 62         //3 4 0 1 2 3 4 0 1 63         ALNewKeeperModelView *view = [[ALNewKeeperModelView alloc] initWithFrame:CGRectMake(gap/2.0 + i*(width+gap), 122/rate, width, height)]; 64         view.centerY = self.height * 0.5; 65         if (i<2) 66         { 67             [view config:[NSString stringWithFormat:@"%i", i+3]]; 68         } 69         else if (i<count-2) 70         { 71             [view config:[NSString stringWithFormat:@"%i", i-2]]; 72         } 73         else 74         { 75             [view config:[NSString stringWithFormat:@"%i", i-(count-2)]]; 76         } 77         [self.scrollView addSubview:view]; 78     } 79     self.scrollView.pagingEnabled = YES; 80 //    self.scrollView.bounces = NO; 81     [self.scrollView setContentSize:CGSizeMake(count*(gap+width)+gap, 0)]; 82     float offsetx = (index+2)*(width+gap); 83     [self.scrollView setContentOffset:CGPointMake(offsetx, 0)]; 84 } 85  86 - (void)scrollViewDidScroll:(UIScrollView *)scrollView 87 { 88     CGFloat startX = width+gap; 89     CGFloat endX = (ARRAYCOUNT + 2)*(width+gap); 90     CGFloat offsetX = scrollView.contentOffset.x; 91     if ((NSInteger)offsetX <= (NSInteger)startX ) 92     { 93         [scrollView setContentOffset:CGPointMake(endX-startX, 0)]; 94     } 95     if ((NSInteger)offsetX >= (NSInteger)endX) 96     { 97         [scrollView setContentOffset:CGPointMake(startX+startX, 0)]; 98     } 99     //滑動的時候縮放圖片大小100     float contentOffsetX = scrollView.contentOffset.x;101     float centerX = contentOffsetX+gap/2.0+width/2.0;102     for (id view in [scrollView subviews])103     {104         if ([view isKindOfClass:[ALNewKeeperModelView class]])105         {106             ALNewKeeperModelView *modelView = (ALNewKeeperModelView *)view;107             float x = modelView.centerX-centerX;108             float scale = 1.0;109             if (x >= 0 && x <= width)110             {111                 scale += -SCALE/width*x+SCALE;112             }113             else if (x < 0 && x > - width)114             {115                 scale += SCALE/width*x+SCALE;116             }117             NSLog(@"%f", scale);118             [self setShadow:modelView andScale:scale];119             modelView.transform = CGAffineTransformMakeScale(scale, scale);120         }121     }122 }123 124 - (void)setShadow:(UIView *)view andScale:(float)scale125 {126     view.layer.shadowColor = [UIColor blackColor].CGColor;127     view.layer.shadowOffset = CGSizeMake(4, 4);128     view.layer.shadowRadius = 5;129     view.layer.shadowOpacity = (float)(scale-1.0)*2;130 }131 132 @end

　　上述是主要的類，還有幾個類就不用寫了。可以將該類中沒有的類自訂一個view進行替換。

iOS scrollview迴圈播放加縮放