序
這篇是給分享給已經有一些 iOS 開發經驗的讀者看的,大概會描述一下是怎麼做的,但不會到非常細節,純粹分享。一般的讀者也可以看看,認識簡單的技術名詞湊湊熱鬧,如果路過的高手有什麼建議,我都求知若渴,請儘快指教。
今年因為朋友的萬聖節行銷活動需求,就在其中一個產品線上開了一條 Halloween 的 branch,來開發這有趣的 feature。個人覺得非常好玩,算是小小的得意之作,大概花了一小時左右。
改之前,原本產品功能是個簡單易用的集點平板,可以放在飲料店、拉麵店、火鍋店,甚至理髮店裡面,讓客人在店家消費後,初次使用只要輸入手機號碼即可集點,也有使用 QRCode 兌換和管理客戶的後台功能等等。
而這次我改的地方很簡單,就是在讓客人輸入完電話號碼後,按下 OK 的那一剎那,有 80% 的機率會跳出猙獰無比的殭屍腐爛臉,佔滿全螢幕,同時搭配極淒厲的尖叫音效(我還自己用 Garage Band 剪的),並且臉還會不停的上下震動,持續三秒,最後出現正常的集點成功音效和畫面。
素材蒐集
這個嚇人功能應該長什麼樣子,其實在做之前我腦中就有非常清楚的畫面了,因為小時候就被嚇過,當時真的是心驚膽跳,被嚇到發抖。像是一些什麼「會動的椅子」,或類似「大家來找碴」那種早期的 Flash 遊戲,所以我很明確知道自己要找怎樣的圖和音效。在此附上我使用的兩種圖, 圖一和圖二,和兩種音效,音效一和 音效二,我音效還自己剪接!
實作部分
讓我們先看一下平常集點輸入手機號碼的畫面是怎樣:
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*oaVX8TCrYRCf7WQtcscMYA.png">
看得出來已經輸入完手機號碼,總共 10 碼了,這時候按下右下角的 OK 就會觸發下面這段 code,按住 ctrl 拖拉連接 UIButton 的 IBAction 我想各位有經驗的 iOS Developers 應該都能看懂。
line 6 可以看到我隨意用了
arc4random() % 100 > 20
大概是 80% 的機率會進入處理嚇人的畫面和音效部分,而接下來又有一個
arc4random() % 100 > 50
代表是隨機兩種嚇人畫面音效其中挑一種,機率一半一半。
line 18 開始處理即將跳出的 popup,這邊我是使用 Cocoapods 上面有的 KLCPopup 套件來做,可以看到 line 30,31 我很壞地不讓人點掉,就是要讓他被迫看三秒嚇人的畫面,好好欣賞。
而 line 33 大家應該會發現這裡怎麼會有個 imageView,這其實是我後來做到一半,覺得 popup 不是全螢幕不夠滿意,我另外又在整個畫面疊了一個 full screen 的 imageView,只是一開始是 hidden 的,最後只要 tapOkButton 一觸發,它就會 hidden = NO,直接顯現,line 35 的音效隨即播放。
不知有沒有人發現 line 34 我跳過介紹,因為這是製作時的後半個小時,畫龍點睛之作,我接著就要來介紹:
主要是我覺得直接跳出來還是不夠嚇人,要有動態感或是震動,才能加深使用者的恐懼感,好像那恐怖的臉要衝出螢幕貼向他們一樣。
line 3,4 的地方我把頻率和速度調得非常得高,原本我 duration 調到 0.05,repeatcount 調到 120,想說應該夠精采了吧,但是實際上效果非常地慢。這時我才想到,應該是人的肉眼沒辦法跟上這麼快的速度,反而看起來是慢的,於是調慢一些變成 0.1 和 80,這時才有快速震動的效果,而 line 6,7 的振幅也是不能太大,我原本調 100 根本看不出來,以上都是微調後最佳的數值。
重點大概就是上面這兩段 code 了,其餘的部份對於製作這個嚇人功能不是那麼重要,而最後的效果當然要來讓大家看一看:
效果
最後活動還滿順利的,因為中午下午辦在台大小福,大白天的不會真的那麼可怕,不過因為平板接音箱以求夠大聲,還是有 30% 的人嚇到,嚇到的定義是他們口頭承認,或是身體當下有任何抖動、挫動之類的,也沒有引起不悅,總之是個 Happy Ending,大家都很開心。
結尾
最後還是幫朋友打個廣告,集點樹,是個給商圈店家的增加客戶忠誠度與營業額的綜合性服務,有集點、兌換、追蹤客人資料、數據分析等等功能,目前在台大後門 118、公館、師大以及天母都有店家開始試點。
會去附近消費的路過可以體驗看看,有什麼建議或指教都可以在下面留言!