android扇形動畫彈出icon的功能

1，設定布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="12dp"

 >
<RelativeLayout
    android:id="@+id/rel_diaocha"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/icon_tibao_bg"
    android:layout_marginBottom="200dp"
    android:visibility="gone"
    >
    <TextView
        android:id="@+id/iv_icon1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/icon_tibao_diaocha"
        android:text="調查"
        android:textSize="10sp"
        android:textColor="@color/white"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rel_kaoshi"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/icon_tibao_bg"
    android:layout_marginBottom="200dp"
    android:visibility="gone"
    >
    <TextView
        android:id="@+id/iv_icon2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/icon_tibao_kaoshi"
        android:text="考試"
        android:textSize="10sp"
        android:textColor="@color/white"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rel_toupiao"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:background="@drawable/icon_tibao_bg"
    android:layout_marginBottom="200dp"
    android:visibility="gone"
    >
    <TextView
        android:id="@+id/iv_icon3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/icon_tibao_toupiao"
        android:text="投票"
        android:textSize="10sp"
        android:textColor="@color/white"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

    <RelativeLayout
        android:id="@+id/rel_biaodan"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="200dp"
        android:background="@drawable/icon_tibao_bg"
        android:visibility="gone"
        >

        <TextView
            android:id="@+id/iv_icon4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:drawableTop="@drawable/icon_tibao_biaodan"
            android:text="表單"
            android:textColor="@color/white"
            android:textSize="10sp" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/iv_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="200dp"
        />
   <!-- android:background="@drawable/icon_tibao_start"-->
</RelativeLayout>

2，動畫設定

2.1 打開動畫的方法；

private void showIcon() {

    //設定動畫時間
    int duration = 1000;
    //動畫距離,螢幕寬度的60%
    float distance = getScreenWidth() * 0.1f;
    float distance2 = getScreenWidth() * 0.3f;
    //相鄰ImageView運動角度式22.5度
    float angle0 = (float) (90f * Math.PI / 180);//調查
    float angle1 = (float) (150f * Math.PI / 180);//考試
    float angle2 = (float) (210f * Math.PI / 180);//投票
    float angle3 = (float) (270f * Math.PI / 180);//表單

    //icon1
    ///  PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("TranslationX", 0f, distance);
    //icon2
    PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance2 * Math.cos(angle0)));
    PropertyValuesHolder p12 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance2 * Math.sin(angle0)));
    //icon2
    PropertyValuesHolder p21 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance2 * Math.cos(angle1)));
    PropertyValuesHolder p22 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance2 * Math.sin(angle1)));
    //icon3
    PropertyValuesHolder p31 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance2 * Math.cos(angle2)));
    PropertyValuesHolder p32 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance2 * Math.sin(angle2)));
    //icon4
    PropertyValuesHolder p41 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance2 * Math.cos(angle3)));
    PropertyValuesHolder p42 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance2 * Math.sin(angle3)));
    //icon5
    //  PropertyValuesHolder p5 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -distance);

    ObjectAnimator animator1 = ObjectAnimator.ofPropertyValuesHolder(relDiaocha, p1, p12).setDuration(duration);
    ObjectAnimator animator2 = ObjectAnimator.ofPropertyValuesHolder(relKaoshi, p21, p22).setDuration(duration);
    ObjectAnimator animator3 = ObjectAnimator.ofPropertyValuesHolder(relToupiao, p31, p32).setDuration(duration);
    ObjectAnimator animator4 = ObjectAnimator.ofPropertyValuesHolder(relBiaodan, p41, p42).setDuration(duration);
    //  ObjectAnimator animator5 = ObjectAnimator.ofPropertyValuesHolder(relBiaodan, p5).setDuration(duration);

    //添加自由落體效果插值器
    animator1.setInterpolator(new BounceInterpolator());
    animator2.setInterpolator(new BounceInterpolator());
    animator3.setInterpolator(new BounceInterpolator());
    animator4.setInterpolator(new BounceInterpolator());
    //  animator5.setInterpolator(new BounceInterpolator());

    //啟動動畫
    animator1.start();
    animator2.start();
    animator3.start();
    animator4.start();
    //   animator5.start();
}

2.2 關閉動畫的方法

/**
 * /**
 * * 動畫實作，因為除了沿X,Y軸的圖示，另外3個都有角度，所有，要有三角函數計算
 * * 使圖示位移距離相等，實作扇形效果
 */

private void closeIcon() {

    //設定動畫時間
    int duration = 1000;
    //動畫距離,螢幕寬度的60%
    float distance2 = getScreenWidth() * 0.3f;
    //相鄰ImageView運動角度式22.5度
    float angle0 = (float) (90f * Math.PI / 180);//調查
    float angle1 = (float) (150f * Math.PI / 180);//考試
    float angle2 = (float) (210f * Math.PI / 180);//投票
    float angle3 = (float) (270f * Math.PI / 180);//表單

    //icon1
    ///  PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("TranslationX", 0f, distance);
    //icon2
    PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("TranslationX", (float) (distance2 * Math.cos(angle0)), 0f);
    PropertyValuesHolder p12 = PropertyValuesHolder.ofFloat("TranslationY", -(float) (distance2 * Math.sin(angle0)), 0f);
    //icon2
    PropertyValuesHolder p21 = PropertyValuesHolder.ofFloat("TranslationX", (float) (distance2 * Math.cos(angle1)), 0f);
    PropertyValuesHolder p22 = PropertyValuesHolder.ofFloat("TranslationY", -(float) (distance2 * Math.sin(angle1)), 0f);
    //icon3
    PropertyValuesHolder p31 = PropertyValuesHolder.ofFloat("TranslationX", (float) (distance2 * Math.cos(angle2)), 0f);
    PropertyValuesHolder p32 = PropertyValuesHolder.ofFloat("TranslationY", -(float) (distance2 * Math.sin(angle2)), 0f);
    //icon4
    PropertyValuesHolder p41 = PropertyValuesHolder.ofFloat("TranslationX", (float) (distance2 * Math.cos(angle3)), 0f);
    PropertyValuesHolder p42 = PropertyValuesHolder.ofFloat("TranslationY", -(float) (distance2 * Math.sin(angle3)), 0f);
    //icon5
    //  PropertyValuesHolder p5 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -distance);

    ObjectAnimator animator1 = ObjectAnimator.ofPropertyValuesHolder(relDiaocha, p1, p12).setDuration(duration);
    ObjectAnimator animator2 = ObjectAnimator.ofPropertyValuesHolder(relKaoshi, p21, p22).setDuration(duration);
    ObjectAnimator animator3 = ObjectAnimator.ofPropertyValuesHolder(relToupiao, p31, p32).setDuration(duration);
    ObjectAnimator animator4 = ObjectAnimator.ofPropertyValuesHolder(relBiaodan, p41, p42).setDuration(duration);
    //  ObjectAnimator animator5 = ObjectAnimator.ofPropertyValuesHolder(relBiaodan, p5).setDuration(duration);

    //添加自由落體效果插值器
    animator1.setInterpolator(new BounceInterpolator());
    animator2.setInterpolator(new BounceInterpolator());
    animator3.setInterpolator(new BounceInterpolator());
    animator4.setInterpolator(new BounceInterpolator());
    //  animator5.setInterpolator(new BounceInterpolator());

    //啟動動畫
    animator1.start();
    animator2.start();
    animator3.start();
    animator4.start();
    //   animator5.start();
}

3，點選觸發動畫

@Override
public void onClick(View v) {

//點選最外層icon，展開icon動畫
if (isOpen) { //打開狀态
    //關閉
    ivStart.setBackgroundResource(R.drawable.icon_tibao_start);
    relBiaodan.setVisibility(View.GONE);
    relDiaocha.setVisibility(View.GONE);
    relKaoshi.setVisibility(View.GONE);
    relToupiao.setVisibility(View.GONE);
    closeIcon();
    isOpen = false;
} else {//關閉狀态
    //打開
    ivStart.setBackgroundResource(R.drawable.icon_tibao_end);
    relBiaodan.setVisibility(View.VISIBLE);
    relDiaocha.setVisibility(View.VISIBLE);
    relKaoshi.setVisibility(View.VISIBLE);
    relToupiao.setVisibility(View.VISIBLE);
    showIcon();
    isOpen = true;
}

最後效果：

android扇形動畫彈出icon的功能

android扇形動畫彈出icon的功能

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