由於常參考的影音App就是CatchPlay，他們的UI也確實是很不錯，經營也很用心，若祇是因為錢燒光就輸給其他家OTT業者，那就真的很冤啊～
他們的編看編談專欄其實還不錯，不見得會看每行字，但漂亮的劇照，有時候確實可以作為沒啥想法看電影的參考。
而限於篇幅關係(可以留點梗到後面)，所以本篇只做以下幾個功能範例：
- 使用crossorigin以呼叫Catch Play API
- XMLHttpRequest的使用
- API回傳後Json資料的解析
- 建構不規則遮罩
- ScrollComponent之scrollVertical、scrollHorizontal、directionLock、scrollToPoint、scroll事件之使用
使用crossorigin以呼叫Catch Play 編看編談API
Catch Play的頁面也是用API在存取資料，把撈回來的資料在前端呈現。這樣的好處當然是減輕後台Web Server產生頁面的負擔。幾乎是現在Web設計或是App設計的方式。
先說一下，用來測試，寫寫prototype練習一下，我覺得還無傷大雅，但若真的要大量使用，就真的不要，不然改天這些API就改版了～
而API若限制網域存取，就需要crossorigin來代為呼叫，但會慢一些些啦，不然人家的API也不是可以隨便呼叫的。方法很簡單，就前面加上『https://crossorigin.me/』就可以了。
而API通常也不會讓人家隨便呼叫，CatchPlay使用了兩段式API。第一段API需要取回授權。而第一段API帶過去的參數就隨便。反正第一段API呼叫之後，主機就會記錄：『喔，有個授權碼可以用到今天(舉例)』
而第二段API就是取得真正的影音資料，把剛剛拿到的授權碼，傳過去。這裡API之間的等待就用使用State來觀察變化，當有變化的時候就繼續下一步（Coffeescript 的event handler有空再來研究一下）。
取回來的東西用一個物件矩陣來接，之後就用該物件矩陣來呈現。
XMLHttpRequest的使用
剛剛其實也看到了有使用XMLHttpRequest，大致上比較要注意的就是像有些參數是放在Http封包的Header裡面的，你就要用以下的方式塞。
r.setRequestHeader(‘Authorization’, TheKey);
r.setRequestHeader(‘Accept-Language’, “zh-TW”);
API回傳後Json資料的解析
剛剛其實你也看到了怎麼解析Json物件，沒錯，就是這麼簡單。
result=JSON.parse(stringAuthResponse)
解析完後result就是一個動態物件，你可以先嘗試去一些json
online parser看一下長怎樣，然後再依照所需要的層級去存取屬性。例如：
以下就是把data裡面的物件拿出來，然後取他的title啦等屬性。
for item in result[“data”]
catchplay =new CatchPlayInfo
catchplay.Title=item[“title”]
建構一個不規則遮罩
先在Sketch裡面畫一個黑色區塊，也就是你要拿來填滿照片或是顏色的形狀（白色是透明）。
丟入Framer後，建立以下遮罩，要記得設定上層的遮罩clip＝true，下層要記得設定老爸。
ScrollComponent之scrollVertical、scrollHorizontal、directionLock、scrollToPoint、scroll事件之使用
有時候若建立上下捲動、且包含左右捲動的scroll視窗的時候，會發現互相干擾，就可以使用directionLock來避免。
scrollToPoint可以用來自動捲動到想要的地方。其他scroll事件就看範例囉，其實這裡用到不多，頂多就是捲動到最左邊，要自動卷回x=60的位置。
完成品如下：
最後還是奉上程式碼囉～大家學習愉快啦～
話說最後，Prototype不外乎就是讓你跟用戶、跟開發人員溝通設計概念的方式。以上那些API呼叫其實都不重要，都可以用假的，但是若真的要用到，就可以參考。
而不規則形狀遮罩的溝通，以及彼此之間的相對位置，字數多少要『…』(Framer是使用textOverflow，超過空間就變成...)、遮黑會不會跟著移動...
Scroll起來的效果如何，需要怎樣的彈跳效果，我覺得就還滿需要精確跟開發人員溝通的～
若你是在做產品，確實可以把這些磨亮一點。畢竟產品本身特性不會只用一次，會有延展性。但若你只是在做專案，就...當成磨時間吧...@@
