阿里作為中國互聯(lián)網(wǎng)企業(yè)的標(biāo)桿，不僅一直在為廣大人民群眾提供快捷便利的服務(wù)。也不斷引領(lǐng)行業(yè)，在各個專業(yè)領(lǐng)域，給專業(yè)人員提供了優(yōu)質(zhì)的工具與服務(wù)。對設(shè)計師而言，無論是每年一度的 UCAN大會，還是 Kitchen、語雀、Ant Design等設(shè)計開發(fā)工具，都給廣大設(shè)計師帶來很大的便利。

而最近，阿里又推出了一款基于Lottie的動效設(shè)計平臺──犸(ma)良。能夠快速生成設(shè)計師想要的動態(tài)效果，并交付給開發(fā)，極大地提高了設(shè)計效率和設(shè)計還原度。

犸良是什么？

它是一個積累了很多通用動效素材的平臺，讓不會動效的同學(xué)們也能基于動效庫和素材庫快速生成一個通用動效創(chuàng)意，你只需要簡單地編輯圖片、顏色或者文字即可。同時平臺集成了以 Lottie 為代表的動效技術(shù)，讓曾經(jīng)令人苦惱的安裝包大小和性能問題一并解決。

犸良的應(yīng)用場景

犸良支持全平臺 iOS、Android、H5、小程序。無論是營銷展位、活動頁面、空狀態(tài)還是產(chǎn)品icon。犸良編輯器對接投放平臺，一站式完成動效創(chuàng)意制作和投放。

豐富的動效素材能夠滿足多種場景需要。

犸良怎么用？

方式一：基于模版直接制作（適用于設(shè)計師進(jìn)行動態(tài)banner制作）

1. 選擇模版

2. 從動畫倉庫選擇動畫進(jìn)行當(dāng)前動畫的替換

3. 通過替換圖片或修改顏色來自定義動畫

4. 自定義模板文字內(nèi)容

5. 選擇模板背景圖片

6. 完成編輯選擇是否帶背景（banner模版默認(rèn)帶背景）

7. 導(dǎo)出成功下載json

方式二：自定義畫布制作（適用于設(shè)計師進(jìn)行模板覆蓋不到的動效應(yīng)用場景）

使用犸良一分鐘做出來的效果，大家感受下：

綜合體驗(yàn)了一下犸良，猛良其實(shí)是一款基于人工的動效模板網(wǎng)站。所有的動態(tài)效果都是設(shè)計師提前做好的?；贚ottie的特性，將可編輯的屬性進(jìn)行模塊化。

說到這里有些設(shè)計師可能有疑問了，Lottie究竟是什么？

簡言之 Lottie 就是一個快速將AE中設(shè)計的動效快速調(diào)出，并且開發(fā)可以直接調(diào)用的動效庫。

Lottie 的原理是將矢量圖形和動態(tài)效果通過代碼實(shí)現(xiàn)，復(fù)雜的圖形導(dǎo)出圖片資源。最終生成 json文件+圖片資源。犸良所做的就是，將json里的顏色屬性提取出來，用戶可以從外部修改。同樣只需要替換圖片資源，就可以讓用戶自己設(shè)計的圖形根據(jù)json寫好的運(yùn)動方式來展示。如果你把一只移動的豬替換成貓了，那么你看到的效果就是一只移動的貓。

而它的文字編輯功能，我覺得就比較神奇了。因?yàn)?Lottie 貌似不能從外部修改字體，應(yīng)該是阿里自己寫的。如果有知道的同學(xué)也歡迎解惑。因?yàn)槲覀冊趯?shí)際工作中經(jīng)常遇到這樣的問題，就是如果動效包含文本了，需要適配國際化，就沒法從外部修改語言。如果能解決這個問題，將會減少很多麻煩。

從現(xiàn)有的素材來看，其主要應(yīng)用場景還是電商和運(yùn)營方面。相信未來會增加更多的素材和應(yīng)用場景。希望以后能夠開放出讓設(shè)計師可以將自己做的動效分享出來供大家使用，或者提供優(yōu)質(zhì)付費(fèi)內(nèi)容也是不錯的選擇。

就個人的工作經(jīng)驗(yàn)來看Lottie還是有豐富的應(yīng)用場景的。比如可以做動態(tài)圖標(biāo)、動態(tài)閃屏頁、表情貼紙、直播禮物、空白頁、動態(tài)banner……

因?yàn)獒锪际腔贚ottie的工具，所以有相關(guān)基礎(chǔ)的設(shè)計師很容易上手。還不了解的同學(xué)也可以在各大設(shè)計網(wǎng)站搜索到。現(xiàn)如今，動效設(shè)計能力已經(jīng)是互聯(lián)網(wǎng)設(shè)計師必備技能,希望這款工具能夠幫助學(xué)習(xí)動效設(shè)計的伙伴，能夠在學(xué)習(xí)UI上更上一層樓。