新一代跨平台、高效能動畫庫 - Rive
- August 31, 2023
本文將介紹一款非常令人驚豔的動畫庫及格式，具有非常高效能及跨平台的優勢，且具有 狀態 及 可互動性 ，相關生態系已逐漸完整，常受到一些動畫庫效能困擾的人絕對可以試試！
Rive 簡介
Rive 是從 flutter 社群開始發跡，主要是透過 Rive 的編輯器產出開源格式 .riv 檔進行傳輸，在 Web 前端上使用 JS/WASM runtime 進行渲染，主要是 canvas + wasm，效能非常好且 GPU memory 的使用量遠比其他動畫庫低出許多。
值得注意的是雖然檔案格式跟 Runtime 都是開源的，不過編輯器是有收費制度的，免費的編輯器會有一些限制，可先使用免費再決定是否要進階付費，跟 Zeplin 的付費模式蠻像的。
實際應用
目前 Figma 的官網有大量使用 Rive，效果非常出色。
效能
效能在動畫庫中算是很不錯的，以前使用過 dragonbones，但後續已無人繼續維護且記憶體控管上稍微不理想，官方甚至有跟 Lottie 對比，詳情可以參考此篇文章
範例
以下範例將以 Vue 進行示範
Install
pnpm add @rive-app/canvas基礎用法
基礎用法非常簡單，為方便展示寫在同一個 component，可自行進行後續封裝。
<template> <div class="flex justify-center"> <canvas ref="canvas" width="400" height="400" class="w-full max-w-[400px]" ></canvas> </div></template>
<script setup lang="ts">import { Rive } from "@rive-app/canvas";import { onMounted, ref } from "vue";
const canvas = ref<HTMLCanvasElement | null>(null);
onMounted(() => { if (!canvas.value) { throw new Error("canvas not found"); }
const rive = new Rive({ canvas: canvas.value, src: "https://cdn.rive.app/animations/vehicles.riv", autoplay: true, onLoad: () => { rive.resizeDrawingSurfaceToCanvas(); }, });});</script>另人驚豔的狀態切換
試著按下以下按鈕並觀察變化吧！
<template> <div class="flex flex-col items-center justify-center"> <canvas ref="canvas" width="400" height="400" class="w-full max-w-[400px]" ></canvas>
<div class="flex gap-2 p-4"> <button v-for="(button, key) in buttons" :key="key" class="p-2 bg-gray-300 rounded-md" @click="button.onClick" > {{ button.text }} </button> </div> </div></template>
<script setup lang="ts">import { Rive, Layout } from "@rive-app/canvas";import { onMounted, ref } from "vue";
const canvas = ref<HTMLCanvasElement | null>(null);let truck: Rive;
const buttons = ref({ idle: { text: "開車", onClick: () => { if (!truck) { throw new Error("truck not found."); }
const isPlaying = truck.playingAnimationNames.includes("idle"); buttons.value.idle.text = isPlaying ? "開車" : "停車"; isPlaying ? truck.pause("idle") : truck.play("idle"); }, }, windshield_wipers: { text: "開雨刷", onClick: () => { if (!truck) { throw new Error("truck not found."); }
const isPlaying = truck.playingAnimationNames.includes("windshield_wipers"); buttons.value.windshield_wipers.text = isPlaying ? "開雨刷" : "關雨刷"; isPlaying ? truck.pause("windshield_wipers") : truck.play("windshield_wipers"); }, },});
onMounted(() => { if (!canvas.value) { throw new Error("canvas not found"); }
truck = new Rive({ canvas: canvas.value, src: "https://cdn.rive.app/animations/vehicles.riv", artboard: "Jeep", onLoad: () => { truck.resizeDrawingSurfaceToCanvas(); }, });});</script>
