Drawable动画实现

前言

Android中有很多有趣的简单几何元素自定义动画效果，比如圆形转圈这类加载动画都是很常见的，如果使用自定义的View来实现这种动画效果实际比较复杂而且很难在其他的View中复用。有种思路就是使用Drawable来实现动画效果，在把它作为View的前景或背景图设置上去，这样的动画效果就被封装到一个简单的Drawable，可以在不同的View之间重复使用。

属性动画实现

既然使用Drawable来实现动画下过，自然要使用自定义的Drawable对象，同时还要使用一个Animatable接口提供的方法来做动画控制实现。Drawable中需要实现的接口比较多，需要每个方法的功能都简单了解，Animatable比较简单这里不再赘述。

接口名	作用
draw(Canvas canvas)	在附加到的View里绘制Drawable内容
onBoundsChange(Rect bounds)	当View的大小位置改变时回调
setAlpha(int alpha)	设置当前Drawable的透明度
setColorFilter(ColorFilter colorFilter)	设置颜色滤镜
getOpacity()	返回Drawable的具体类型，可以是透明、半透明、全透明等

现在来实现一个简单的圆圈逐渐放大的动画，Drawable在创建之后还要附加到View中才能真正确定大小，所以需要在它的onBoundsChanged方法里定义各种初始变量和动画。

