15321250321
010-86462584

APP開發(fā)中的 Lottie 和動畫

2022-07-07

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

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

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

Spring

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

微交互

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

全屏過渡

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

加載屏幕

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

為演練、零狀態(tài)和錯誤屏幕添加天賦

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

投入生產(chǎn)

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

下一步是什么？

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