▲ Android 自定义搜索附近的动画

最近把视图动画翻出来看一下，要知道动画主要分为两个主类，视图动画&属性动画。我这个功能就是用视图动画来实现的。老规矩先看一下效果图

效果图

实现思路 用的是一个缩放的动画，还有一个渐变的动画来实现的，放大的时候透明度逐渐变弱。细心的你一定看到有4个圆环，没错我这里用了4个ImageView，来执行这个这个组合动画，只不过每个View执行的时候，延迟一些时间。

上代码

（布局文件）

代码语言：javascript复制

<?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

代码语言：javascript复制

<?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

代码语言：javascript复制

<?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>

逻辑代码

代码语言：javascript复制

/**
 * Created by Xia_焱 on 2018/9/1.
 * e-mail：XiahaotianV@163.com
 */

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() {

    }
}

这样就可以实现了，那个基类我偷点懒 =_=! 就不换了

alpha imageview scale view 动画

0 人点赞