Swift 實現視差捲動效果(Parallax Scrolling)

在Web領域我們已經經常能夠看到捲動視差(Parallax Scrolling)的效果了,尤其是在一些著陸頁(Landing Page),經常會用這種效果。

圖片類的應用除了瀑布流的排版(Masonry Layout)以外,這個也是個不錯的排版效果,接下來讓我們來實現一下。


捲動視差效果

動手做捲動視差動畫

視差效果原理

想像一下,現在我們的「眼睛」透過一面「窗戶」來看「風景」,當至少其中一個進行上下移動的時候,可以看到風景的部分就會產生變化。

而為了在手機畫面上能實現這樣的效果,我們需要準備一張比Cell還大的一張圖片

屏幕相當於我們的眼睛,而屏幕是不能移動的,所以我們可以通過移動Cell或者ImageView來產生視差效果。
而ImageView大於Cell的這個30px(140px – 110 px),其實就是視差範圍,畢竟我們希望不出現圖片以外的內容。

實現步驟

假設我們使用的是UICollectionView,希望在滑動的時候讓cell中的圖片呈現視差捲動的效果。

我們以View的中心為標準,

  • 當Cell在CollectionView的中間時,ImageView的中心也在Cell的中心。
  • 當Cell在CollectionView的頂部時,ImageView也在頂部。
  • 當Cell在CollectionView的底下時,ImageView也在底下。

UIScrollViewDelegate

要達到這樣的效果,首先我們需要實現UIScrollViewDelegate的方法,當畫面滑動的時候通知所有在畫面上的cell。

Cell

在Cell中提供一個方法,可以計算出cell位於View(CollectionView的superView)的座標系統中的距離中心點的位移情況。

根據這個位移的情況來計算視差的的移動比例,進而改變現在imageView的frame。

而為了讓畫面第一次呈現時就讓imageView擁有正確的frame,我們在畫面第一次顯示的時候就觸發cell計算一次frame。


推薦與參考

 

發表迴響

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