[文章中採坑範例Figma檔](https://www.figma.com/file/1YEHWl0vWtirgF0eO7HoRY/LottieFiles-for-Figma-(Copy)?type=design&node-id=213%3A197&mode=design&t=i0a2tFuGxeB9uE1q-1)

[Lottie 官方技術限制表](https://lottiefiles.notion.site/Supported-features-fd9655b3289443518b352f45e0913e83)

第一次在 Figma 做動畫踩了一些坑：

### 坑1 雙重填色物件
塡色的色塊中又有填色的物件，會渲染不出來(* 解法：把填色的部分做成另外一個貝茲曲線圖層)

| 誤作 | 解法 | 成功渲染 |
| -------- | -------- | -------- |
| ||
|

### 坑2 連續旋轉
連續旋轉效果，轉360度等於沒變會靜止不動，分幾個frame都一樣，因此要：

* 【1】 轉 0 度 + 1ms 的 after delay + 1ms 的 Liner 轉場效果
* 【2】 轉 180 度 +1ms 的 after delay + 看我想做幾秒 的 Liner 轉場效果
* 【3】 轉 -1 度 + 1ms 的 after delay + 1ms 的 Liner 轉場效果連回去到【1】

> **【N】代表第幾禎

雖然這個做法在 Figma prototype 上有 1ms 的小卡頓，不過 lottie 跑出的的 GIF 是沒問題的

### 坑3 轉場變速失效
Lottie 轉GIF時轉場變速效果一律會變成Liner，唯 dotLottie (.lottie) or Lottie (.json) file 會保留

### 坑4 轉場時間保留
雖然轉場效果GIF不保留，但轉場時間會保留，可以設定 100ms 和 3000ms 的轉長時間比較看看

### 坑5 遮罩陷阱
如果使用遮罩做變形，在未變形狀態的frame中也需要應用遮罩

### 坑6 平面化陷阱
如果設定圓角效果後沒有再平面化(Flatten)，雖然 figma 動畫跑起來會正常，但是到 lottie 就會失去圓角設定

### 坑7 圖源陷阱
如果圖樣的 copy 來源不同，再對圖樣做縮放、其他異動後，動畫會壞掉，因此盡量copy前一禎的frame來對圖樣進行編輯

### 坑8 修改錨點陷阱
如果用修改錨點的方式做動畫，有高機率出現預期外的結果，盡可能利用遮罩.移動.轉動.出現.消失來進行編輯

---

**以上這些內容可能會再更新，如果有新發現或更好的解法，歡迎留言討論交流**