iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
1

https://ithelp.ithome.com.tw/upload/images/20181109/201077011rkz9PF24L.jpg

使用動畫效果讓你的背景充滿氣泡效果吧!

前言:

image

前一篇教學我們學會了如何讓我們的汽水君搖晃,那除了搖晃效果以外,我們也需要製作氣泡的動畫效果讓畫面更像汽水被搖晃的樣子,所以這次教學我們會在我們的 App 中製作動畫效果來實現它。


#製作氣泡效果:

首先,我們可能同時需要很多張氣泡圖片呈現在畫面上,所以我們可能來編寫一個方法來產生一張氣泡的圖片,並且我們需要在其中產生隨機位置以及隨機大小的氣泡圖片:

func makeBubble() -> UIImageView {
    let imageView = UIImageView()
    imageView.image = UIImage(named: "bubble")
    // 隨機產生 x 座標
    let randomXPosition = CGFloat(arc4random_uniform(UInt32(view.bounds.width)))
    // 隨機產生圖片 Size
    let randomSize = CGFloat(arc4random_uniform(3) + 1) * 10
    imageView.frame = CGRect(x: randomXPosition, y: view.frame.maxY, width: randomSize, height: randomSize)
    imageView.alpha = 0.7
    imageView.tintColor = .white
    return imageView
}

接著我們還需要有一個方法讓它持續產生氣泡圖,所以這邊我們會使用一個 Timer 讓他持續產生氣泡,並且執行氣泡效果的動畫:

func bubbleEffectAnimation(timeInterval: TimeInterval) {
    // 設定定時器
    Timer.scheduledTimer(withTimeInterval: timeInterval, repeats: true) { (timer) in
        // 產生氣泡圖片加到畫面中
        let bubbleImageView = self.makeBubble()
        self.view.addSubview(bubbleImageView)
        // 隨機動畫持續時間
        let randomDuration = Double(arc4random_uniform(5) + 1) * 0.4
        // 動畫設定
        UIView.animate(withDuration: randomDuration, delay: 0, options: [.curveEaseInOut], animations: {
            bubbleImageView.center.y -= self.view.bounds.height + bubbleImageView.bounds.height
            bubbleImageView.alpha = 1
        }, completion: { (_) in
            // 動畫結束後將氣泡圖片移除
            bubbleImageView.removeFromSuperview()
        })
    }
}

接著讓我們來運行看看吧,我們在 viewDidLoad 加入我們定時器的方法,並且運行看看吧!

image

在 App 中加入氣泡動畫效果然後之後我們就可以根據我們搖晃的程度,來給他相對的氣泡效果。氣泡越多時,那就表示汽水快爆炸了 ?;反之,若氣泡越少則越不接近爆炸,所以我們最後的畫面可能像是這樣。

image

R~ 汽水君快爆炸啦


後記:

那麼這次的製作氣泡動畫效果的教學就到這邊結束了,其實製作一些簡易的動畫效果並不難,加上我們使用一些隨機數的方式讓氣泡產生的位置或是大小不同,讓整個動畫看起來更精緻了。之後的教學我們會根據其搖晃程度來給他對應的氣泡程度了。


上一篇
Day 24: Soda Shake - 晃動吧!汽水君!
下一篇
Day 26: Soda Shake - 透過用手機甩動汽水君!
系列文
一天一蘋果,Bug 遠離我。30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-09 16:21:59

/images/emoticon/emoticon07.gif/images/emoticon/emoticon73.gif

/images/emoticon/emoticon34.gif/images/emoticon/emoticon73.gif

我要留言

立即登入留言