1. 程式人生 > >仿美團loading載入中的動畫

仿美團loading載入中的動畫

demo原始碼下載:下載

前言

在Android 中是不支援直接使用Gif 圖片關聯播放幀動畫,Android 提供了另外一種解決的辦法,就是使用AnimationDrawable 這一函式使其支援逐幀播放,但是如何把gif 圖片打散開來,成為每一幀的圖片呢?下面介紹兩種比較不錯的軟體,可以幫我們打散圖片。

easygifanimator

想必用過美團客戶端的使用者對美團那個載入小人的動畫印象很深刻,一個可愛的小人在那拼命的跑。這個動畫實現的方法其實很多,今天這裡就用frame動畫來實現一下。

二、佈局檔案

[html] view plain copy  print
?在CODE上檢視程式碼片派生到我的程式碼片
  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingBottom="@dimen/activity_vertical_margin"
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"
  7.     android:paddingRight="@dimen/activity_horizontal_margin"
  8.     android:paddingTop="@dimen/activity_vertical_margin"
  9.     tools:context=".MainActivity">
  10.     <ImageView
  11.         android:id="@+id/imageView"
  12.         android:layout_width="fill_parent"
  13.         android:layout_height="fill_parent"
  14.         android:onClick
    ="start"
  15.         android:scaleType="fitCenter"
  16.         android:src="@anim/frame"/>
  17. </RelativeLayout>

新建一個anim檔案,裡面存放的就是準備frame動畫的圖片,圖片直接可以去美團的安裝包解壓後拿來。 [html] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <animation-listxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:oneshot="false">
  4.     <itemandroid:drawable="@drawable/progress_loading_image_01"android:duration="50"/>
  5.     <itemandroid:drawable="@drawable/progress_loading_image_02"android:duration="50"/>
  6. </animation-list>
對應的item 為順序的圖片從開始到結束,duration為每張逐幀播放間隔,oneshot 為false 代表迴圈播放,設定為true 即播放一次即停止。
主函式程式碼:

通過image view的getDrawabel方法 得到一個 AnimationDrawable物件  然後呼叫start方法就可以開啟動畫了。

[java] view plain copy  print?在CODE上檢視程式碼片派生到我的程式碼片
  1. publicclass MainActivity extends Activity {  
  2.     private ImageView imageView;  
  3.     private AnimationDrawable ad;  
  4.     @Override
  5.     protectedvoid onCreate(Bundle savedInstanceState) {  
  6.         super.onCreate(savedInstanceState);  
  7.         setContentView(R.layout.activity_main);  
  8.         imageView = (ImageView) findViewById(R.id.imageView);  
  9.         ad = (AnimationDrawable) imageView.getDrawable();       // 獲取圖片內容, 強轉為動畫物件
  10.     }  
  11.     publicvoid start(View v) {  
  12.         if (ad.isRunning())  
  13.             ad.stop();  
  14.         ad.start();     // 開始播放
  15.     }  
  16. }