視差滾動是指讓多層背景以不一樣的速度移動,造成立體的運動效果,在Web上應用的比較多,App中卻是見的相對比較少,主要在UITableView中的應用的比較多,尤爲是當整個UITableViewCell的背景是圖片的時候,描述內容較少,滑動視差能夠加強視覺效果,能夠考慮使用,先來簡單的看一下效果:
spa
實現起來也比較簡單,UITableView定義:orm
#pragma mark - UITablViewDataSource -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1; } -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [self.dataSource count]; } -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ MainTableViewCell *mainCell=[tableView dequeueReusableCellWithIdentifier:CELLIDENTIFIER forIndexPath:indexPath]; NSString *desc=[NSString stringWithFormat:@"FlyElephant-%ld",indexPath.row]; [mainCell setBackImage:self.dataSource[indexPath.row] description:desc]; return mainCell; } #pragma mark - UITableViewDelegate -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 150; }
滑動的時候修改單元格偏移量:blog
#pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGPoint offset=self.tableView.contentOffset; for (MainTableViewCell *cell in self.tableView.visibleCells) { //方式1 // [cell setImagOffset:offset tableView:self.tableView]; //方式2 [cell setAdjustOffset:(cell.frame.origin.y-offset.y)]; } }
MainTableViewCell定義:圖片
@interface MainTableViewCell : UITableViewCell -(void)setBackImage:(NSString *)imageName description:(NSString *)desc; //視差滑動方式1 -(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView; //視差滑動方式2 -(void)setAdjustOffset:(CGFloat)offset; @end
滑動視差調用方式:ip
-(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView{ //偏移量 CGFloat cellOffset = self.frame.origin.y - contentOffset.y; // 偏移量+單元格高度/tableview高度+單元格高度 CGFloat percent = (cellOffset+self.frame.size.height)/(tablView.frame.size.height+self.frame.size.height); //偏移比例(0-1) CGFloat extraHeight = self.frame.size.height*OFFSET_RATE; CGRect frame=self.backImageView.frame; frame.origin.y=extraHeight*percent; self.backImageView.frame=frame; } -(void)setAdjustOffset:(CGFloat)offset{ CGRect frame = self.backImageView.frame; frame.origin.y = (offset / 15.0); self.backImageView.frame = frame; }
實現起來比較簡單,網上有各類各樣的版本,這兩種的方式算是最簡單的實現~string