如果需要在 Android、 iOS、Web、Desktop 等平台快速實作如上圖所示的動畫效果，你第一考慮會怎麼做？
也許你會說使用 Flutter ？不不不，如果還需要相容多技術棧呢？例如支援 Flutter 、React、Vue、C++ 等不同語言和技術平台呢？
這時候也許你會想到 Lottie ，誠然 Lottie 的動畫效果确實十分優秀，也支援 Android、 iOS、React Native、Web、 Windows 等平台，但是它的輸入來源于 After Effects 動畫特效，并且依賴于
Bodymovin
插件，這對于個人開發或者 UI 設計師來說，從 0 開始學習的門檻還是不低的。
而本篇将給你推薦另外一個更簡單又強大的動畫開發平台： rive
後來由于 flare 項目被合并是以更新為 rive ，更新後的 rive 開始把動畫效果拓展到全平台，這個全平台不隻是實體裝置的全平台，還包括了跨語言和架構的全平台，不過可惜和第一代 flare 存在斷檔不相容。
本篇之是以推薦 rive 來實作多端動畫，主要有以下幾個原因：
- 支援手機端、Web 端 和PC 端等平台支援
- 支援 React 、Flutter、Unity 等多種架構，Vue 和 Angular 也有社群支援
- 支援 JS、Dart、C++ 等多種語言
- 不用安裝工具，直接 Web Editor 就可以進行可視化開發，并附帶工程管理
無需安裝，打開即用，多平台多語言支援就是本次推薦 rive 的主要原因，那麼回到主體，接下來我們将通過 rive 來實作一個掘金動畫 logo。
首先打開 rive 的 Web Editor ，這裡需要你有賬戶登陸，注冊登陸是免費的，在登陸之後我們就可以進入到 rive 的動畫編輯界面。
因為我們是要基于掘金的 logo 實作一個動畫，是以開始之前可以先拿到掘金 logo 的 svg ，這裡隻需要直接從檔案夾把 svg 檔案拖拽到 Web Editor 裡就可以，它會自己自動上傳，上傳成功之後就可以看到下圖的界面效果。
如果你說我沒有 svg 檔案怎麼辦？不用擔心， rive 提供豐富又簡單的繪制工具，如下圖 1 所示，通過 Pen Tool 你就可以快速繪制出一些簡單的圖形，複雜的路徑也可以如圖 3 一樣描繪出來。
回到上傳完 svg 的界面，這時候主要看 3 部分：
- 紅框 1 裡的是 Artboards 畫闆(
brand-with-text.svg
- 選中 Shape 圖形，可以看到紅框 2 裡對應的圖形進入可操作的狀态
- 紅框 3 是用于切換設計和動畫界面，在設計（Design）界面下是調整 UI ，在動畫（Animate）界面是調整動畫效果。
如下圖所示，當我們選中一個 Shape 的時候，你就可以對圖形進行移動、旋轉、縮放等操作，進而來調整 UI 的變化，達到我們需要的動畫效果。
接下來我們點選切換到 Animate 下，可以看到此時地步多了一個時間軸，這個時間軸就是我們控制整個動畫過程的關鍵，這裡為了實作前面的動畫效果，首先需要把整個掘金 logo 挪動到了畫布的外面，為後面的掉落動畫做準備。
接下開始我們的動畫，開始之前我們随意調整 svg 裡圖形的位置或者角度 ，比如：
- 這裡對【稀】字進行了55° 的旋轉
- 對【掘】字進行了 -180° 的旋轉
- 對 【金】字行了50° 的旋轉
- 對 logo 上的小方塊位置調整移動
做完上面的操作之後，可以看到時間軸上多了一排點，這些點就是目前動畫 Shape 在這個時間戳上的狀态 ，如果你覺得用滑鼠控制不夠精确，你也可以在右邊的視窗上對參數進行精确調整。
另外如上圖 2 所示，在時間軸上可以通過調整 Duration 來設定動畫的總時長，還可以調整動畫循環播放等等。
接下來就是體力活了， 比如我們需要掘金 logo 從頂部掉下來，那麼我們可以在時間軸上拖動藍色的進度到合适位置，然後挪動圖形，然後就可以看到時間戳上多了新的狀态點，接着點選播放就可以看到動畫效果。
如果你需要兩個 Shape 之間掉落存在時間差，那麼如下圖所示，你可以直接調整時間軸上對應的點位，就可以輕松實作動畫裡 Shape 的移動時間差。
這裡有一個需要注意的是，當你選中時間戳上的某個節點時，在右側是可以調整動畫的插值狀态的，預設情況下是線性 Linear ，但是我們可以根據需要設定想要的 Cubic 計算方式。
不同 Interpolation 效果如下圖所示，其中 Cubic 狀态下是可以自定義調整動畫的插值計算方式，是以一般情況下都會選擇 Cubic 來調整動畫的插值計算。
| Linear | Cubic | Hold |
| | | |
通過調整動畫的內插補點效果，就可以讓生硬的動畫過度變得更加自然，例如下圖就通過調整 Cubic Points 之後，可以實作快進慢出的效果。
而在經曆一系列【體力勞動】之後，你就可以看到類似下圖的效果，通過對各種 Shape 進行移動，旋轉，縮放，然後通過 Cubic Points 調整動畫的絲滑程度，最後排布好時間戳，就可以完成最初的動畫效果。
這不比你用代碼和意念寫來的香？
當然，這裡還有一個需要注意的是，如果你存在多個畫闆和動畫，那麼畫闆名字和動畫名字的命名就很重要，因為如可能會需要在代碼裡需要用它來指定動畫效果，當然，這也代表了你可以在一個 rive 檔案你設定多組畫闆和多組動畫效果。
然後你就可以導出 rive 檔案到工程裡去使用，同時 rive 檔案是支援本地加載和遠端加載的，官方貼心地提供了分享連結，你可以把動畫通過 Embed link 或者 iframe 添加到 Web 裡，甚至還貼心地提供了 React 代碼複制。
例如在 Flutter 裡，你可以通過
RiveAnimation.network
或者
RiveAnimation.asset
來加載動畫檔案，當然你也可以自定義
RiveAnimationController
來做一些自定義控制，比如通過
animationName
來指定對應的動畫效果。
class SimpleAnimation extends StatelessWidget {
const SimpleAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
),
),
);
}
} 當然，前面介紹的隻是簡單的動畫效果，rive 其實可以實作很強的各種動畫互動，比如：
- 通過 Bone 來設定骨骼互動
- 通過 Draw Order 動态設定層級交替
甚至在 rive 裡還有 State Machine 模式，進而支援根據不同條件和邏輯狀态觸發不同的動畫效果，節省可開發者需要在代碼裡進行邏輯判斷的部分，并且這部分邏輯是可以跨平台跨語言支援。
更多 rive 的豐富功能可查閱 help.rive.app
那麼到這裡，相信大家最關心的問題就是：rive 能不白嫖 ？答案是可以的！ rive 預設對于 free 使用者來說支援 3 個檔案免費，這對于個人而言其實夠用，因為前面說的，rive 支援一個檔案下建立多個畫闆和多個動畫，是以正常情況下個人使用 3 個免費的限制其實問題不大。
同時 rive 社群也有很多免費開放的動畫資源，對于懶癌患者來說也是不錯的選擇之一，當然你也可以把文章轉發給設計師，安利他們使用 rive，将開發成本“嫁接”給他們，你隻負責歲月靜安地用幾行代碼完成動畫接入就可以了。