ImageSlider – 圖片轉換動畫

通過一些簡單的動畫,可以讓圖片在切換的過程變得有趣許多。


ImageSlider

在 ViewController 的正中央放置一個 UIImageView 用來顯示準備好的6張圖片。

目標:

  • 每 1.5 秒切換一次圖片(共有6張圖)
  • 每次切換圖片的時候都能夠完整的顯示圖片並且位居畫面正中央。

ImageSliderView

自定義一個繼承於 UIImageView 的 ImageSliderView 在這個 class 中實現切換圖片的動畫。


HomeViewController

在畫面中央放置 ImageSliderView 並且啟動 timer 每 1.5秒執行一次切換圖片的動畫

通過取餘數的方法讓 nextPos 處於 0~5之間,取完圖片再讓 currentPos 前進一位。

圖片切換的動畫依舊是通過 UiView.animate 方法,改變最終 imageSliderView 的 bounds 系統就會幫將過程變成動畫。

要記得重新設定一次 center 讓圖片維持在畫面正中央。


參考

發表迴響

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