AE導出json工具-bodymovin(lottie)漢化

Windows版下載

快捷鍵ctrl + o,然後選擇zxp文件進行安裝。如果之前安裝過bodymovin,會覆蓋掉原來的版本。

AE導出json工具-bodymovin(lottie)漢化

Mac版下載

直接將zxp文件拖拽進安裝器,或者按快捷鍵cmd + o然後,選擇zxp文件進行安裝。如果之前安裝過bodymovin,會覆蓋掉原來的版本

AE導出json工具-bodymovin(lottie)漢化

關於導出的png黑邊問題

bodymovin主要是用於導出矢量動畫,當AE合成中有圖片資源需要導出時,bodymovin使用了AE一個「內部函數」來生成png圖片資源:

comp.saveFrameToPng()

這個是AE的內部函數(undocumented method),能快速的將當前頁面的內容保存為png圖片,但最大的問題是保存出來的png圖片如果是帶透明通道的,會在不透明像素的邊緣生成「黑邊」,如下圖,右邊帶透明通道的就有「黑邊」,左邊沒有透明部分就不受影響:

正常png圖片

AE導出json工具-bodymovin(lottie)漢化

bodymovin導出的png圖片

AE導出json工具-bodymovin(lottie)漢化

這是什麼情況?經過測試,感覺這個函數導出速度很快,我猜是因為它是直接從顯存裡獲取圖像的,而在GPU在處理資源時,為了效率會使用一種「預乘(Premultiplied)」技術,這個技術的特點是如果引擎不支持,呈現出來的png圖片邊緣會有「黑邊」,感興趣可以看下這篇文章: https://segmentfault.com/a/1190000002990030

如果這導出的圖片最後我們還是要導入AE,我們可以通過設置將圖片的alpha模式設置為「預乘(Premultiplied)」,預乘顏色設置為黑色來解決。

AE導出json工具-bodymovin(lottie)漢化

但是我們用bodymovin是為了導出給web或者安卓、ios使用,無法確定這些平臺是否支持預乘技術,所以還是最好能直接導出傳統png比較好。 所以我寫了一個函數不走saveFrameToPng()導出png圖片,直接用AE的渲染隊列(render queue)處理,用AE渲染引擎渲染出來的效果總該沒問題了吧?然後替換了bodymovin裡的saveFrameToPng()方法,目前為止用它做了一些項目還沒發現什麼問題(我在mac下使用,windows沒有大量測試,理論上也不會有什麼問題)。

代碼如下:

https://gist.github.com/bigxixi/d65f46552f8d1c2b91a8638f018f1843

我給bodymovin作者提了這個方案,不過他一直沒能修復。。。所以就自己動手豐衣足食了XD

關於漢化

主界面的漢化沒什麼技術含量,就是找出對應字符串然後替換。

有些消息文本是通過jsx腳本處理然後傳遞給界面的,如果直接在腳本里替換為中問就會出現亂碼,經過測試把中文從utf-8編碼轉換成ascii碼可以解決。 由於bodymovin更新頻繁,這次花了點時間做了個mac下的「漢化+修復腳本」,未來只要不是大改,我只需要微調腳本就能持續更新了^_^

如果你感興趣也可以嘗試自己漢化打包,步驟:

  1. 下載bodymovin.zxp英文原版下載「漢化+修復腳本」,隨便解壓到某個文件夾。解壓後的文件夾裡有個「漢化+修復+打包腳本.command」文件,直接運行會提示需要權限,這時需要先打開終端,輸入:

chmod +x "漢化+修復+打包腳本.command文件位置"

這個文件位置可以直接把「漢化+修復+打包腳本.command」文件拖拽進終端裡生成。 然後回車,就賦予它執行權限了。 4. 雙擊「漢化+修復+打包腳本.command」文件,會提示輸入zxp腳本路徑,這時還是老辦法,把bodymovin.zxp文件拖拽進來,回車,就開始漢化了。

提醒一下哈,這個腳本沒經過多少測試,就試了在自己機器上能用,圖個輕鬆。


分享到:


相關文章: