▲ Android 自定義搜索附近的動畫

最近把視圖動畫翻出來看一下，要知道動畫主要分爲兩個主類，視圖動畫&屬性動畫。我這個功能就是用視圖動畫來實現的。老規矩先看一下效果圖

效果圖

實現思路
用的是一個縮放的動畫，還有一個漸變的動畫來實現的，放大的時候透明度逐漸變弱。細心的你一定看到有4個圓環，沒錯我這裏用了4個ImageView，來執行這個這個組合動畫，只不過每個View執行的時候，延遲一些時間。

上代碼

（佈局文件）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f8f8f8"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_x1"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:background="@drawable/scan_cover"
        />

    <ImageView
        android:id="@+id/iv_x2"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:clickable="true"
        android:background="@drawable/scan_cover"
        />

    <ImageView
        android:id="@+id/iv_x3"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:clickable="true"
        android:background="@drawable/scan_cover"
        />

    <ImageView
        android:id="@+id/iv_x4"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:clickable="true"
        android:background="@drawable/scan_cover"
       />

    <TextView
        android:id="@+id/start_can"
        android:layout_width="135dp"
        android:layout_height="135dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:background="@mipmap/icon_f" />

</FrameLayout>

scan_cover XML

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

動畫 scale_alpha

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3100">
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:toXScale="3"
        android:toYScale="3" />
    <alpha
        android:repeatCount="infinite"
        android:fromAlpha="0.5"
        android:toAlpha="0" />
</set>

邏輯代碼

/**
 * Created by Xia_焱 on 2018/9/1.
 * e-mail：[email protected]
 */

public class AnimationActivity  extends BaseActivity{

    private ImageView circle1;
    private ImageView circle2;
    private ImageView circle3;
    private ImageView circle4;

    @Override
    public int getLayoutId() {
        return R.layout.activity_animation;
    }

    @Override
    protected void initView() {
        final Animation animation1 = android.view.animation.AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.scale_alpha);
        final Animation animation2 = android.view.animation.AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.scale_alpha);
        final  Animation animation3 = android.view.animation.AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.scale_alpha);
        final Animation animation4 = android.view.animation.AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.scale_alpha);

        circle1 = findViewById(R.id.iv_x1);
        circle2 = findViewById(R.id.iv_x2);
        circle3 = findViewById(R.id.iv_x3);
        circle4 = findViewById(R.id.iv_x4);
        TextView start_can = findViewById(R.id.start_can);
        start_can.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circle1.startAnimation(animation1);

                animation2.setStartOffset(600);
                circle2.startAnimation(animation2);

                animation3.setStartOffset(1200);
                circle3.startAnimation(animation3);

                animation4.setStartOffset(1800);
                circle4.startAnimation(animation4);
            }
        });
    }

    @Override
    protected void initData() {

    }
}

這樣就可以實現了，那個基類我偷點懶 =_=! 就不換了