[Android] 模擬一個播放前載入的動畫

先來看效果




主要有3個元件組成：

進度環

撥放icon

半透明罩

---

layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.boywhychen.drawabletest.MainActivity"
    tools:showIn="@layout/activity_main">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:max="500"
        android:progress="0"
        android:progressDrawable="@drawable/mybackground" />
    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:background="@drawable/play_background"
        android:src="@android:drawable/ic_media_play"
        />
    <View
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:background="@drawable/play_marsk"
        android:id="@+id/marsk"
        />

</RelativeLayout>

mybackground.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="2.3"
    android:shape="ring"
    android:useLevel="true"
    android:thickness="3.8sp">
    <solid android:color="@android:color/holo_green_dark" />
</shape>

play_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#666666"/>

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

play_marsk.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#44000000"/>

    <size
        android:width="150dp"
        android:height="150dp"/>
</shape>

code

final View marsk=(View)findViewById(R.id.marsk);

        ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
        ObjectAnimator animation = ObjectAnimator.ofInt (progressBar, "progress", 0, 500);
        // 設定進度條要由0～跑到500 （ 500 ProgressBar 的Max，設大一點跑起來會比較順，設100, 會感覺有點卡卡的）
        animation.setDuration (5000); //in milliseconds
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();
        animation.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                marsk.setVisibility(INVISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

參考來源：
http://stackoverflow.com/questions/27213381/how-to-create-circular-progressbar-in-android