Framer In Action…Day1 (Zova)

雖然工作上偶爾也會用到Framer來做prototype,但總覺得有時礙於時間壓力,沒有好好整理一下。

但這系列也不是筆記,而是直接從人家的產品揣摩致敬一下,順便當當練功。

而第一個練習對象就是Zova這家瘦身公司的動態icon。

而小研究了一下他的css,原理沒有太難,用Framer做了一下,成品如下:

也把程式碼給大家參考囉。

這次實作用到一些功能,讓初體驗Framer的人可以參考。

  1. 用來旋轉物件的rotationZ
  2. 用來放大縮小某軸的scaleX、scaleY、scaleZ
  3. 用來定時觸發的Utils.interval

雲端專案在這:https://framer.cloud/TCnya/

Show your support

Clapping shows how much you appreciated Sherlock’s story.