@Override
protected void onBoundsChange(Rect bounds) {super.onBoundsChange(bounds);width = bounds.width();height = bounds.height();Log.d(TAG, "width = " + width + ", height = " + height);if (valueAnimator != null && valueAnimator.isRunning()) {valueAnimator.cancel();}valueAnimator = ValueAnimator.ofInt(CommonUtils.dp2px(10), Math.min(width, height) / 2);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {// 对圆形的半径值做属性动画mRadius = (int) animation.getAnimatedValue();Log.d(TAG, "width = " + width + ", height = " + height);Log.d(TAG, "mRadius = " + mRadius);invalidateSelf();}});// 设置值动画的各种参数valueAnimator.setStartDelay(mDelay);valueAnimator.setDuration(1000);valueAnimator.setRepeatCount(ValueAnimator.INFINITE);valueAnimator.setRepeatMode(ValueAnimator.REVERSE);if (mIsStarted) {valueAnimator.start();}
}

在onBoundsChanged方法里获取了当前Drawable要展示的宽高，同时定义了圆形的半径从小到大的值动画效果，每次更新值的时候都会调用Drawable.invalidateSelf()方法来更新当前展示，也就是调用onDraw里的绘制逻辑。

public CircleDrawable() {paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStrokeWidth(CommonUtils.dp2px(2));paint.setStyle(Paint.Style.STROKE);mRadius = CommonUtils.dp2px(10);
}@Override
public void draw(@NonNull Canvas canvas) {canvas.drawCircle(width / 2, height / 2, mRadius, paint);
}

上面的draw代码里只是做了绘制一个圆的操作，随着半径不断的变化Drawable上展示的圆也不断的改变大小，这样就实现了简单的圆形大小不断变化的动画。Drawable可以单独使用也可以包装其他的Drawable来实现复杂的效果，比如ClipDrawable、StateListDrawable内部都可以使用BitmapDrawable，并且通过特殊的接口来实现内部BitmapDrawable的展示。这里定义一个包含多个圆形的Drawable，它会包含多个不同大小的圆形不断改变的动画效果。

public class MultiCircleDrawable extends Drawable implements Animatable, Drawable.Callback {private final int START_DELAY = 200;private CircleDrawable[] circleDrawables = new CircleDrawable[] {new CircleDrawable(),new CircleDrawable(),new CircleDrawable()};public MultiCircleDrawable() {for (int i = 0; i < circleDrawables.length; i++) {circleDrawables[i].setStartDelay(i * START_DELAY);circleDrawables[i].setCallback(this);}}....@Overridepublic void draw(@NonNull Canvas canvas) {for (CircleDrawable drawable : circleDrawables) {drawable.draw(canvas);}}@Overrideprotected void onBoundsChange(Rect bounds) {super.onBoundsChange(bounds);for (CircleDrawable drawable : circleDrawables) {drawable.onBoundsChange(bounds);}}@Overridepublic void setAlpha(int alpha) {for (CircleDrawable drawable : circleDrawables) {drawable.setAlpha(alpha);}}@Overridepublic void setColorFilter(@Nullable ColorFilter colorFilter) {for (CircleDrawable drawable : circleDrawables) {drawable.setColorFilter(colorFilter);}}@Overridepublic int getOpacity() {return PixelFormat.OPAQUE;}@Overridepublic void invalidateDrawable(@NonNull Drawable who) {invalidateSelf();}@Overridepublic void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {}@Overridepublic void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {}
}

我们知道Drawable只能依附在View对象上才能正常展示，MultiCircleDrawable会被依附到View里，它内部的CircleDrawable就不会被依附到View上，但是内部的CircleDrawable又需要通知View做更新操作，这时候就需要将MultiCircleDrawable来做内部CircleDrawable的回调对象，当它的invalidateDrawable被回调时调用invalidateSelf通知View对象做刷新操作。

Drawable.CallBack实现

public interface Callback {// 使当前的Drawable对象非法，最终导致Drawable依附的View重新绘制void invalidateDrawable(@NonNull Drawable who);// 调用Drawable相关的Runnable执行void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when);// 取消Drawable相关的Runnable执行void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what);
}

上面的Drawable.Callback接口是View实现的接口之一，View内部会处理回调发生时的逻辑，查看源码如下所示。

public class View implements Drawable.Callback, KeyEvent.Callback,AccessibilityEventSource {// View执行    @Overridepublic void invalidateDrawable(@NonNull Drawable drawable) {if (verifyDrawable(drawable)) {final Rect dirty = drawable.getDirtyBounds();final int scrollX = mScrollX;final int scrollY = mScrollY;invalidate(dirty.left + scrollX, dirty.top + scrollY,dirty.right + scrollX, dirty.bottom + scrollY);rebuildOutline();}}// 向主线程中post一个Runnable@Overridepublic void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {if (verifyDrawable(who) && what != null) {final long delay = when - SystemClock.uptimeMillis();if (mAttachInfo != null) {mAttachInfo.mViewRootImpl.mChoreographer.postCallbackDelayed(Choreographer.CALLBACK_ANIMATION, what, who,Choreographer.subtractFrameDelay(delay));} else {getRunQueue().postDelayed(what, delay);}}}    // 从主线程中清除要执行Runnable@Overridepublic void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {if (verifyDrawable(who) && what != null) {if (mAttachInfo != null) {mAttachInfo.mViewRootImpl.mChoreographer.removeCallbacks(Choreographer.CALLBACK_ANIMATION, what, who);}getRunQueue().removeCallbacks(what);}}
}

在Drawable源码中会直接调用Callback来实现刷新，调度任务和取消调度任务的操作，从实现的源代码中可以看出调用invalidateSelf就会回调Callback的invalidateDrawable，前面的MultiDrawable就实现了这个方法invalidateDrawable，而附加到View里的Drawable它的callback就是View回调的就是上面的View.invalidateDrawable，实现View的重新绘制，在View.onDraw里会调用Drawable.onDraw最终实现Drawable内容的刷新操作。

// Drawable内部实现
public void invalidateSelf() {final Callback callback = getCallback();if (callback != null) {callback.invalidateDrawable(this);}
}public void scheduleSelf(@NonNull Runnable what, long when) {final Callback callback = getCallback();if (callback != null) {callback.scheduleDrawable(this, what, when);}
}public void unscheduleSelf(@NonNull Runnable what) {final Callback callback = getCallback();if (callback != null) {callback.unscheduleDrawable(this, what);}
}

简单涟漪效果

涟漪效果其实就是用户点击View之后会出现圆形逐渐变大最后再消失的动画效果，有了前面的圆大小改变动画，这里再通过scheduleSelf和unscheduleSelf接口来实现动画效果。首先定一个一个Button它内部包含一个有涟漪效果的Drawable。

public class RippleButton extends AppCompatButton {private RippleDrawable mDrawable;public RippleButton(Context context) {this(context, null);}public RippleButton(Context context, AttributeSet attrs) {this(context, attrs, 0);}public RippleButton(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// 自定义的涟漪效果DrawablemDrawable = new RippleDrawable();mDrawable.setCallback(this);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);// 在View大小改变的时候设置Drawable大小mDrawable.setBounds(0, 0, getWidth(), getHeight());}@Overrideprotected void onDraw(Canvas canvas) {// 绘制Drawable内容mDrawable.draw(canvas);super.onDraw(canvas);}@Overrideprotected boolean verifyDrawable(@NonNull Drawable who) {return mDrawable == who || super.verifyDrawable(who);}@Overridepublic boolean onTouchEvent(MotionEvent event) {// 拦截用户触摸事件mDrawable.onTouchEvent(event);super.onTouchEvent(event);return true;}
}

自定义Button实现非常简单，需要注意onSizeChange的时候需要通知Drawable当前View的尺寸发生变化，Drawable内部实现初始化操作，后面的onTouchEvent一定要返回true，这样ACTION_DOWN之后的ACTION_MOVE、ACTION_UP才会继续派发下来。

public class RippleDrawable extends Drawable {private Paint mPaint;private int mRadius;private int mWidth;private int mHeight;private int mMaxRadius;private int mPivotX;private int mPivotY;private int mMotionX;private int mMotionY;private float mProgress = 0.0f;private int mAlpha = 255;public RippleDrawable() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setDither(true);mPaint.setColor(Color.CYAN);mPaint.setStyle(Paint.Style.FILL);}// 绘制圆形@Overridepublic void draw(@NonNull Canvas canvas) {canvas.drawCircle(mPivotX, mPivotY, mRadius, mPaint);}// 记录当前Drawable的尺寸@Overrideprotected void onBoundsChange(Rect bounds) {super.onBoundsChange(bounds);mWidth = bounds.width();mHeight = bounds.height();mMaxRadius = Math.min(mWidth, mHeight);}@Overridepublic void setAlpha(int alpha) {mPaint.setAlpha(alpha);}@Overridepublic void setColorFilter(@Nullable ColorFilter colorFilter) {mPaint.setColorFilter(colorFilter);}@Overridepublic int getOpacity() {return PixelFormat.OPAQUE;}// 根据ACTION_DOWN展示圆心位置public void onTouchEvent(MotionEvent event) {switch (event.getActionMasked()) {case MotionEvent.ACTION_DOWN:onTouchDown(event);break;case MotionEvent.ACTION_MOVE:onTouchMove(event);break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:onTouchUp(event);break;}}private void onTouchUp(MotionEvent event) {}private void onTouchMove(MotionEvent event) {}private void onTouchDown(MotionEvent event) {mMotionX = (int) event.getX();mMotionY = (int) event.getY();mRadius = 0;mProgress = 0.0f;mAlpha = 255;setAlpha(mAlpha);unscheduleSelf(mEnterRunnable);// 每10ms开始一次重绘scheduleSelf(mEnterRunnable, SystemClock.uptimeMillis() + 10);}private Interpolator interpolator = new AccelerateInterpolator();private Runnable mEnterRunnable = new Runnable() {@Overridepublic void run() {// 如果重绘完成，开始执行退出动画if (mProgress >= 1.0f) {unscheduleSelf(mExitRunnable);scheduleSelf(mExitRunnable, SystemClock.uptimeMillis() + 10);return;}// 不断增大圆形半径mProgress += 0.05f;mRadius = (int) (mMaxRadius * interpolator.getInterpolation(mProgress));mPivotX = mMotionX;mPivotY = mMotionY;invalidateSelf();scheduleSelf(mEnterRunnable, SystemClock.uptimeMillis() + 10);}};// 退出动画private Runnable mExitRunnable = new Runnable() {@Overridepublic void run() {int alpha = mAlpha - 10;if (alpha > 0) {// 从不透明变成完全透明实现Drawable内容不可见mAlpha = alpha;setAlpha(alpha);invalidateSelf();scheduleSelf(this, SystemClock.uptimeMillis() + 10);} else {mAlpha = 0;setAlpha(mAlpha);invalidateSelf();}}};
}

RippleDrawable内部onBoundsChange会在View的onSizeChange发生时被回调，会记录下当前Drawable展示的宽高和圆形最大的半径值，在draw方法中会根据轴心和半径绘制圆形。内部的mEnterRunnable表示用户按下时执行的圆形不断变大动画，mExitRunnable表示变大动画执行完成后圆形从不透明变成全透明最终消失的动画，两个动画都是通过Runnable的递归实现。