人妻精品无码中文无码一区无,久久久精品一区aaa片,尖叫喷泉

前言

在動畫還原上，設計師和開發都碰到過以下問題：

1、動效復雜，通過原生代碼還原動畫非常耗時耗力

2、設計師即使輸出完整的動畫參數說明，使用代碼還原動效還原仍然會有偏差

有了大殺器Lottie和Bodymovin，可以完美解決以上問題，讓我用一個詞來形容Lottie+Bodymovin組合，那就是“省心”。

一、什么是Lottie和Bodymovin？

Lottie是Airbnb開源的一套跨平臺（Web、IOS、Android、React Native）的動畫庫，設計師在Adobe Effect制作動畫之后，使用Lottie提供Body movin（AE插件）將動畫導出帶有矢量動畫信息的Json文件，最后開發將Json文件放入App項目中，就可以將動畫100%還原到產品中。

對于不同的工作角色，Lottie+Bodymovin提供一套完整動畫解決方案：

設計師，百分百還原設計師的腦洞和創意，相信這是對設計師的最好嘉獎
開發，拋棄臃腫的代碼，如今只需要簡單導入和有限的代碼就可以完成動畫開發
項目管理，不同擔心因為還原難題而影響了項目進度
產品經理，動畫可以為產品錦上添花

二、跨平臺實現

對于不同設備，開發小哥哥可以關注下面的項目了解進行實現——

Web頁面，通過Airbnb的開源項目“lottie-web”（https://github.com/airbnb/lottie-web）實現
Android原生，通過Airbnb的開源項目“lottie-android”（https://github.com/airbnb/lottie-android）實現
IOS原生，通過Airbnb的開源項目“lottie-ios”（https://github.com/airbnb/lottie-ios）實現
React Native，通過Airbnb的開源項目“lottie-react-native”（https://github.com/react-native-community/lottie-react-native）實現

下面重點介紹下AE插件Bodymvin的安裝～～

三、Bodymovin安裝和使用

首先你的電腦已經安裝了AE，如果你的AE打開了，在安裝之前先將AE關閉。

第一步，安裝ZXP，為安裝Bodymovin插件到AE做準備。

下載地址：https://aescripts.com/learn/zxp-installer/

第二步：下載最新的Bodymovin插件。

下載地址：https://github.com/airbnb/lottie-web/tree/master/build/extension

然后打開第一步下載的ZXP，將Bodymovin拖動進去。

下面這張圖表示安裝完成。

第三步，打開AE，AE進行允許AE使用腳本設置，操作如下：

點擊“After Effects CC > 首選項 > 常規”「Mac OS：快捷鍵Command+Option+;(分號)；Win：Ctrl+Alt+;(分號)」，選中“允許腳本寫入文件和訪問網絡”，點擊確定。

第四步，選擇AE窗口 > 擴展 > Bodymovin，打開Bodymovin窗口。

第五步，先選擇你要導出動畫的存儲路徑，然后點擊渲染即可將你選擇的合成動畫導出為Json文件。輸出Json后，可以點擊左上角的預覽（preview）按鈕，拖動下面的滑塊進行預覽。

可以點擊左上角的預覽（preview）按鈕，點擊“Browse”可選擇本地的Json文件進行預覽，點擊“Current Renders"對當前合成動畫進行預覽。動畫非自動播放，要拖動下面的滑塊進行預覽。

最后，將導出的Json文件或Json+images文件發給開發小哥哥去實現啦～～

四、案例分享

前面有提到最后導出的可能是Json文件，也可能是Json文件加一個images包，所以分2種情況，如果在AE里直接繪制素材并制作動畫，用Bodymovin導出的只是一個Json文件；如果在AE中導入外部素材制作動畫，除了Json文件之外，還會有一個images圖片包生成，這個包包含了動畫中的所有圖片素材。

下面根據這2種情況分享下實際應用案例：

1、在AE里直接繪制素材制作動畫

需求背景是需要首頁金剛區2個Icon入口（分別是支付寶支付和微信支付）合并為1個Icon入口，要素依然需要保留，同時需要讓用戶一看就知道這塊功能是移動支付的入口。

其中一個方案是采用Logo平滑過渡的方式，預覽效果如下：