iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0
Software Development

iOS Swift x Layout x Animation x Transition系列 第 2

StackViewAnimation

StackViewAnimation
StackViewAnimation

手機豎直、橫平時的動畫效果。

效果:

  • 當收起其中一張圖片的時候,其他圖片平均的去補滿空餘的位置。
  • 當一張圖片要回來的時候,回到原本的位置,並讓在畫面上的圖片平均分配位置。
  • 手機轉向後,上述功能依然有效。
    可以先想想看如果是你會怎麼做,然後再往下繼續看。

StackView Animation

其實標題已經告訴你 UIStackView 可以實現上面的效果。
https://ithelp.ithome.com.tw/upload/images/20171221/20107329JCmQoX4SYL.png
ViewController 上下我們都放了 UIStackView 其中上面放了三張圖片用來展示效果,而下面的按鈕分別控制上面三張圖片的顯示和隱藏。

UIStackView 屬性

Axis 為 Vertical(豎直排列)或者 Horizontal(水平排列)
Distribution 為 Fill / Fill Equally / Fill Proportionally / Equal Spacing / Equal Centering
所以對於三張圖的 StackView 我們選擇的是 Axis 為 Vertical & Distribution 為 Fill Equally

Animation

接下來會讓你驚訝實現動畫的非常的容易,只要會基本的 UIView.animate 方法,就可以實現上面的效果了。

UIStackView 有一個特性,當我們改變其中 arrangedSubView 是否顯示的時候,畫面就會重新 render

所以我們只要改變其中的一張圖片的 isHidden 狀態,就會讓 UIStackView 並按照我們 Distribution 的設置去重新 render 畫面。

而我們再利用 UIView.animate 方法,去將 isHidden 改變的過程通過動畫來表現,就有了我們要的效果。

        UIView.animate(withDuration: 0.3, animations: {
            self.imageView1.isHidden = !self.imageView1.isHidden
        })

而畫面底部的三個按鈕(Toggle 1/2/3)分別控制著三個圖片的顯示、隱藏。

    @IBAction func toggle1ClickHandler(_ sender: Any) {
        UIView.animate(withDuration: 0.3, animations: {
            self.imageView1.isHidden = !self.imageView1.isHidden
        })
    }
    
    @IBAction func toggle2ClickHandler(_ sender: Any) {
        UIView.animate(withDuration: 0.3, animations: {
            self.imageView2.isHidden = !self.imageView2.isHidden
        })
    }
    
    @IBAction func toggle3ClickHandler(_ sender: Any) {
        UIView.animate(withDuration: 0.3, animations: {
            self.imageView3.isHidden = !self.imageView3.isHidden
        })
    }

參考


上一篇
BankBalance ( Label Animation ) - 模仿「得到」儲值動畫
下一篇
DrawingAnimation + CustomLoadingView
系列文
iOS Swift x Layout x Animation x Transition30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言