何為視覺差,當初找效果的時候,也不知道如何搜索,后來知道了視差Parallax這個詞,我這里寫的效果是,在頁面滾動的時候,每個cell中的圖片也會產生位置上的變化,給人一種視覺差得感覺.廢話不多說,先上一個效果圖.
我們來簡單闡述下,所謂視距差如此高逼格的效果的本質和構成,也就是說如何會出現這樣的效果.
1.普通的滾動列表大家一定都會寫.這時候圖片的大小和我們cell的大小完全一致.不會發生滾動.
2.想要出現滾動,首先圖片的上下都要超出你的cell,也就是說比你的cell要高.但是如果高了,不就會圖片重疊么?
3.設置cell的self.clipsToBounds = YES;使得超出cell的視圖都無法顯示,被截取掉.這樣看起來圖片就和cell一樣大,然而卻并未展示完全.
4.根據scrollview中每個cell的中心點偏移量改變變化,來改變圖片的中心點的位置,向上或者向下.如果想要簡單的效果,那么不需要復雜的計算,只要保證圖片移動上下不超過我們設定的偏移量途中為63px就可以.
5.提供一種思路,圖片中心點的移動范圍為: 0 ~ 屏幕高度(如果你Navi不透明,你可以考慮減去64或者帶tabBar減去49,個人覺得這個不需要過于精準),
圖片中心點移動,-kCenterOffset ~ kCenterOffset.
效果:
1)如果圖片中心點剛剛進入屏幕,也就是說最底下的圖片出現一半了的時候,可以看到圖片的上面全部圖片.
2)圖片中心點移動到屏幕中心的時候,圖片剛好展示中間部分.
3)圖片中心點移動到屏幕最上面,也就是說最上面圖片一半從屏幕消失的時候,你可以看到他的下面全部圖片.
可以得出公式:
CGFloat centerOffSetY = (2 * kCenterOffset / ScreenHeight) * cellOffSetY - kCenterOffset;
ScreenHeight:屏幕高度 cellOffSetY:圖片中心點的相對于window的位置.
6.最后就是什么時候觸發,怎么找到哪些cell需要觸發.
在UIViewControlelr中,實現scrollview的delegate的scrollViewDidScroll方法,一旦scrollview滑動就會觸發這個方法,在這個方法中實時的傳遞偏移量給對應的cell,讓它改變imageView的中心點位置.
通過collectionView的[self.collectionView visibleCells]方法,可以獲取到當前屏幕上顯示的cell的數組,遍歷數組,進行傳遞偏移量.
for (FJSParallaxCollectionViewCell * cell in [self.collectionView visibleCells]) {
cell.cellOffSetY = [cell convertPoint:CGPointMake(cell.bounds.size.width * 0.5, cell.bounds.size.height * 0.5) toView:self.view].y;
}
到這里位置,視覺差的主要思想都已經知道了,對于如何去偏移,大家可以根據大家的思想進行發揮.
附上github地址,看到的小伙伴,請不要吝嗇你們的星星,這將鼓勵我繼續努力的寫文章,在這里先謝過啦.
https://github.com/BestJoker/FJSParallaxCollectionView.git
github中還有很多Demo,有興趣的小伙伴也可以去查看咯.
