ValueAnimator之圆形波纹效果

ValueAnimato主要功能：对指定值区间做动画运算，我们通过对运算过程做监听来自己操作控件。
简单来说，ValueAnimator不会对控件做任何操作，我们可以给它设置从哪个值运动到哪个值，通过监听这些值的渐变过程来自己操作控件。

使用ValueAnimator，简单的两步就能实现：

第一步：初始化 ValueAnimator，并设置开始值和结束值，并start();

ValueAnimator animator = ValueAnimator.ofInt(0,400);  
animator.setDuration(1000);  
animator.start(); 

• 这里创建了一个从 0 到 400 的动画，动画时长是 1s。

第二步：给 ValueAnimator 添加监听器，通过 getAnimatedValue() 拿到变化值，然后我们手动更新控件的变化。

ValueAnimator animator = ValueAnimator.ofInt(0,400);  
animator.setDuration(1000);  
  
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
    @Override  
    public void onAnimationUpdate(ValueAnimator animation) {  
        int curValue = (int)animation.getAnimatedValue();  
        Log.d("qijian","curValue:" + curValue);  
    }  
});  
animator.start(); 

• 通过 addUpdateListener 添加监听器，在监听传回的结果中，是表示的当前状态 ValueAnimator 的实例，我们通过 animation.getAnimatedValue() 得到当前值，更新控件的变化。

波纹的创建

波纹的创建也是这个原理，不同的是渐变的圆形波纹效果需要画两个不同的圆，内圆和外圆。

直接上代码：

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

public class WaveView extends View {

    private int mSize;
    private int mCurInnerRadius;
    private int mCurOuterRadius;

    private Paint mInnerPaint; //内圆
    private Paint mOuterPaint; //外圆
    private Paint mBgPaint;

    private ValueAnimator mAnimator;

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    /**
     * 设置波纹大小
     *
     * @param size 大小
     */
    public void setSize(int size) {
        mSize = size;

        mCurInnerRadius = mSize / 6;
        mCurOuterRadius = mSize / 4;
        invalidate();
    }

    private void init() {
        mInnerPaint = new Paint();
        mInnerPaint.setColor(0xcc00b5e2);
        mInnerPaint.setStyle(Paint.Style.FILL);

        mOuterPaint = new Paint();
        mOuterPaint.setColor(0x3300b5e2);
        mOuterPaint.setStyle(Paint.Style.FILL);

        mBgPaint = new Paint();
        mBgPaint.setColor(Color.TRANSPARENT);
        mBgPaint.setStyle(Paint.Style.FILL);

        //设置该波纹能够点击
        setClickable(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        //重新设置波纹的大小
        setMeasuredDimension(mSize, mSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int w = getWidth();
        int h = getHeight();
        canvas.drawRect(0, 0, w, h, mBgPaint);
        //先画外部圆，
        canvas.drawCircle(w / 2f, h / 2f, mCurOuterRadius, mOuterPaint);
        //再画内部圆
        canvas.drawCircle(w / 2f, h / 2f, mCurInnerRadius, mInnerPaint);
    }

    /**
     * 使用属性动画不断改变内部外部圆的半径，导致重绘
     */
    public void startAnim() {
        if (mAnimator == null) {
            mAnimator = ValueAnimator.ofInt(mSize / 6, mSize / 3);//初始化，并设置开始值和结束值
            mAnimator.setDuration(2000);//设置动画总时长
            mAnimator.setRepeatMode(ValueAnimator.RESTART);//设置重复模式
            mAnimator.setRepeatCount(ValueAnimator.INFINITE); //设置动画重复次数 ，INFINITE---无限重复
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    Integer value = (Integer) animation.getAnimatedValue();
                    mCurInnerRadius = value;
                    mCurOuterRadius = mCurInnerRadius * 3 / 2;
                    invalidate();
                }
            });
        }
        mAnimator.start();
    }

    /**
     * 退出动画
     */
    public void exitAnim() {
        if (mAnimator != null) {
            mAnimator.cancel();
            mAnimator = null;
        }
    }
}

其使用方法：

wave = findViewById(R.id.wave);
wave.setSize(400); //设置波纹的大小
wave.startAnim(); //开始动画
wave.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           Log.e("TAG----", "波纹的点击事件");
       }
});

归总

ValueAnimator 常用的方法：

• void addUpdateListener(ValueAnimator.AnimatorUpdateListener listener)：添加值变化监听器。主要监听值变化，实现动画。
• void addListener(Animator.AnimatorListener listener)：添加动画状态监听器。重写动画开始、结束、取消、重复四个方法，监听不同状态。
• void cancel (): 取消动画。
• void end ()：让动画到达最后一帧。
• void start()：开始动画。
• void pause()：暂停动画。
• void resume()：继续动画。
• void reverse ()：反向播放动画。
• boolean isRunning()：是否在运行中。
• boolean isStarted()：是否已经开始

ValueAnimator 属性相关方法：

• void setCurrentFraction(float fraction)：设置当前时间因子。即时间到达的百分比。
• float getAnimatedFraction()：获取当前时间因子。即时间到达的百分比。
• void setCurrentPlayTime (long playTime)：设置当前的时间，取值为0-duration，单位毫秒。
• long getCurrentPlayTime ()：获取当前的时间，单位毫秒。
• ValueAnimator setDuration (long duration)：设置动画总时长，单位毫秒。
• long getDuration ()：获取动画总时长，单位毫秒。
• void setFrameDelay (long frameDelay)：设置每一帧之间间隔多少毫秒。
• long getFrameDelay ()：获取每一帧之间间隔多少毫秒。
• void setInterpolator (TimeInterpolator value)：设置动画的 Interpolator，和 View Animation 的 Interpolator通用。
• TimeInterpolator getInterpolator ()：获取当前使用的插值器。
• void setRepeatCount(int value)：设置重复次数。
• int getRepeatCount()：获取重复次数。
• void setRepeatMode(int value)：设置重复模式。有 RESTART 和 REVERSE 两种。
• int getRepeatMode()：获取重复模式。
• void setStartDelay(long startDelay)：设置开始前延迟毫秒数。
• long getStartDelay()：获取开始前延迟毫秒数。
• void getAnimatedValue()：获取计算出来的当前属性值。
• getAnimatedValue(String propertyName)：获取计算出来的当前某个属性的值。
• void setEvaluator(TypeEvaluator value)：设置求值器。
• void setFloatValues(float… values)：设置 Float 型变化值，一般设置初始值和结束值，当然你也可以设置中间值，因为这是一个可变参数，长度可变。
• void setIntValues(int… values)：设置 Int 型变化值，一般设置初始值和结束值，当然你也可以设置中间值，因为这是一个可变参数，长度可变。
• setObjectValues(Object… values)：设置Object型变化值，一般设置初始值和结束值，当然你也可以设置中间值，因为这是一个可变参数，长度可变。