Framer In Action…Day2(Uber Eats)

Uber Eats大家都有用過，開啟時會有一點點的動畫。

就像以下畫面一樣

小小端詳的一下，應該是用到了SVG，並且讓他動起來。所以就搜尋了一下如何讓SVG曲線消失。但是重點來了...我不會用『以拉』畫圖啊…（非設計科班）

所以第一步就是用SketchApp畫了一個醜醜的刀叉～而因為他是要動的，所以最好照你想要呈現的筆順完成。

畫的時候只要把原稿拿來下來描就可以啦～醜醜的有空再來圓滑一下…>< 然後接下來把畫好的向量圖另開一個artboard輸出就可以啦～

而因為需要做向量動畫，所以需要把它的路徑取出來。

取出以下d的部份，也就是一堆數字那個。

在Framer專案裡，找到熱心鄉民提供的SVGLayer動畫module，把路徑貼上去就可以完成了～

調整一下出現的時間，加上一些前後情境動畫，成品如下囉～

專案檔案也分享在雲端，歡迎取用。^____^

Day2_UberEats_Launch