1. 程式人生 > >仿京東頂部載入動畫

仿京東頂部載入動畫

  昨天的時候我們仿照了一個美團的載入的圖示的小人,今天我們也來看看京東在下拉重新整理的時候也會有一個快遞的小人是怎麼實現的,還是依靠慣例,我們解壓一下它的apk,然後去裡面找一找那些素材,發現原來也有幾張圖片,原來它的原理是和美團是一樣的,其他的就不多說了。

  • 我們先把素材取出來再說:
    這裡寫圖片描述 這裡寫圖片描述 這裡寫圖片描述 這裡寫圖片描述
  • 接下來我們就在drawable 目錄下新建一個 loading_jd.xml 檔案
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item android:drawable="@drawable/app_refresh_people_0" android:duration="60"></item> <item android:drawable="@drawable/app_refresh_people_1" android:duration="60"></item> <item android:drawable="@drawable/app_refresh_people_2" android:duration
="60">
</item> <item android:drawable="@drawable/app_refresh_people_3" android:duration="60"></item> </animation-list>
  • 然後我們在我們的佈局檔案中的使用:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width
="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" >
<ImageView android:id="@+id/iv_loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/loading_jd" android:layout_gravity="center" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="10dip" android:textSize="18sp" android:text="載入中。。。" /> </LinearLayout>
  • 3、接下來我們就在Activity中開啟幀動畫
public class MainActivity extends Activity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_main);

        ImageView iv_loading = (ImageView) findViewById(R.id.iv_loading);
        AnimationDrawable loadingDrawable = (AnimationDrawable) iv_loading.getDrawable();
        loadingDrawable.start();
    }
}

其實這個動畫是非常簡單的,就是利用了Android裡面的幀動畫來實現的,通過多張圖片的無限迴圈的播放來達到這個效果,最後我們看看這個效果與我們的效果是不是一樣的。
這裡寫圖片描述