今天看到一個很有意思的開源項目,下面是這個項目的介紹: Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
中文意思就是:Lottie是一個針對android和ios的移動庫,這個庫的主要作用就是在手機本地去渲染在AE上通過Bodymovin導出的json。
Lottie Github主頁 Bodymovin Github主頁
下面的幾個都是他給出的示例圖:

更多的效果圖,我們可以去github主頁去觀看。
加入依賴庫
compile ‘com.airbnb.android:lottie:1.0.1’
使用起來也很簡單
<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" />其實如果你的代碼要是只是純粹的展示,到這里已經是結束了。hello-world.json是你放在assets中的一個文件。當然你也可以使用代碼的形式去設置,下面是官方給出的形式。
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);animationView.playAnimation();當然最主要吸引我的還是這個庫是支持Android、IOS、RN的,這樣在我們的項目中,只要我們有了源json文件,就可以很方便的去各個平臺上進行動效的使用了。
https://github.com/airbnb/lottie-android https://github.com/airbnb/lottie-ios https://github.com/airbnb/lottie-react-native
這樣就可以避免我們使用gif造成的大量的內存消耗,同時也可以避免我們使用SVG造成不同平臺,都要有自己的一套解析工具。其實說白了,這個庫就是給我們提供了一個不同平臺的解析工具。碰到這么給力的工具,我當然要去試驗一番。
下載AE,添加bodymovin插件 通過AE制作一個簡單的動畫 導出json文件上面的步驟寫的雖然簡單,但是我還是遇到了很多坑,你要是碰到了任何坑,可以跟我聯系,希望我能幫到你。
最后我做的一個簡單示例效果如下: 
這個是錄制的模擬器上的效果,有點卡,不過真機上的效果還是很好的。
新聞熱點
疑難解答