說到前陣子最風糜的互動電子書莫過於 William Joyce (曾任職於Pixar、Dreamworks 和 Disney) 所出產的 The Fantastic Flying Books of Mr. Morris Lessmore，它的魅力在於豐富的視覺效果與互動內容，即使是未滿週歲的孩童也深深的被它所吸引住，沒有 iPad 的讀者可以從影片的互動過程感受到他的威力。

我要如何開發這麼迷人的 App? 需要用到哪些技術? 台灣做得到嗎? 請告訴我該如何做!!!

若不是在這個行業耕耘多時，還真不知道這背後藏了多少 magic，這篇文章從3個月前起稿，一直被中斷到現在才寫完出稿 (佛心的開了3個月的講座、出國 co-work orz)，也算是給 App 開發者一個交待，將來國內有興趣開發類似 App 做為電影行銷的話，不失為一個好方法 (如 BBS 鄉民的正義半動畫片)。

就程式開發面來講，這個 App 所使用的技術有很大一部分只有以下兩項

• UIImageView 的 Animation
• Video/Audio Player

在開始剖析技術內容之前，筆者用5分鐘的時間寫了一小段 code (是的，不超過十行，你也可以試試)，這個動畫是第4個場景，使用者輕敲房屋的門之後，Morris 從屋內墜落的動畫

• 影片
• 程式碼 Screenshot

解壓縮 ipa 檔會發現有 243 個 MP3，26 個 m4a，12 個 mp4，27 個 m4v 與多達 1279 個圖檔，整個 ipa 大小為 336 MB，整本書有27個場景，在這裡我們就幾個比較特殊的場景做講解。

場景一：巨風吹過書堆 – 從一開始的動畫互動就讓人印象深刻，可曾想像手指滑過會帶來一陣巨風

• 靜態時為圖片 + UISwipeGestureRecognizer 判斷使用者的手勢是否由左往右
• 接受到 swipe 手勢做 video 播放
• 波浪的白色箭頭為一張靜態圖片做 alpha 0->1->0 的 animation

場景二：巨風下連建築物也被連根拔除，除了 shake animation 之外，沒做太多的額外 work。

• 兩棟建築物為獨立兩張圖片，做 shake transform
• tap 到建築物後做 UIView animation (reset UIView.center)

場景三：旋轉的屋子 – 採用的技術除了筆者的 sample code 之外，就是 UIRotationGestureRecognizer 來判斷旋轉手勢

• 滾動的房屋與 Morris 是採用筆者的 sample code 所達成的效果
• UIRotationGestureRecognizer 用來判斷旋轉的角度
• 房屋墜落的效果則是將 UIView.frame.size 做 UIView animation

場景五：可繪字的翻開書本 – 寫下的字會隨風飄走

• 畫面中央放一塊可寫字的 View，實作 drawRect:
• 一段時間沒有寫字，將 UIView.center 做 UIView animation

場景六：手繪的天空形成一片藍 – 所及之處僅有天空會變藍色

• 巧妙的利用3張圖層做 mask，天空灰圖片 + 天空藍圖片 + 天空的 touch event (見下圖
• 手指所及之處用 CoreGraphic 在 drawRect 做 Blur + Path 處理 mask 的範圍

場景十：空中飛翔的書本 – 透過讀者的手指頭，將所有書本帶進建築物內

• 空中飛翔的5本書可以想像成在畫面上的五個 UIActivityIndicator，只是他的圖長不一樣罷了
• 將書本拉進屋子的效果為 UIPanGestureRecognizer
• 一些小細節再搭配 transform 與 UIView animation 達成

場景十二：讓 Book 教你彈鋼琴 – 一直環繞在整個 App 中的音樂旋律，由小書人來教你怎麼彈

• 寫好腳本，排好鋼琴鍵的順序，讀者每 touch 到一個正確的音鍵後，變換圖片 high light 的位置即可
• 鋼琴鍵用 UIButton 刻成不同音鍵
• 紅色的音符與鋼琴鍵則是根據腳本將各式形狀的紅色 mask 貼在不同位置上

場景十三：小孩最喜歡玩的 ABC 麥片早餐 – A到Z的餅乾可以讓你自由的排列組合，還可以拍照留念

• 26個字母圖片 + UITapGestureRecognizer 點選一塊餅乾 (同時產生新的餅乾)
• UIPanGestureRecognizer 移動餅乾到適當位置
• 透過 renderInContext: 完成的圖片並用 UIImageWriteToSavedPhotosAlbum 將之存進內建的相簿中

場景十五：修復破碎的書本 – 將破碎的書頁一塊一塊拼回來原本的樣子

• 利用 UIPanGestureRecognizer 並對 UIView 做個簡單的 bound check 就可以完成拼圖的效果

場景十六：騰空的 Morris 在空中飛來飛去 – 利用 iPad 的 Sensor 來操控 Morris 要往上飛還是往下飛還是往左往右飛

• 背景是一個 loop 的影片
• 前景是一個 Morris 被風吹的動畫
• 用 Core Motion 取回 CMDeviceMotion 的 roll pitch yaw 三個軸向的值，來決定 Morris 要飛行的方向

場景十九：日夜交替的動畫 – 當讀者點選窗外的世界，馬上呈現日月一昇一落的動畫

• 這裡分為前中後景，前景為 Morris 所在的屋內，明亮的白天與昏暗的夜晚兩張圖片做 alpha blending
• 中景為太陽和月亮，做 Move animation
• 後景為草原，同樣是明亮的草原和昏暗的草原做 alpha blending

講到這裡，相信具有一定開發經驗的 iOS programmer 已經知道這款 App 整個細節的來龍去脈很清楚了，實作面大概也不出那幾種技巧，detail 的 coding 也曾經在 Techmemo 舉辦的活動中講解過

• 如果你是 iOS programmer，歡迎提出實作上的問題彼此交流交流
• 如果你是客戶，請忘掉前文所敘，有一定經驗的開發者的確可以達到此 App 的絕大部分效果，若是程式要穩定/流暢/效能/架構清楚，還是精選一下開發商，免得做出一個四不像的產品

除了技術，你還要能活用它，而不是被技術所支配

註1：解壓縮 .ipa 方式請直接修改副檔名為 .zip 執行解壓縮。
註2：因為 png 圖檔皆被 Xcode optimized 過, 擷取原始圖檔方式請參考 Viewing iPhone-Optimized PNGs 將其 revert 回 original file。
註3：所有圖片版權為 Moonbot Studio 所有，此 blog 文章僅做教學用途。

熱門指數: 84% [?]