Lottie 讓Android動畫實現更簡單

2021-07-30 21:10:08 字數 2550 閱讀 1870

首先先無恥的把我自己寫的demo程式和原始碼放上來。

demo程式的github位址 : 

一、lottie能幹什麼?

在回答lottie能幹什麼之前,我們先想下如下的動畫如何實現?

如何實現上方的動畫效果?

我想大概有幾種方式:

那麼有沒有什麼方式是即可以方便的實現動畫效果,又可以不用考慮適配的問題,而且android、ios還可以相容呢?

lottie就是支援android, ios, 和react native,並且只需簡單的**就可以實現複雜動畫效果的庫

二、lottie在android端怎麼用?

假設我們要做乙個緩衝資料時的乙個loading動畫,不用lottie之前你們公司的美工一般都會給乙個gif動畫效果和一些切好的一幀一幀的。現在不需要這麼操作了,只要你們公司的美工做如下的操作:

下面是公司帥帥的美工的工作

,解壓縮後只需要\build\extension\bodymovin.zxp這個檔案就可以

4.去找cmd,並以系統管理員身分執行。

5.打「cd c:/exmancmd_win 所在的路徑 「,進入exmancmd的資料夾中

6.接著打 exmancmd.exe /install bodymovin.zxp 就完成了

7.再來進入ae 後,可以在windows/extentions/bodymovin 找到外掛程式,開啟後按下render 就完成了。 重點來了,這時會在你選的destination folder目錄中生成乙個json格式的檔案,這個 json 檔案描述了該動畫的一些關鍵點的座標以及運動軌跡。請帥帥的美工把這個檔案發給你苦逼的程式設計師兄弟吧!

下面就是苦逼android程式設計師應該如何做咯

1.在build.gradle中新增

dependencies
2.layout檔案中新增

.airbnb

.lottie

.lottieanimationview

android:id="@+id/animation_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

然後你就會發現奇蹟出現了,沒有一張,沒有乙個gif,但是動畫效果出來了!就是這麼簡單,就是這麼暴力!

三、lottie高階,如何更加高效和方便的實用?

1.最簡單的使用方式就是上方直接在xml中定義的方式。

2.使用**的方式,支援從assets目錄中直接讀取json檔案、json字串的方式、stream流的方式等

3.從網路獲取json檔案,直接顯示動畫。這種方式很炫,你就可以不用不更新apk就不動聲色的定期更新你的動畫了。

下方是我寫的乙個小demo,使用okhttp訪問網路上一段json檔案,然後顯示動畫。

client.newcall(request).enqueue(new callback() 

@override

public

void

onresponse

(call call, response response)

throws ioexception

try

});} catch (jsonexception e)

}});

四、lottie例子程式

為了更好的讓你了解這個庫,我寫了乙個簡單的demo,請大家幫忙點star !

android動效開篇

大神部落格 在接下來的時間裡,我會把我之前所做所總結的android動效相關和大家一步步分享,相互交流,相互學習,共同進步,當然裡面難免會有可以更優的實現或方法,大家多多指出 1.animation和animator使用,interpolator 插值器 原理 2.自定義view實現水波紋效果 3....

Android設定Activity切換動畫

改變activity切換預設的動畫效果。修改activity的theme屬性。android name mainactivity 上述 中使用的動畫淡入淡出是系統定義好的,fade in.xml原始碼如下 xmlns android android duration android integer ...

Android自定義Animation動畫

產品需求中有乙個動畫效果 textureview按照曲線路徑進行移動,並且同時做scale和alpha變化。當然,同時 進行多個動畫只需要使用animationset就行了,但是對於 曲線 這樣的移動效果,只能採用多個translateanimation來順序進行以模擬曲線的效果了。這樣的實現方式沒...