iOS列表滾動(dòng)視差效果

效果:UITableView滾動(dòng)的時(shí)候會(huì)有動(dòng)畫加視差效果

一個(gè)未處理的列表.png

當(dāng)cell出現(xiàn)的時(shí)候

-(void)tableView:(UITableView *)tableView willDisplayCell:(EveryDayTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

1.cell出現(xiàn)時(shí)圖片由透明變不透明,由小變大,由下往上

cell的Transform3D動(dòng)畫.png
        CATransform3D rotation;//3D旋轉(zhuǎn)
        //y,z周偏移
        rotation = CATransform3DMakeTranslation(0 ,50 ,20);
//        rotation = CATransform3DMakeRotation( M_PI_4 , 0.0, 0.7, 0.4);
        //x,y縮小0.9,寬高縮小0.9
        rotation = CATransform3DScale(rotation, 0.9, 0.9, 1);
        rotation.m34 = 1.0/ -600;//參數(shù)
        
        //設(shè)置陰影顏色和偏移量,右下偏移
        cell.layer.shadowColor = [[UIColor blackColor]CGColor];
        cell.layer.shadowOffset = CGSizeMake(10, 10);
        //設(shè)置透明度為0
        cell.alpha = 0;
        cell.layer.transform = rotation;
        
        //開始動(dòng)畫,可也使用block
        [UIView beginAnimations:@"rotation" context:NULL];
        //旋轉(zhuǎn)時(shí)間
        [UIView setAnimationDuration:0.6];
        //恢復(fù)到原始狀態(tài)
        cell.layer.transform = CATransform3DIdentity;
        cell.alpha = 1;
        cell.layer.shadowOffset = CGSizeMake(0, 0);
        [UIView commitAnimations];

2.改變圖片的transform屬性,讓圖片不在cell中顯示完

cell層次.png
cell上的圖片偏移.png
- (CGFloat)cellOffset {

    //得到cell在屏幕中的坐標(biāo)
    CGRect centerToWindow = [self convertRect:self.bounds toView:self.window];
    //得到cell中心y的坐標(biāo)
    CGFloat centerY = CGRectGetMidY(centerToWindow);
    //得到父視圖的中心點(diǎn)
    CGPoint windowCenter = self.superview.center;
    //得到距離差
    CGFloat cellOffsetY = centerY - windowCenter.y;
    NSLog(@"------%f",cellOffsetY);
    //距離差/兩個(gè)父視圖高度
    CGFloat offsetDig =  cellOffsetY / self.superview.frame.size.height *2;
    //250是cell高度,kHeight/1.7是圖片高度
    CGFloat offset =  -offsetDig * (kHeight/1.7 - 250)/2;
    NSLog(@"%f",offset);
    //這項(xiàng)就可以實(shí)現(xiàn)讓他初始向上偏移,有偏移多的有偏移少的
    CGAffineTransform transY = CGAffineTransformMakeTranslation(0,offset);
    //改變圖片的transfrom
    self.picture.transform = transY;
    return offset;
}

當(dāng)列表正在滾動(dòng)的時(shí)候

iOS6.gif
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
        //獲取可以見到的 cell,讓圖片在cell坐標(biāo)改變的時(shí)候偏移
     NSArray<EveryDayTableViewCell *> *array = [self.tableView visibleCells];
        [array enumerateObjectsUsingBlock:^(EveryDayTableViewCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [obj cellOffset];
            
        }];

    }

下載鏈接

http://code.cocoachina.com/view/129333

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,223評(píng)論 4 61
  • 女兒是母親的小棉襖,一輩子。這樣的棉襖不分季節(jié),冬天穿著暖心,夏天穿著舒爽。 昨天女兒的作文題目是“媽媽,我想對(duì)你...
    花隨鶯愿閱讀 870評(píng)論 4 10
  • 竭盡全力之后的筋疲力盡,這種感覺之前在跑步中體驗(yàn)過一次,超贊!可不可以把這種體驗(yàn)移植到“關(guān)系”和“事業(yè)”中呢? 自...
    xll2068閱讀 760評(píng)論 0 3
  • 我只是敢和別人不一樣的 就算不能證明我可以,也要證明我不可以 曾經(jīng)的曾經(jīng),后來的后來。
    鴨蛋閱讀 310評(píng)論 0 1
  • 1 前些日子接到一個(gè)朋友的求助:假期兒子和表哥在家玩,表哥告狀說朋友的兒子偷吃了一塊餅干(朋友平時(shí)不給兒子吃餅干)...
    象媽閱讀 388評(píng)論 0 0