APP開發中的 Lottie 和動畫

2022-07-07

?現代的APP開發喜歡動畫。無論是動畫標志；按鈕推動的一些微妙補充；或者實現我們所說的微交互。他們正在成為讓APP“感覺”更優質的首要方式之一，就好像它來自 Airbnb、Netflix 或 Google 之類的公司一樣。直到最近才出現這種情況，因為開發它們可能會變得非常昂貴。聘請動畫師與前端開發人員長期合作以完善APP的一小部分似乎對于許多項目來說并不值得。

由于動畫已經越來越深入地嵌入到APP空間中，各種組織已經推出了庫來支持開發人員更快地創建這些，并且在設計師/動畫師端也發生了同樣的情況。Airbnb 的 Lottie 就是這樣一個圖書館。它的創建是為了讓設計人員能夠向開發人員提供一段創建完整動畫的 javascript。您可以將標記附加到它，以便它們可以循環、反轉、基于某些交互進行更改以及各種操作。最重要的是，它可以與我們最喜歡的開發框架 React Native 一起使用，所以我們喜歡它。考慮到這個庫和其他庫，較小的項目和機構可以慢慢使用動畫。

以下是我們最近一直在考慮向我們的APP添加動畫的幾種方法：

Spring

由于 Lottie 使用名為 Adobe After Effects 的程序來工作，因此您可以通過播放一些關鍵幀速度來將所謂的“彈簧”緩動添加到動畫中。Spring 為動畫添加了額外的反彈，這有助于使一切感覺自然，就好像您的APP融入了現實世界中發生的動作一樣。你可以在這里看到不同之處，我們有一個動畫，它有一種稱為“捕捉”的彈簧緩動，而一個沒有。

微交互

微交互已成為現代APP的重要組成部分。對于額外的努力，他們可以讓用戶對APP感到賓至如歸。他們可以看到屏幕上的元素在導航時快速流暢地響應它們。微交互還允許用戶享受小時刻和點綴在APP中的復活節彩蛋。這些可以小到為一些圖標設置動畫，為按鈕點擊添加一些閃光，或者添加一些動畫吐司提示以向用戶展示。我個人最喜歡的是在名為Divi的 WordPress 主題中使用的顏色選擇器動畫，我在這里模擬了一個類似的版本。

全屏過渡

我們在這里一直在嘗試使用lottie 來創建和/或協助自定義全屏轉換的能力。這些變得有點復雜，可能需要更多的工作，但它們可以讓你的APP看起來更有趣；尤其是在進行涉及在后臺發送或加載額外內容的較大轉換時。在這張照片中，我們演示了將其用于登錄屏幕。

加載屏幕

Lottie 最常見的用途之一是創建有趣、有彈性的加載屏幕。這些為用戶提供了反饋和一些很酷的東西，讓他們在后臺等待一切發生。APP完成加載后，您甚至可以將其拼接成全屏過渡或完成彈出。

為演練、零狀態和錯誤屏幕添加天賦

將 Lottie 動畫添加到APP的演練屏幕有助于用戶的教育過程。一次顯示一個動畫元素可以幫助用戶閱讀內容。動畫零狀態屏幕可能會產生類似的影響，因為您可以指導用戶快速解決問題的方法。

投入生產

盡管創建與上述類似的動畫很有趣，但 Lottie 所能提供的幫助有限。開發仍然需要為這里顯示的幾乎所有動畫形成主干。屏幕之間的轉換仍然需要大量的人工操作；Lottie 只是讓這個過程稍微容易一些。Lottie 動畫可以為許多小型微交互提供動力，但是一旦添加了稍微復雜一點的功能，使用 Lottie 幾乎不可能創建微交互。

下一步是什么？

在展望APP開發中動畫的未來時，它肯定看起來很光明。Apple 最近推出的 SwiftUI、React Native 的 MagicMove 等庫以及領先組織的持續支持正在慢慢彌合設計和開發之間的差距。UI 設計師現在可以開始制作復雜動畫APP交互的原型，然后將代碼交給開發人員進行簡單粘貼。同樣，開發人員可以激活庫來為他們做越來越多的漂亮動畫工作。