本期介紹今年在國外社群上頗有熱度的新創 Rive。Rive 是 Duolingo 角色動畫，與 Figma 首頁動畫的背後技術，主要產品為「協作編輯器」與「跨平台播放器」。
此外也會討論「為什麼動畫那麼難做？」，快速介紹動畫製作時會遇到的困難，以及 Rive 打算如何解決。
在正文開始前，想先介紹 Clarymind，一款幫助你減少無意識滑社群的 app。基本用法是：想打開 app，得先呼吸十秒鐘，或寫下自己想要開啟 app 的原因，提升自覺。
我自己使用下來，Clarymind 確實幫助我減少許多滑手機的時間，多出了許多零碎時間。從 iPhone 的螢幕時間報告中，每天可以減少 1~2 個小時（有時直接歸零）。
Clarymind 同時也是我近幾個月開發的 app，感興趣的話可以在 App Store 下載。以下進入正題！
→ 閱讀部落格網頁版
使用 Duolingo 時，裡面動畫的精緻程度總是令我驚豔。過場動畫、連勝、打開寶箱，處處都給你滿滿多巴胺。
其中，最強大的一點是，Duolingo 的角色可以「對嘴」。
不只是嘴巴一張一合而已，如果大家仔細觀察，不管你怎麼選片語順序，Duolingo 裡的角色都可以在朗讀時，完美對應正確的嘴型。
Duolingo 是怎麼做到對嘴的？分為兩部分：
◼︎ 自有 text-to-speech 語音模型
Duolingo 在 2022 年的部落格中提到，他們訓練了自己的語音模型，如此就能精準知道每個音位（phoneme）的時長，在正確的時間、顯示正確的動畫。
◼︎ 嘴部動畫
這部分非常 tricky，要求包含：
能夠同時在 iOS、Android、Web 上運行
檔案得夠小
動畫品質必須夠好
要 scalable。Duolingo 有四十多種語言、100 多門課程，每一門課程都有數千個句子。必須確保角色的嘴型，可以對應每一個語言
解決方式是「狀態機（state machine）」。對遊戲、資訊或電機產業的人來說，想必不陌生，就是事先將所有可能的狀態做出來，然後根據不同條件，移動到不同狀態。
Duolingo 繪製了數十種可能的嘴型，並根據現在語音播放到的時間軸，過渡到正確的嘴型。
不過，Duolingo 並沒有自己去實作動畫播放，對嘴動畫背後的技術，是由一家成立五年的新創公司 Rive 提供。
本篇主要會介紹：為什麼動畫那麼難，以及 Rive 的兩大產品：
線上協作編輯器：可以讓多人一起設計動畫
跨平台互動播放器：可以根據使用者的行為，播放對應的動畫
不知道大家是否有這種感覺：產品裡精緻的動畫不常見。總覺得，2024 年了，肯定有辦法把動畫做好吧？
Duolingo 近幾年投入了許多資源在動畫與互動體驗，今年（2024）七月更收購了動畫製作工作室 Hobbes。然而，收購消息一出，Duolingo 股價立刻下跌。
這或許說明了許多人（特別是老闆）對於「動畫」的想法：只是裝飾、沒有為產品增加價值。
再加上動畫通常需要大量的工作，並涉及設計師、動畫師和工程師的協作。這導致過去十年，人類可說是活在「幾乎沒有動畫」的產品世界。
我的個人意見是，動畫實際上增加了相當多價值，特別是消費者產品（consumer app），這部分最後會再提到。
而 Rive 想解決的問題，便是讓動畫的協作與展示更簡單。
先附上一個驚艷動畫：Rive 自己官網的按鈕。大家也可以去玩玩，貓咪的手會根據游標的位置和停留時間，而有不同動作。按鈕類似於門板，會彈一下，細節做得很足！
（影片連結請點圖片）
Rive 解決了動畫製作的兩大難題：設計工具，以及互動播放。
現在，如果想要製作動畫，流程是：設計 → 動畫師在 After Effects 裡設計動畫 → 輸出成影片或 GIF → 嵌入網站或 app 內。
這個流程充滿了問題：
影片檔案過大，壓成 GIF 畫質又很差勁
After Effects 並非專為動畫設計的軟體（而是給電影視覺特效）
無法與使用者互動，只能一直循環播放動畫
在 2017 年，Airbnb 基於前人貢獻推出的開源方案 Lottie，解決了問題 1，讓動畫能以 JSON 檔與向量的形式呈現。
Lottie 動畫不僅畫質銳利到不行，更讓檔案從動輒好幾十 MB，下降到幾百 KB。
而 Rive 則解決了問題 2 和 3，提供「線上協作編輯器」和「跨平台互動播放器」兩大產品。
其中，編輯器可以視為「動畫的 Figma」，除了提供清楚的 UI 來設計動畫，也可以多人線上協作。
Figma 畫動畫，老實說挺痛苦的。雖然因為開放 plugin，支援匯出成 Lottie 等格式，但是 Figma 並針對動畫設計製作好用的 UI。
而「播放器」的官方名稱是「Runtime」，因為 Rive 並不只是「播放」動畫，更可以根據使用者的行為，決定該切換到哪一個動畫，即前面提到的「狀態機」。動畫師設計狀態，並根據條件（游標位置、長按、點擊等）觸發。
狀態機可用來讓角色的不同動作順暢銜接，雖然在遊戲內很常見，但是很少見於 web 或 app 動畫上。
下面這個黃衣男孩動畫近期爆紅，可以根據游標位置，決定角色看的方向。仔細看，頭髮跟衣服也會跟著動。（影片請點圖片連結，也可以去 Rive 的社群上玩）
終於，我們有了可互動的產品內動畫。
之所以會去研究 Duolingo 和 Rive，就是因為我在做產品（Clarymind）的過程中發現：動畫真的有夠難做。
不過光是看文字，可能還是會覺得：動畫真的有差嗎？
我起初也這麼認為，但是自己做產品後發現，動畫不僅是裝飾，更有以下作用：
當畫面有許多元素時，會彈跳或飛來飛去的東西，更能吸引使用者的目光。
當你希望使用者慢下來，可以用動畫來延長停留時間，讓使用者靜下心來看畫面，但同時又不會讓畫面很無聊、一下就滑掉。
同樣道理，當希望使用者很快走過，就可以讓動畫更簡潔。
動畫很大程度上可以定調氛圍。這頁是希望建立舒緩氣氛、嚴肅說明、親切友善還是活潑可愛？動畫比圖片更能有效傳遞感受。
消費者產品比起 B2B，更要求使用體驗上的細節。只要一個步驟等得久了些，或者出了什麼 bug，使用者就會一去不回頭。
而動畫只要能夠讓產品更清楚、或留住使用者久一些，就已經貢獻極大價值了。
下面「AI 解鎖 app」的選單，有無動畫的視覺明顯度差很多。
另一個則是錯誤畫面，有無動畫則是在氛圍上差很多。有動畫以後，比較沒有「天哪 app 壞了嗎」的突兀感。
最後附上 Rive 創業簡史：
創辦人 Guido 和 Luigi Rosso 是雙胞胎兄弟。小時候在馬來西亞讀高中、在義大利讀大學。後來去到舊金山，創立了一家視覺接案公司，客戶包含 Netflix、Xbox、HBO、MLB、Redbull 等企業大客戶，最終被 Intel 收購。
在探索題目時，回想當時接案的經驗，發現因為工具匱乏，導致動畫製作與協作非常困難。因此他們創立 Rive，在 2019 年從 a16z 募資 400 萬美元（約 1.2 億台幣），並在 2023 年 A 輪募到 1000 萬美元（約 3 億台幣）。
片尾彩蛋
以下收集一些這段時間沒有發成電子報的長文。
推特上有人決定不斷傳「hi」，騷擾各家不同的 AI 模型，看看會怎樣
規則：只傳「hi」，不管 AI 回什麼，都繼續傳「hi」。
他的發現：Claude 3.5 Sonnet 最有個性、Llama 最好相處、Grok 個性很像馬斯克（？）。這裡可以看全部實驗結果。
我的書單推薦，剛好 Kobo 正在週年活動，大家可以趁機補貨。
我注意到，自己有時候會突然什麼事都不想做，只想躺在沙發上。正因如此，我從來都不認為自己是個自律的人。
但過去幾年，我依然完成了不少事，其中有些需要多年的持之以恆。後來我歸結出：恰巧是因為「不自律」，我才能完成這些事。
由於做的是手機使用量的 app，因此整理了一份全球螢幕使用時間的報告。
報告中提到，過去一年，人們花在媒體的時間減少了。全球票選最愛的社群媒體是 IG，但實際上，花最多時間在 TikTok 上（？）
〈台灣人平均一天用社群多久？全球螢幕使用時間最少的是哪一個國家？使用者更愛抖音（TikTok）還是 Instagram？〉
本期電子報由 Clarymind 贊助播出（？）（不過這是真的，因為這款 app 是我目前的主要收入來源）
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.