Android补间动画-雷达扫描效果

动画扫描效果

先看一下效果：

实现过程

1. 首先在布局中添加四个imageview，背景色可以设置成橘黄色，通过shape文件将四个imageview设置成圆形。
   布局文件demo.xml

<ImageView
        android:id="@+id/iv_scan_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="center"
        android:background="@drawable/shape_round"/>

    <ImageView
        android:id="@+id/iv_scan_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="center"
        android:background="@drawable/shape_round"/>

    <ImageView
        android:id="@+id/iv_scan_3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="center"
        android:background="@drawable/shape_round"/>

    <ImageView
        android:id="@+id/iv_scan_4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="center"
        android:background="@drawable/shape_round"/>

shape文件 shape_round.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
<!--    <corners android:radius="35dp" />-->
    <solid android:color="#FF7F24"/>
</shape>

2. 然后创建动画文件，在创建动画文件之前先分析一下要实现的效果：要实现效果必须使控件放大的同时降低透明度，所以整个过程包含两个动画，scale和alpha动画。
   anim_scan.xml动画文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3200">
<!--    时长3s-->
<!--    缩放动画 以控件自身中心点为起始点，放大到自身的3倍大小-->
    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3"
        android:fillAfter="true"
        android:repeatMode="restart"
        android:repeatCount="infinite"/>
    
<!--    透明度动画 从不透明到透明-->
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:repeatCount="infinite"/>
</set>

3. 执行动画，为了达到效果，需要对四个动画分别设置不同的延迟时间

btn_scan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation scan=AnimationUtils.loadAnimation(ViewAnimDemoActivity.this,R.anim.anim_scan);
                
                iv_scan_1.startAnimation(scan);
                Animation scan2=AnimationUtils.loadAnimation(ViewAnimDemoActivity.this,R.anim.anim_scan);

                scan2.setStartOffset(1200);
                iv_scan_2.startAnimation(scan2);
                Animation scan3=AnimationUtils.loadAnimation(ViewAnimDemoActivity.this,R.anim.anim_scan);

                scan3.setStartOffset(1800);
                iv_scan_3.startAnimation(scan3);
                Animation scan4=AnimationUtils.loadAnimation(ViewAnimDemoActivity.this,R.anim.anim_scan);

                scan4.setStartOffset(2400);
                iv_scan_4.startAnimation(scan4);
            }
        });