iT 邦幫忙鐵人賽 Day 25: Soda Shake — 讓畫面充滿氣泡吧!

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

Jeremy Xue
2 min readNov 9, 2018

前言:

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

#製作氣泡效果:

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

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

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

在 App 中加入氣泡動畫效果

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

R~ 汽水君快爆炸啦

後記:

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

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

No responses yet