Parallax Scrolling – 橫向捲動視差

在 Web 應用中,尤其是「一頁式」網站裡我們常常會看到捲動視差的例子。
之前用 UICollectionView 實作過豎直的捲動視差,這次換 UIScrollView 來實作水平的捲動視差。


Parallax Scrolling – 捲動視差

當使用者拖動畫面的時候,前後兩張圖片都會在各自的 View 中移動。


HomeViewController

在 Viewcontroller 中放置一個 UIScrollView 並將準備好的5張圖片平鋪在 scrollView 的 subview 中。

而 scrollView 的 contentSize 也很好計算,就是5個滿屏的大小。

另外會給放入的 ParallaxView 設置 tag 方便後面調用。

UIScrollViewDelegate

當拖動 UIScroolView 的時候,我們不改變 UIScrollView 根據拖動的比例來改變 ParallaxView 中 imageView 的 frame.

可以看到 每一個 ParallaxView 都還在自己的位置上,但其中的 imageView 已經被我們調整了。


ParallaxView

在這個 View 中設定基本樣式,讓圖片之間有個黑色的邊線。

另外會在這個 View 中建立一個 imageView 這樣當使用者拖動畫面的時候,可以直接移動這個 imageView 而不是整個 view 從而達到捲動視差的效果。


masksToBounds 解說

為什麼在 ParallaxView 中,要將 layer.masksToBounds 設定為 true?

因為控制圖片是否顯示,是通過 ParallaxView 來限制的,但如果這裡設定為 flase 就會有下面的效果,全部的照片都疊加顯示了。

而當我們將 layer.masksToBounds 設定為 true 以後,只要該圖片沒有處於 ParallaxView 的 frame 中,就不會顯示出來。

在畫面中每一個橘色的部分都是一個 ParrlaxView 而其中的 imageView 已經被我們移動到左邊去了。

所以當橘色的部分沒有覆蓋這張圖片時,因為 maskToBounds = true 所以我們就看不到內容,有遮罩概念的朋友應該很快就能理解了。


參考

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *