演算法與iOS動畫入門

哈佛CS50演算法課堂互動;在youtube看了近百支iOS介面設計和動畫教學。


前言

接續前篇iOS學習筆記,10月主要補演算法和動畫相關知識。

會開始接觸演算法,是因為利用空閒時間看的哈佛CS50公開課,這門以沒有相關背景學生為主的課程內容所帶到,啊,應該說是被刺激到。如果像我一樣是從網路自學程式為主,關於演算法和資料結構,大部分的課程並不會特別帶到。

對於Stack、Queue、Linked List、Bubble Sort或O(n)這類名詞感到(;´༎ຶД༎ຶ`),文章有推薦書籍和CS50課堂互動段落,相信會有幫助的。

因為對iOS動畫有興趣,網路上又找不到比較新的專題課程,所以我讀了簡書搜尋結果前三頁的每一筆文章,和在youtube大量觀看影片,加起來近百支,主要是兩位頻道主的播放清單,實際動手寫約30個影片練習,其餘以截圖做筆記和拓展眼界為主。

聽起來好像很多,但考慮到錄製時間,有些專案是切成五個或是更多段落;也有些講編輯器的小技巧,知道存在就可以了,像是Xcode有圖層鎖避免其他人弄亂Storyboard畫面這樣的冷知識(?)

整趟下來要說有什麼體悟嘛。

那就是數學、數學很重要 ヾ(;゚;Д;゚;)ノ゙!

(點此跳到後半iOS動畫篇


寫程式前就該懂的演算法

終於找到能看懂的演算法入門書:《寫程式前就該懂的演算法》

作者Aditya Y. Bhargava是Etsy電商公司的軟體工程師,在前言有提到他是「視覺學習者」,覺得是同一類人。我買翻譯書前都會去Amazon查看原文書的評價,這本蠻好的。

就像我們無法理解同樣辣度的醬料,每個人吃進去所感受到的「體驗」;看書也是,同樣的內容讀進去在每個人腦海架構跟連結差異也是巨大的。

有別於部分書籍,放了可愛圖片並沒能讓難度降低(把字換地方塞不會變簡單啊啊),不然就是文字跟圖片其實活在兩個世界(假象啊)。 本書作者用了許多有趣手繪插圖和舉例讓整本書趣味性十足,把腦海中的步驟畫出來,讓硬梆梆的主題寫成像故事書一樣,連兩天接續看完。

讀電腦書籍時遇到的困難是起始門檻有點過高。

以健身房比喻好了,今天從沒接觸過的新手一踏入,卻發現場館的啞鈴最輕5kg起跳;眼前滿身肌肉的教練,從其他會員的風評聽到也是非常有一套無庸質疑的。但問題是根本連第一下都舉不起來,沒有2kg或是更輕的啞鈴幫助新手成長到能直接使用場館的器材和吃下教練的調教。

大概是這樣的感覺,讀完終於粗略理解大O符號還有幾種算法的基本應用。這本我有分享到Python Taiwan社團,轉貼及底下留言網友們也有回應好懂、適合入門閱讀。

每個人喜歡形式不同,可以的話還是親自翻翻。


演算法與生活連結

像是玩1到100的終極密碼,一個個從頭慢慢猜最壞要猜100次。

但用二分搜尋法(Binary Search)每次從中剖半,留下正確的部分再剖半,7次就能猜出來了。當放大到40億個數字的終極密碼,一個個從頭慢慢猜最壞要猜40億次;後者只要32次就能猜出來了。

假設臉書會在使用者登入時,搜尋使用者名單,有在名單才能順利登入;這樣大量搜尋的情況下,二分搜尋速度就快非常多。

一些閱讀時候覺得「噢很厲害啊但平常好像用不到」,隨著內容推進慢慢冒出「仔細想想也不是沒有」。前面提到的猜數字某種程度上也是資料搜尋。


陣列(Arrays)連結串列(Linked Lists)

關於「新增資料」。

陣列就像是一群朋友在電影院劃位,臨時冒出新加入的朋友,本來的位置可能無法坐一起,要重新劃位找能塞得下的地方。但如果用連結串列的形式,就像餐廳的服務生把新訂單加在給廚房的末尾,影響不大;廚師繼續工作從前面開始消化。

如果是「讀取資料」呢?

電影院的每個位置都有對應的號碼(索引),假設想知道特定位置的銷售狀況馬上能查清楚;而後者餐廳服務生想要找特定訂單,就需要花點時間每張都確認。


許多演算法的應用和概念都能在日常生活看到。

記得以前綜藝節目看過那種放觀眾進去賣場,時間內能抱出來都是獎品,觀眾腦海也是跑演算法(?),可能是體積、價錢、路徑;農民在替農產品分類也是依據特徵,用某個算法來分等級加權重,處處都是。

一直到旅遊景點的規劃,可能從物理上的最短路徑考慮、或是從最快的交通速度為出發點、整團人出遊要怎麼在有限的時間內盡量滿足到每個人各自的需求等等。

連結到生活就覺得也不那麼抽象了,有種頭腦體操的感覺。


哈佛CS50

上面那本書有覆蓋到CS50第三週和第四週的內容。

第三週在講演算法,點連結可以跳到對應秒數;老師透過活動讓學生看演算法是怎麼動的。

人肉冒泡排序 Human Bubble Sort:兩兩比較交換大小,每輪數字最大的會被排到最後放好。


人肉選擇排序 Human Selection Sort:影片在未排序資料找出最小的,依序擺到前面。


老師用帶有聲音的排序讓同學們感受不同排序法的體現。


第四週的互動,示範Linked Lists概念的Human List

可以搭配寫點科普,請給指教的C語言:鏈結串列(LINKED LIST)的建立與刪除,看圖有個大致的印象會比較理解。


如果是第一次看到CS50,可以參考inside科技報橘的介紹,修課心得如海洋般的程式課程:CS50有提到課綱,舊版的PHP在2017課程改教Python了。

這堂課從C語言開始教,在外徘徊兩年終於摸到C了,也見識到耳聞許久的「指標」。C語言: 超好懂的指標,初學者請進~也和首次聽到的讀者分享;趣圖來自xkcd.com

如果完全新手,學習曲線很陡,要花很多時間課後進修才跟得上。建議輕鬆看,不要強求搞懂每個細節,就像看煮菜節目先有個輪廓,細節之後可以再補,以一個細心呵護學習火苗的心態來照顧,畢竟滅了重燃不易。


延伸閱讀

Second Round:初學者寫給初學者的演算法教學。

作者在介紹寫到「內容主要是參考筆者修過的〈演算法〉與〈資料結構〉課程,應該勉強可以涵蓋(大學部開設的)八成左右的內容。程式範例以C++為例。」

內容整理的很用心,提供給等級較高的冒險者…我現在還無法。


《程序是怎樣跑起來的》《計算機是怎樣跑起來的》,上面日文版重印41次的那本,讓我對程式運作進一步了解,有點像是平常騎機車,騎歸騎但具體怎麼運作沒有很清楚。書中有講到進行小數運算出錯的原因、關於內存、操作系統到彙編語言的知識,範例使用C語言。

讀起來沒有很輕鬆,是本開竅後可以再反覆閱讀的書籍。硬漢風格!


《編碼:隱匿在計算機軟硬件背後的語言》,這本偏硬體,所以只有粗略翻過。可以參考Amazon評價豆瓣評價和網友各章節心得讀書筆記01-10讀書筆記11-17讀書筆記18-25

像是故事書,中間充滿電路圖的故事書,想要讀懂需要花一段時間。原書出版於2000年。


《圖解電腦工作原理》讀起來很輕鬆的書,全彩印刷,內容是群組聊天室各擬人化角色互相吐槽,給我的感覺是放在高中班級圖書館會排隊借閱的等級。

內文有些作者刻意雙關的句子、譯者翻的很順,喜歡的會覺得有梗。例如書中有出現在鬼屋排隊買智慧型手機,做為先進先出(FIFO)的說明。

題外話,日本蠻多這類有趣的科普書籍,把專業知識的門檻降低、排版又精美,像是有逛到Git的漫畫教學,可惜國內沒有出版社引進。


iOS動畫學習資源

有別於可以直接拖放的UI元件,動畫必須透過程式碼撰寫。

如果讀者對於如何利用程式碼添加屬性感到陌生,請先參考這篇教學,學習如何用程式碼做出園角矩形的按鈕。有寫過網頁的話,跟CSS很類似,找出屬性的名稱然後指定一個值。


開始深入學習前,呈現圖中充滿好奇與期待的心情。


因為沒有找到比較新的付費專題課程,我是先從簡書開始翻,輸入關鍵字後把前三頁的內容翻過。挑了幾篇推薦給大家。

最主要的用意是先建立大致的輪廓,跟這些第一次見面的各種新名詞混個臉熟,不用強求細節,(如果沒有被打趴)以後機會很多。特別是重複在不同文章出現的最大公約數,可以優先往那個方向查資料。


WWDC 2011

官方的Core Animation Essentials - WWDC 2011演講,相關截圖如下:


補充史丹佛CS193P截圖:


不知道讀者看到這邊有什麼感覺,記得掃完輪廓我的心情大概是這樣。


梳理基礎部分。

知道UIView和CALayer,UIView可以當成是能響應事件的CALayer,UIView動畫類似對CALayer的封裝;認識frame、bounds、anchorPoint;以及CGRect、CGPoint、CGSize的意思。

CALayer全名是Core Animation Layer,CG是Core Graphics。


Brian Advent

Brian Advent的Animation播放清單

特別推薦Airbnb開發的套件Lottie,讓設計師使用After Effects製作動畫,輸出特定檔案格式JSON給工程師套用,省下許多時間:如何使用Lottie 將完美動畫100%呈現在產品上

Lottiefiles有設計師分享的動畫作品,可以下載來試玩。


傾斜手機的視差動畫、還有教學裡最喜歡心跳動畫:


Mark Moeykens

Mark Moeykens的播放清單,除了用套件的我應該全看過。


很喜歡教學方式,在一些細節部分會補充圖像說明,比單純描述直覺不少。


比較特別的系列。

他從Dribbble找了一個專案,用直播的方式在Xcode臨摹出來,全長大概五個小時。

因為一般教學都是設定好完成目標剪岀流暢的精華,在這邊可以看到工程師實際寫code卡關的情況,也包含上stackoverflow查資料,覺得有趣。


兩個喜歡的練習:

後面這個《苦惱晚餐的上班族》,練習類似Tinder左右滑卡片、表達喜歡與不喜歡的手勢連動畫面回饋。

首先在背景放置苦惱大叔,接著挑選讓人食慾大開的食物,以微焦表面散發著炭烤香氣的烤玉米選手做代表。上方文字考慮到「啊要離開景點了還有好多小吃到底要選哪個!?」太長,放棄。

卡片部分以卡片中心減掉畫面中心的X軸距離,處理左右滑的判定,負數表示往左滑出現猶豫臉、正數表示往右滑出現開心臉;臉從透明度0過渡到邊緣剛好是透明度1,這時距離要加絕對值。

往兩側滑要另外處理卡片傾斜的角度,慢慢倒下碰觸到邊緣剛好是35度,但是程式要吃弧度不吃角度需要換算。在中間區域手放開卡片是要吸回畫面中央,在距離兩側手放開是掉出畫面外,掉出畫面外的意思是卡片透明度變0加上Y軸的常數。卡片縮小的倍率也是用距離中心遠近來判定(下略)。

就像開頭提到的,做動畫…

數學、

數學很重要ฅ(๑д๑)ฅ!


弧度與角度

到可汗學院複習數學,以後一定會再找,做個筆記。Introduction to radiansExample: Converting degrees to radians


相關書籍

iOS 11程式設計實戰,10月新書,iOS 11是九月底才正式更新,作者和出版社動作很快;定位是工具書方便隨時翻找資料。

第14章繪圖、第15章核心動畫與圖層。


iOS UI開發捷徑,2017年8月出版,跟動畫沒有直接相關。

作者是從Xcode4奮鬥至今的一線工程師,重點介紹Interface Builder。我覺得是寫給有職場經驗的開發者,內容很用心。但因為我還沒做過iOS開發工作,只有粗略翻過沒辦法補充什麼。

iOS動畫:核心技術與案例實戰,2017年2月出版的主、題、書!方便日後翻查特定效果和程式碼。我沒有找到其他中文相關動畫書。

關於這兩本簡體書的更多評價,可以到中國電商網站的購物評價逛逛。


結語

從演算法和資料結構的學習,讓我有「溯源」的感覺。

突然意識到每樣技術都是為了解決某個問題而「存在」,就像出國的行李箱,每件物品都是為了解決特定需求而被放進去,行李箱本身也有設計好的收納結構。現在接觸到的知識,都是前人累積下來的經驗和不斷試錯優化後的成果。

有種從原先單獨操作工具,稍稍體會到背後蘊含的創造力。

而動畫的學習,發現背後都是數學組合出的「效果」。

整個過程下來有點像是「農」素材,素材就是程式碼。好比玩遊戲時的採集,或是打倒敵人獲得掉落物,都先收在包包;等到將來有需求就可以很快把東西拼湊出來,合成更高等級的裝備、或是解任務時少踩幾個點節省時間。也在攻略記錄下哪些素材要去哪幾個地方找。

最後談談整理的學習資源。

包括本篇、或是先前分享,不難發現我很捨得付費買各種課程、電子書、實體書。

原因很簡單,因為能被我們買到的「知識」,在一般情況下「價值」往往遠超過它的「價格」。例如在Udemy300元一堂的iOS開發課程,有40個小時長度或是更多,原因在有2萬多名學生一起把價格攤掉。

越是能讓作者批量銷售的內容,價格對消費者越划算。

所以我很愛買書,替自己節省整理資料的時間,有系統地掌握某個概念;對於同個主題也會買不同作者的書,交叉從不同角度吸收思考(避免中毒啊不是)。

從網路上找資料的缺點是資訊比較不連貫,且要把不同作者的內容自己消化梳理,甚至有時候最容易找到的搜尋結果不一定是正確的。對比付費內容除了有業者把關,比如出版社;還有許多付費用戶的評價可以參考,同類型的良性競爭等等,都會把質量拉上去。

以及最重要的一點:

付錢才是真愛。

Pala

朝iOS Developer自學轉職中。紀錄過去兩年下班自學Python網頁設計Google Analytics分享;也推薦從架站、撰文到運營,首年12萬瀏覽的部落格心得;新文章是演算法與iOS動畫入門