基于Android自带插入器的图形波动效果

对于Android的各种动画我们并不陌生，但是可能很多同学不知道Interpolator到底是什么，以及系统自带的几种Interpolator的效果是什么样子，所以我总结一下这几种插入器。

Interpolator 被用来修饰动画效果，定义动画的变化率
1.AccelerateInterpolator 加速插值器
AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速

2.AccelerateDecelerateInterpolator 加速减速插值器
AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢，在中间的时候加速

3.LinearInterpolator 线性插值器
LinearInterpolator 以常量速率改变

4.BounceInterpolator 弹跳插值器
BounceInterpolator 动画结束的时候弹起

5.AnticipateInterpolator 回荡秋千插值器
AnticipateInterpolator 开始的时候向后然后向前甩

6.AnticipateOvershootInterpolator
AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值

7.CycleInterpolator 正弦周期变化插值器
CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

8.OvershootInterpolator
OvershootInterpolator 向前甩一定值后再回到原来位置
首先我们要知道这几种插入器的动画效果，然后根据自己的需要来运用这些插入器

下面我们来实现一下图形波动的效果，话不多说，直接上代码

 private Paint wavePaint;//画笔
    private int color;//颜色
    private int radius;//半径
    private long animationTime = 2000;//动画时间

    protected float waveScale;
    protected int alpha;//透明度


    private Interpolator waveInterpolator;//插入器
    private Interpolator alphaInterpolator;

    private Animator animator;
    private AnimatorSet animatorSet;

    /**
     * 构造方法
     * @param color         color
     * @param radius        radius
     * @param animationTime time
     */

    public WaveDrawable(int color, int radius, long animationTime) {
        this(color, radius);
        this.animationTime = animationTime;
    }

    /**
     * 构造方法
     * @param color  colro
     * @param radius radius
     */
    public WaveDrawable(int color, int radius) {
        this.color = color;
        this.radius = radius;
        this.waveScale = 0f;
        this.alpha = 255;

        wavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        animatorSet = new AnimatorSet();

    }

    /***
     * 复写draw方法
     * 这个方法中可以画出你自己想要的图形
     * @param canvas
     */


    @Override
    public void draw(Canvas canvas) {

        final Rect bounds = getBounds();

        // 画圆
        wavePaint.setStyle(Paint.Style.FILL);
        wavePaint.setColor(color);
        wavePaint.setAlpha(alpha);
        canvas.drawCircle(bounds.centerX(), bounds.centerY(), radius * waveScale, wavePaint);

    }

    /**
     * 设置插入器方法
     * @param interpolator interpolator
     */
    public void setWaveInterpolator(Interpolator interpolator) {
        this.waveInterpolator = interpolator;
    }

    /**
     * 设置透明度插入器方法
     * @param interpolator interpolator
     */
    public void setAlphaInterpolator(Interpolator interpolator) {
        this.alphaInterpolator = interpolator;
    }

    /***
     * 开始动画
     */
    public void startAnimation() {
        animator = generateAnimation();
        animator.start();
    }

    /***
     * 停止动画
     */
    public void stopAnimation() {
        if (animator.isRunning()) {
            animator.end();
        }
    }


    public boolean isAnimationRunning() {
        if (animator != null) {
            return animator.isRunning();
        }
        return false;
    }

    /***
     * 设置透明度
     * @param alpha
     */
    @Override
    public void setAlpha(int alpha) {
        this.alpha = alpha;
        invalidateSelf();
    }

    /***
     * 设置图形颜色
     * @param cf
     */
    @Override
    public void setColorFilter(ColorFilter cf) {
        wavePaint.setColorFilter(cf);
    }

    @Override
    public int getOpacity() {
        return wavePaint.getAlpha();
    }


    protected void setWaveScale(float waveScale) {
        this.waveScale = waveScale;
        invalidateSelf();
    }

    protected float getWaveScale() {
        return waveScale;
    }

    private Animator generateAnimation() {

        //波动的动画
        ObjectAnimator waveAnimator = ObjectAnimator.ofFloat(this, "waveScale", 0f, 1f);
        waveAnimator.setDuration(animationTime);
        if (waveInterpolator != null) {
            waveAnimator.setInterpolator(waveInterpolator);
        }
        //动画循环次数
        waveAnimator.setRepeatCount(Animation.INFINITE);
        waveAnimator.setRepeatMode(Animation.INFINITE);

        //透明度动画
        ObjectAnimator alphaAnimator = ObjectAnimator.ofInt(this, "alpha", 255, 0);
        alphaAnimator.setDuration(animationTime);
        if (alphaInterpolator != null) {
            alphaAnimator.setInterpolator(alphaInterpolator);
        }
        //动画循环次数
        alphaAnimator.setRepeatCount(Animation.INFINITE);
        alphaAnimator.setRepeatMode(Animation.INFINITE);
        //两个动画结合使用
        animatorSet.playTogether(waveAnimator, alphaAnimator);

        return animatorSet;
    }

接下来的内容就很简单了我们看一下布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/spinner"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

最后看一下我们的Activity

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener{
    private String[] interpolatorsList = {"LinearInterpolator", "AccelerateDecelerateInterpolator",
            "AccelerateInterpolator", "AnticipateInterpolator", "AnticipateOvershootInterpolator",
            "BounceInterpolator", "CycleInterpolator", "DecelerateInterpolator", "OvershootInterpolator"};
    private WaveDrawable waveDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = (ImageView) findViewById(R.id.image);
        Spinner spinner = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_dropdown_item_1line, interpolatorsList);
        spinner.setAdapter(adapter);
        spinner.setOnItemSelectedListener(this);

        waveDrawable = new WaveDrawable(Color.parseColor("#8e44ad"), 500);
        imageView.setBackground(waveDrawable);


    }



    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        Interpolator interpolator;

        switch (position) {
            case 0:
                interpolator = new LinearInterpolator();
                break;
            case 1:
                interpolator = new AccelerateDecelerateInterpolator();
                break;
            case 2:
                interpolator = new AccelerateInterpolator();
                break;
            case 3:
                interpolator = new AnticipateInterpolator();
                break;
            case 4:
                interpolator = new AnticipateOvershootInterpolator();
                break;
            case 5:
                interpolator = new BounceInterpolator();
                break;
            case 6:
                interpolator = new CycleInterpolator(3);
                break;
            case 7:
                interpolator = new DecelerateInterpolator();
                break;
            case 8:
                interpolator = new OvershootInterpolator();
                break;
            default:
                interpolator = new LinearInterpolator();
                break;
        }
        waveDrawable.setWaveInterpolator(interpolator);
        waveDrawable.startAnimation();
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {

    }
}

运行一下我们的工程，你就会看到不同插入器的不同效果了。