素股中出在线,熟女香蕉久久久久

了解Lottie+Bodymovin參看上篇文章《設(shè)計(jì)師和程序員都應(yīng)該了解的動(dòng)畫(huà)還原大殺器Lottie+Bodymovin》。

用Lottie提供Bodymovin插件導(dǎo)出AE動(dòng)畫(huà)，接觸的項(xiàng)目多了，發(fā)現(xiàn)坑也越多，比如圖層的漸變效果，進(jìn)行預(yù)覽后發(fā)現(xiàn)漸變都變成了黑白（漸變丟失），可是官方文檔是支持該屬性的??？碰到這樣的問(wèn)題真的是一臉懵逼。又比如碰到預(yù)覽動(dòng)畫(huà)里頭的文字全部錯(cuò)位的情況，然后去找解決方案后就有豁然開(kāi)朗的feel... ...

因?yàn)樽约航佑|AE也是非常機(jī)緣巧合，但想到作為交互設(shè)計(jì)師能力的延伸，頁(yè)面交互動(dòng)畫(huà)除了可以通過(guò)Principle設(shè)計(jì)，一些復(fù)雜的動(dòng)畫(huà)也可以通過(guò)AE來(lái)實(shí)現(xiàn)，而配合插件Bodymovin導(dǎo)出Json文件，即能夠完美還原動(dòng)畫(huà)，又能夠減輕開(kāi)發(fā)量，總之好處多多。

從此也踏上了AE的不歸路... ...下面將項(xiàng)目中碰到的一些問(wèn)題記錄下來(lái)，避免再次踩坑，同時(shí)方便自己和他人快速查閱并找到解決方案。

因?yàn)長(zhǎng)ottie和Bodymovin由Airbnb開(kāi)源團(tuán)隊(duì)維護(hù)與迭代更新，可能以前不支持的屬性后面新版本就支持了，以前踩過(guò)的坑用新版本就解決了，而本文章不可能如此“與時(shí)俱進(jìn)”，所以有些“坑”在后面來(lái)看可能已經(jīng)解決了。

本文章適合對(duì)AE和Lottie+Bodymovin有了解的同學(xué)閱讀。

問(wèn)題目錄

IOS和Android不兼容Json問(wèn)題
如何直觀知道該Json文件在IOS和Android上可用
如何解決Lottie中AE屬性「漸變填充」預(yù)覽問(wèn)題
如何解決Lottie中AE屬性「漸變描邊」預(yù)覽問(wèn)題
Lottie預(yù)覽文字錯(cuò)位問(wèn)題

IOS和Android不兼容Json問(wèn)題

IOS用最新版的Bodymovin導(dǎo)出的「Json+images」文件可以很好的適配蘋(píng)果手機(jī)，安卓的話(huà)需要導(dǎo)出舊格式，所以最后會(huì)分別給IOS和Android開(kāi)發(fā)工程師提供Json文件。

給IOS工程師的Json文件直接用最新版的Bodymovin導(dǎo)出就行，給Android工程師的話(huà)在設(shè)置里頭勾選“Export old json format"，導(dǎo)出舊版本的json格式以便和Android系統(tǒng)兼容。

如何直觀知道該Json文件在IOS和Android上可用

用Bodymovin導(dǎo)出Json文件之后，將其拖拽到https://lottiefiles.com/preview進(jìn)行預(yù)覽，同時(shí)該網(wǎng)頁(yè)會(huì)生成一個(gè)二維碼，不過(guò)在web端預(yù)覽沒(méi)問(wèn)題不代表在手機(jī)端上預(yù)覽是沒(méi)問(wèn)題的。

ps：導(dǎo)出只有Json文件，那直接拖拽Json文件即可；如果導(dǎo)出的是Json+images，那么就打成壓縮包后拖拽即可。（注意如果帶有images包，在網(wǎng)站上預(yù)覽沒(méi)問(wèn)題，在手機(jī)客戶(hù)端預(yù)覽看到的是丟失圖片的效果）。

蘋(píng)果手機(jī)下載App「Lottie Preview」，打開(kāi)應(yīng)用掃描網(wǎng)頁(yè)端預(yù)覽生成的二維碼，如果手機(jī)端預(yù)覽沒(méi)有問(wèn)題的話(huà)表示該動(dòng)畫(huà)適配手機(jī)上沒(méi)問(wèn)題，安卓手機(jī)的話(huà)下載App「Lottie」，查看方式同蘋(píng)果手機(jī)，不再進(jìn)行贅述。

蘋(píng)果手機(jī)可以直接在應(yīng)用市場(chǎng)搜索名稱(chēng)進(jìn)行下載，安卓手機(jī)如果在應(yīng)用市場(chǎng)搜索不到的話(huà)可以參照下面的方式進(jìn)行下載——

1、進(jìn)到Lottie-Android（https://github.com/airbnb/lottie-android）的GitHub網(wǎng)址，點(diǎn)擊release

2、查看對(duì)應(yīng)的版本有無(wú)apk包下載，因?yàn)椴皇敲恳粋€(gè)版本都有對(duì)應(yīng)的安裝包，所以要耐心找一找，找到后發(fā)到手機(jī)安裝即可。

如何解決Lottie中AE屬性「漸變填充」預(yù)覽問(wèn)題

開(kāi)篇有提過(guò)，我在查詢(xún)官方支持AE屬性列表中看到漸變是被Lottie和Bodymovin支持導(dǎo)出的。如下圖：

但實(shí)際預(yù)覽存在很大的問(wèn)題，漸變將被處理為黑白漸變。如下圖：

這似乎有點(diǎn)前后矛盾，后續(xù)查閱了一些資料，發(fā)現(xiàn)預(yù)覽有問(wèn)題的原因是我的AE是中文版的，其圖層屬性的命名也是默認(rèn)中文的，如果把對(duì)應(yīng)的圖層屬性名稱(chēng)由「漸變填充 1」修改為「Gradient Fill」就預(yù)覽正常了。