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

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

犸良是什么？

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

△ 官網(wǎng)：https://design.alipay.com/emotion

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

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

豐富的動(dòng)效素材能夠滿(mǎn)足多種場(chǎng)景需要。

犸良怎么用？

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

1. 選擇模版
2. 從動(dòng)畫(huà)倉(cāng)庫(kù)選擇動(dòng)畫(huà)進(jìn)行當(dāng)前動(dòng)畫(huà)的替換
3. 通過(guò)替換圖片或修改顏色來(lái)自定義動(dòng)畫(huà)
4. 自定義模板文字內(nèi)容
5. 選擇模板背景圖片
6. 完成編輯選擇是否帶背景（banner模版默認(rèn)帶背景）
7. 導(dǎo)出成功下載 json

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

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

體驗(yàn)感受

綜合體驗(yàn)了一下犸良，相對(duì)于鹿班人工智能隨意擼圖。犸良其實(shí)是一款基于人工的動(dòng)效模板網(wǎng)站。所有的動(dòng)態(tài)效果都是設(shè)計(jì)師提前做好的。基于 Lottie 的特性，將可編輯的屬性進(jìn)行模塊化。

說(shuō)到這里有些設(shè)計(jì)師可能有疑問(wèn)了，Lottie 究竟是什么？在優(yōu)設(shè)已經(jīng)有相關(guān)文章介紹的比較全面了，這里就不贅述了，閱讀鏈接：http://www.uisdc.com/tag/lottie/。

簡(jiǎn)言之 Lottie 就是一個(gè)快速將 AE 中設(shè)計(jì)的動(dòng)效快速調(diào)出，并且開(kāi)發(fā)可以直接調(diào)用的動(dòng)效庫(kù)。

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

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

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

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

其實(shí) Lottie 官方社區(qū)也有很多的動(dòng)效資源，都是來(lái)自全世界的設(shè)計(jì)師上傳的，大家可以去下載參考，如果要商用，可能需要聯(lián)系作者。

△ 附上鏈接：https://lottiefiles.com/popular

本文資料，很多都是來(lái)自語(yǔ)雀的分享。再次感謝相關(guān)人員的辛勤付出。大家可以在此處查看犸良的完整介紹：https://www.yuque.com/dapolloali/news/ui43vg。

再次附上官網(wǎng)：https://design.alipay.com/emotion

總結(jié)

以上是生活随笔為你收集整理的阿里出品的动效制作神器犸良！零基础也能轻松做酷炫动效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。