由於常參考的影音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起來的效果如何,需要怎樣的彈跳效果,我覺得就還滿需要精確跟開發人員溝通的~
若你是在做產品,確實可以把這些磨亮一點。畢竟產品本身特性不會只用一次,會有延展性。但若你只是在做專案,就...當成磨時間吧...@@