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

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

以下是我們最近一直在考慮向我們的APP添加動(dòng)畫(huà)的幾種方法：

Spring

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

微交互

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

全屏過(guò)渡

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

加載屏幕

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

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

將 Lottie 動(dòng)畫(huà)添加到APP的演練屏幕有助于用戶(hù)的教育過(guò)程。一次顯示一個(gè)動(dòng)畫(huà)元素可以幫助用戶(hù)閱讀內(nèi)容。動(dòng)畫(huà)零狀態(tài)屏幕可能會(huì)產(chǎn)生類(lèi)似的影響，因?yàn)槟梢灾笇?dǎo)用戶(hù)快速解決問(wèn)題的方法。

投入生產(chǎn)

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

下一步是什么？

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

• 上一篇 : APP開(kāi)發(fā)圖標(biāo)設(shè)計(jì)：超越設(shè)計(jì)，還是產(chǎn)品標(biāo)識(shí)
• 下一篇 : 移動(dòng)APP設(shè)計(jì)動(dòng)畫(huà)的指南