Drawable绘制过程源码分析和自定义Drawable实现动画

1. 概述

对于Drawable,相信大家都不陌生,而且用起来非常方便。在Android中Drawable代表可以在canvas上被绘制的一般抽象,与View或者其子类相比,不需要进行measure、layout操作,仅仅只需要进行draw操作。

除了简单的draw操作之外,Drawable还提供了许多通用的机制,以便与正在绘制的图形进行交互:
1> 为了告诉Drawable绘制的位置以及它的大小,setBounds方法必须在绘制之前被调用。通常可以通过getIntrinsicHeight和getIntrinsicWidth方法找到某些Drawable的首选大小,比如BitmapDrawable通过getIntrinsicHeight和getIntrinsicWidth方法获取bitmap的高和宽。

2> getPadding方法可以从某些Drawables返回关于如何放置其内容的信息。 例如,一个想要作为button widget的Drawable将需要返回将label正确放置在其内部的padding;LayerDrawable通过子Drawable的getPadding方法获取子Drawable的padding,从而进行padding的积累,后面会讲解LayerDrawable 中padding的积累导致的设计缺陷。

3> setState方法可以告知Drawable在哪个状态下绘制,例如“focus”,“selected”等。一些drawables可以根据所选状态修改其图像,比如StateListDrawable,关于StateListDrawable的使用可以参考Drawable Resources与Color State List Resource 中的StateListDrawable部分,如果想要知道StateListDrawable中是如何根据状态绘制的,可以参考StateListDrawable 类的onStateChange方法。

4> setLevel方法允许提供单个连续控制器来修改Drawable的显示,例如电池电量。 一些drawables可以根据当前level修改其图像,比如LevelListDrawable,关于LevelListDrawable的使用可以参考可绘制对象资源,如果想要知道LevelListDrawable中是如何根据level绘制的,可以参考LevelListDrawable类的onLevelChange方法。

5> Drawable可以通过Drawable.Callback接口回调其client来执行动画。 所有client都应该支持此interface(通过setCallback),以便动画可以正常工作。 一个简单的方法是通过系统设施,如android.view.View#setBackground(Drawable)和 android.widget.ImageView。在下面自定义Drawable的讲解中会详细介绍通过Drawable.Callback怎么实现动画。

从API 24开始,自定义的Drawable也可以在XML中使用,考虑到兼容性的问题,该特性目前并没有什么用,希望以后Google可以将该特性兼容到低版本。

2. 预备知识

2.1 Paint中setPathEffect(PathEffect effect)方法的使用

顾名思义,PathEffect是用来对Paint绘制的Path设置样式的,PathEffect本身并没有具体实现,我们通常使用其子类:



接下来就来看看这六个子类的具体效果:



上图中第一条曲线是原始的Path,从第二条开始依次使用了DashPathEffect、CornerPathEffect、DiscretePathEffect、PathDashPathEffect、ComposePathEffect和SumPathEffect。
实现代码如下所示:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test_path);
    pathView = findViewById(R.id.view_path);
    dashPathEffectView = findViewById(R.id.view_dash_path_effect);
    cornerPathEffectView = findViewById(R.id.view_corner_path_effect);
    discretePathEffectView = findViewById(R.id.view_discrete_path_effect);
    pathDashPathEffectView = findViewById(R.id.view_path_dash_path_effect);
    composePathEffectView = findViewById(R.id.view_compose_path_effect);
    sumPathEffectView = findViewById(R.id.view_sum_path_effect);

    Path path = new Path();
    path.moveTo(50, 30);
    path.lineTo(200, 230);
    path.lineTo(400, 30);
    path.lineTo(600, 230);
    path.lineTo(800, 30);
    path.lineTo(1000, 230);

    float dashGap = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, getResources().getDisplayMetrics());
    float dashWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, getResources().getDisplayMetrics());
    DashPathEffect dashPathEffect = new DashPathEffect(new float[]{dashGap, dashWidth}, 0);
    CornerPathEffect cornerPathEffect = new CornerPathEffect(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()));
    DiscretePathEffect discretePathEffect = new DiscretePathEffect(3, 5);
    PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(
            makeConvexArrow(24.0f, 14.0f),    // "stamp"
            36.0f,                            // advance, or distance between two stamps
            0.0f,                             // phase, or offset before the first stamp
            PathDashPathEffect.Style.ROTATE); // how to transform each stamp
    ComposePathEffect composePathEffect = new ComposePathEffect(dashPathEffect, cornerPathEffect);
    SumPathEffect sumPathEffect = new SumPathEffect(cornerPathEffect, dashPathEffect);

    TrackShape trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()));
    TrackShapeDrawable trackShapeDrawable = new TrackShapeDrawable(trackShape);
    pathView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), dashPathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    dashPathEffectView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), cornerPathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    cornerPathEffectView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), discretePathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    discretePathEffectView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), pathDashPathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    pathDashPathEffectView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), composePathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    composePathEffectView.setBackground(trackShapeDrawable);
    trackShape = new TrackShape(path, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics()), sumPathEffect);
    trackShapeDrawable = new TrackShapeDrawable(trackShape);
    sumPathEffectView.setBackground(trackShapeDrawable);
}

private Path makeConvexArrow(float length, float height) {
    Path p = new Path();
    p.moveTo(0.0f, -height / 2.0f);
    p.lineTo(length - height / 4.0f, -height / 2.0f);
    p.lineTo(length, 0.0f);
    p.lineTo(length - height / 4.0f, height / 2.0f);
    p.lineTo(0.0f, height / 2.0f);
    p.lineTo(0.0f + height / 4.0f, 0.0f);
    p.close();
    return p;
}

上面代码中的TrackShapeDrawable和TrackShape在下面的自定义Drawable中会详细讲解,最终PathEffect会通过paint.setPathEffect(pathEffect);方式进行应用。
下面我们来分析一下PathEffect六个子类的使用方法:

DashPathEffect -- 用来实现Path的虚线效果
构造方法签名如下:
public DashPathEffect(float intervals[], float phase) 
虚线是由一系列的线段组成,intervals数组长度必须是大于等于2的偶数,偶数索引指定线段长度,而奇数索引指定线段之间间隔长度。
例如 PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4, 8}, 1);表示
绘制长度1的线段,再绘制长度2的空白,再绘制长度4的线段,再绘制长度8的空白,依次重复。
phase参数表示起始位置的偏移量(通过这个值可以实现虚线滚动的动画)

CornerPathEffect -- 用来实现Path拐角处的圆角效果
构造方法签名如下:
public CornerPathEffect(float radius)
1. radius 圆角的半径

DiscretePathEffect -- 用来实现Path的离散效果
构造方法签名如下:
public DiscretePathEffect(float segmentLength, float deviation)
将Path分割成长度为segmentLength的片段,然后在原始Path的基础上发生deviation大小的随机偏离

PathDashPathEffect -- 用来实现Path的虚线效果(虚线中每一个线段都用Path对应的图形代替)
构造方法签名如下:
public PathDashPathEffect(Path shape, float advance, float phase, Style style)
1. shape参数:虚线中每一个线段对应的Path
2. advance参数:每一个shape之间的间距
3. phase参数:起始位置的偏移量(通过这个值可以实现虚线滚动的动画)
4. style参数:代表每一个shape之间是如何衔接的,一共有如下三种类型:
             TRANSLATE  平移的方式
             ROTATE         旋转的方式
             MORPH         变形的方式
   上面三种方式的具体效果,大家有兴趣可以尝试一下

ComposePathEffect、SumPathEffect -- 用来将上面提到的PathEffect进行组合,然后作用于Path上
它们之间不同在于组合的方式,ComposePathEffect(PathEffect outerpe, PathEffect innerpe)会先将
innerpe的效果应用到Path上,然后再将outerpe的效果应用到 应用了innerpe效果的Path 上,
即outer(inner(path));而SumPathEffect(PathEffect first, PathEffect second)则会依次应用
两个效果到Path上,即 first(path) + second(path)。

2.2 Paint中setShader(Shader shader)方法的使用

顾名思义,Paint绘制任何对象(除了bitmap)时都是通过Shader得到color值,Shader本身并没有具体实现,我们通常使用其子类:



在讲解这五个子类之前,必须先了解一下Shader和Shader中的TileMode:

Shader:前面说过Paint绘制任何对象(除了bitmap)时都是通过Shader得到color值,
Shader获取指定坐标的color值是基于View布局区域(屏幕区域中排出状态栏区域和应用标题栏区域后
剩余的区域)对应的坐标系。

Shader的原始区域:也就是Shader子类(除了BitmapShader)的渐变区域,
BitmapShader的原始区域就是第一张bitmap绘制的区域。

CLAMP : 如果绘制区域超出Shader的原始区域,则通过复制边缘颜色来填充超过的区域。

REPEAT : 如果绘制区域超出Shader的原始区域,则通过在水平和垂直方向重复Shader的原始区域
来填充超过的区域。

MIRROR : 和REPEAT类似,不过是以镜像的方式重复。

注意:
1 BitmapShader可以在水平和垂直方向上同时设置TileMode,那么Shader会先在垂直方向上进行
TileMode对应的操作,然后再在水平方向上进行TileMode对应的操作。
2 绘制区域是不可能超过SweepGradient的原始区域。
3 LinearGradient和RadialGradient只在一个方向上进行渐变,因此应用一个TileMode就足够了。
4 在创建Shader子类的实例时,TileMode不可以为null,否则会报NullPointerException异常。

原理讲了这么多,接下来我们就通过例子来加以验证:

1. BitmapShader

水平和垂直方向上的TileMode都是CLAMP时:



上图中左上角的图片就是BitmapShader的原始区域。

实现代码如下

public class BitmapShaderView extends View {

    private Paint mPaint;

    public BitmapShaderView(Context context) {
        super(context);
    }

    public BitmapShaderView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BitmapShaderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bitmap_shader);
        mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0, 0, 1000, 1800, mPaint);
    }
}

结合运行截图和代码可以证明:
对于CLAMP,如果绘制区域超出Shader的原始区域,则通过复制边缘颜色来填充超过的区域。

水平和垂直方向上的TileMode分别是CLAMP,MIRROR:



上图中左上角的图片就是BitmapShader的原始区域。

实现代码和上面基本相同,不同的地方如下:

mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.MIRROR));

结合运行截图和代码可以证明:
1> 对于MIRROR,如果绘制区域超出Shader的原始区域,则通过在水平和垂直方向以镜像的方式重复Shader的原始区域来填充超过的区域。
2> BitmapShader可以在水平和垂直方向上同时设置TileMode,那么Shader会先在垂直方向上进行TileMode对应的操作,然后再在水平方向上进行TileMode对应的操作

水平和垂直方向上的TileMode都是REPEAT:



上图中左上角的图片就是BitmapShader的原始区域。

实现代码和上面基本相同,不同的地方如下:

mPaint.setShader(new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT));

结合运行截图和代码可以证明:
对于REPEAT,如果绘制区域超出Shader的原始区域,则通过在水平和垂直方向重复Shader的原始区域来填充超过的区域。

2. LinearGradient 线性渐变

上图第二条倾斜的渐变区域就是LinearGradient的原始区域。
实现代码与BitmapShader中的基本相同,不同的地方如下:

mPaint.setShader(new LinearGradient(200, 200, 400, 400, new int[]{Color.RED, Color.YELLOW}, null, Shader.TileMode.REPEAT));

代码中LinearGradient的前四个参数决定了LinearGradient的原始区域为上图第二条倾斜的渐变区域,第五个参数代表渐变的颜色值,关于最后连个参数,有兴趣的同学可以自己研究一下。

3. RadialGradient 径向渐变

上图最小的圆区域就是RadialGradient的原始区域。
实现代码和上面基本相同,不同的地方如下:

mPaint.setShader(new RadialGradient(400, 400, 100, new int[]{Color.RED, Color.YELLOW}, null, Shader.TileMode.REPEAT));

代码中RadialGradient的前三个参数决定了RadialGradient的原始区域为上图最小的圆区域,第四个参数代表渐变的颜色值,关于最后连个参数,有兴趣的同学可以自己研究一下。

4. SweepGradient 梯度渐变

实现代码和上面基本相同,不同的地方如下:

mPaint.setShader(new SweepGradient(400, 400, new int[]{Color.RED, Color.YELLOW}, null));

代码中SweepGradient的前两个参数决定了SweepGradient的原始区域为无限大区域(从而证明了 绘制区域是不可能超过SweepGradient的原始区域),第四个参数代表渐变的颜色值,关于最后一个参数,有兴趣的同学可以自己研究一下。

5. ComposeShader

顾名思义,ComposeShader是用来组合使用上面的任意两种Shader。



实现代码和上面基本相同,不同的地方如下:

mPaint.setShader(new ComposeShader(new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT),
        new LinearGradient(200, 200, 400, 400, new int[]{Color.RED, Color.TRANSPARENT}, null, Shader.TileMode.REPEAT), PorterDuff.Mode.SRC_OVER));

代码中ComposeShader的前两个参数代表两个被组合的Shader,第三个参数代表组合的方式,首先我们通过下图直观的看一下所有组合的方式:



代码中ComposeShader的第一个参数对应上图中的Des,第二个参数对应上图中的Src,讲到这里相信大家就应该可以看的懂上面的代码了。

讲到这里,大家有没有这样的疑问:怎么对通过Shader绘制的图形进行缩放、平移、旋转和错切操作呢?那么这是就要用到Shader的setLocalMatrix方法了,使用方式和下面2.3中讲到的用法一样,这里就不再赘叙了。

2.3 Path中transform方法的使用

Path中的transform方法是实现Path的scale、rotate、translate和skew动画的关键,下面举个例子来说明一下transform方法是如何使用的,首先看一下运行截图:



实现代码如下:

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test_path_transform);
    // 用来显示坐标轴的
    coordinateView = findViewById(R.id.view_coordinate);
    // 用来显示左上角的矩形
    testPathTransformView = findViewById(R.id.view_test_path);
    // 用来显示右上角的矩形
    testPathScaleView = findViewById(R.id.view_test_path_scale);
    // 用来显示左下角的矩形
    testPathRotateView = findViewById(R.id.view_test_path_rotate);
    // 用来显示右下角的矩形
    testPathSkewView = findViewById(R.id.view_test_path_skew);

    // 构建坐标轴对应的Path
    Path coordinate = new Path();
    coordinate.moveTo(0, 100);
    coordinate.lineTo(1000, 100);
    coordinate.lineTo(980, 80);
    coordinate.moveTo(1000, 100);
    coordinate.lineTo(980, 120);
    coordinate.moveTo(100, 0);
    coordinate.lineTo(100, 1000);
    coordinate.lineTo(80, 980);
    coordinate.moveTo(100, 1000);
    coordinate.lineTo(120, 980);
    TrackShape coordinateShape = new TrackShape(coordinate, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()));
    TrackShapeDrawable coordinateShapeDrawable = new TrackShapeDrawable(coordinateShape);
    coordinateView.setBackground(coordinateShapeDrawable);

    // 构建左上角矩形对应的Path
    Path rectPath = new Path();
    rectPath.addRect(new RectF(200, 200, 400, 400), Path.Direction.CW);
    TrackShape rectTrackShape = new TrackShape(rectPath, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()));
    TrackShapeDrawable rectShapeDrawable = new TrackShapeDrawable(rectTrackShape);
    rectShapeDrawable.getPaint().setShader(new SweepGradient(300, 300, new int[]{Color.WHITE, 0xFF00C7B2}, null));
    testPathTransformView.setBackground(rectShapeDrawable);

    Matrix translateMatrix1 = new Matrix();
    translateMatrix1.setTranslate(400, 0);
    Path scaleRectPath = new Path();
    // 将左上角矩形对应的Path向右平移400个像素
    rectPath.transform(translateMatrix1, scaleRectPath);
    Matrix scaleMatrix = new Matrix();
    scaleMatrix.setScale(0.5f, 0.5f, 700, 300);
    // 将平移后得到的Path相对于矩形的中心点缩小一半
    scaleRectPath.transform(scaleMatrix);
    TrackShape scaleRectTrackShape = new TrackShape(scaleRectPath, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()));
    TrackShapeDrawable scaleRectShapeDrawable = new TrackShapeDrawable(scaleRectTrackShape);
    scaleRectShapeDrawable.getPaint().setShader(new SweepGradient(700, 300, new int[]{Color.WHITE, 0xFF00C7B2}, null));
    testPathScaleView.setBackground(scaleRectShapeDrawable);

    Matrix translateMatrix2 = new Matrix();
    translateMatrix2.setTranslate(0, 400);
    Path rotateRectPath = new Path();
    // 将左上角矩形对应的Path向下平移400个像素
    rectPath.transform(translateMatrix2, rotateRectPath);
    Matrix rotateMatrix = new Matrix();
    rotateMatrix.setRotate(60, 300, 700);
    // 将平移后得到的Path相对于矩形的中心点旋转180度
    rotateRectPath.transform(rotateMatrix);
    TrackShape rotateRectTrackShape = new TrackShape(rotateRectPath, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()));
    TrackShapeDrawable rotateRectShapeDrawable = new TrackShapeDrawable(rotateRectTrackShape);
    rotateRectShapeDrawable.getPaint().setShader(new SweepGradient(300, 700, new int[]{Color.WHITE, 0xFF00C7B2}, null));
    testPathRotateView.setBackground(rotateRectShapeDrawable);

    Matrix translateMatrix3 = new Matrix();
    translateMatrix3.setTranslate(400, 400);
    Path skewRectPath = new Path();
    // 将左上角矩形对应的Path向上向下分别平移400个像素
    rectPath.transform(translateMatrix3, skewRectPath);
    Matrix skewMatrix = new Matrix();
    skewMatrix.setSkew(-0.5f, 0, 700, 700);
    // 将平移后得到的Path相对于矩形的中心点在水平方向上错切矩形宽度的一半
    skewRectPath.transform(skewMatrix);
    TrackShape skewRectTrackShape = new TrackShape(skewRectPath, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics()));
    TrackShapeDrawable skewRectShapeDrawable = new TrackShapeDrawable(skewRectTrackShape);
    skewRectShapeDrawable.getPaint().setShader(new SweepGradient(700, 700, new int[]{Color.WHITE, 0xFF00C7B2}, null));
    testPathSkewView.setBackground(skewRectShapeDrawable);
}

activity_test_path_transform.xml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view_coordinate"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/view_test_path"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/view_test_path_scale"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/view_test_path_rotate"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/view_test_path_skew"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

上面的注释非常清晰了,这里就不再赘叙了。上面代码中的TrackShapeDrawable和TrackShape在下面的自定义Drawable中会详细讲解。

3. Drawable绘制过程源码分析

前面已经讲到过,Drawable与View或者其子类相比,不需要进行measure、layout操作,仅仅只需要进行draw操作,因此我们只要明白Drawable的绘制过程,基本上就可以实现自定义Drawable。Drawable是用来在View上显示的,因此View的绘制过程中就会绘制View上要显示的Drawable(即调用Drawable的onDraw方法)。在前面的一篇博客Android View的测量、布局、绘制流程源码分析及自定义View实例演示中讲解了View的测量、布局、绘制流程,希望有兴趣的同学可以看看,下面我就直接从View的drawBackground方法(该方法绘制View的绘制过程中被调用)入手研究Drawable的绘制过程,顾名思义,drawBackground方法是用来绘制View的背景的,首先我们先看一下绘制View的背景时序图:

View背景绘制时序图

上图表明绘制View的背景的任务主要分为两部分:
1> 设置View的背景对应的Drawable的大小,即设置Drawable绘制区域的大小 (上图中的1、2、3、4步)
2> 在画布上绘制View的背景对应的Drawable (上图中的5步)
首先看一下上图中第1步的drawBackground方法的源码:

private void drawBackground(Canvas canvas) {
    final Drawable background = mBackground;
    if (background == null) {
        return;
    }
    // 设置View的背景对应的Drawable的大小,即设置Drawable绘制区域的大小
    setBackgroundBounds();

    // Attempt to use a display list if requested.
    if (canvas.isHardwareAccelerated() && mAttachInfo != null
            && mAttachInfo.mHardwareRenderer != null) {
        mBackgroundRenderNode = getDrawableRenderNode(background, mBackgroundRenderNode);

        final RenderNode renderNode = mBackgroundRenderNode;
        if (renderNode != null && renderNode.isValid()) {
            setBackgroundRenderNodeProperties(renderNode);
            ((DisplayListCanvas) canvas).drawRenderNode(renderNode);
            return;
        }
    }

    final int scrollX = mScrollX;
    final int scrollY = mScrollY;
     //当没有发生滑动时,直接进行绘制,如果发生了滑动偏移,就先将画布的坐标系进行对应的偏移。
    if ((scrollX | scrollY) == 0) {
        background.draw(canvas);
    } else {
        canvas.translate(scrollX, scrollY);
        background.draw(canvas);
        canvas.translate(-scrollX, -scrollY);
    }
}

上面的注释很清楚,就不做赘叙了。
接着我们来看上图中第2步中setBackgroundBounds方法的源码:

void setBackgroundBounds() {
    if (mBackgroundSizeChanged && mBackground != null) {
        // 将View的背景对应的Drawable的大小设置为View的大小,即设置Drawable绘制区域的大小 
        mBackground.setBounds(0, 0, mRight - mLeft, mBottom - mTop);
        mBackgroundSizeChanged = false;
        rebuildOutline();
    }
}

上面的注释很清楚,就不做赘叙了。
接着我们来看看第3步中的源码:

/**
 * Specify a bounding rectangle for the Drawable. This is where the drawable
 * will draw when its draw() method is called.
 */
public void setBounds(int left, int top, int right, int bottom) {
    Rect oldBounds = mBounds;

    if (oldBounds == ZERO_BOUNDS_RECT) {
        oldBounds = mBounds = new Rect();
    }

    if (oldBounds.left != left || oldBounds.top != top ||
            oldBounds.right != right || oldBounds.bottom != bottom) {
        if (!oldBounds.isEmpty()) {
            // first invalidate the previous bounds
            invalidateSelf();
        }
        mBounds.set(left, top, right, bottom);
        // 在自定义Drawable时就是通过重载这个方法获取到自定义Drawable的绘制区域
        onBoundsChange(mBounds);
    }
}

上面的注释很清楚,就不做赘叙了。
回到第1步的drawBackground方法中,设置完View的背景对应的Drawable的绘制区域后(即setBackgroundBounds方法调用结束后),接着就是在绘制区域上绘制图像(即上图中的第5步,Drawable的draw方法会被调用),Drawable的draw方法是一个抽象方法,因此自定义Drawable时必须实现该方法:

public abstract void draw(@NonNull Canvas canvas);

4. 自定义Drawable

首先让大家看看我通过自定义Drawable实现的一个动画:



大多数开发者者通常第一个会想到通过自定义View来实现上面的动画效果,虽然可以实现上面的动画,但是通用性不是很好,而且实现的复杂度也很高;通过自定义Drawable的方式实现上面的动画效果的好处如下:

  • 通用性好:实现的动画效果可以适用于View及其子类
  • 实现起来很简单:与自定义View相比,不需要进行measure、layout操作,仅仅只需要进行draw操作

1> 分析上面的动画

  • 动画的初始状态:是两个图层叠加的想过,底层是一个50%透明度的白色圆形图层(后面统一称为A层),上层是一个居中显示闹钟图片的图层(后面统一称为B层)。
  • 动画的中间过程:A层的透明度变成50%,然后B层中闹钟图片上方显示了一个与闹钟图片大小相同的透明度为20%的白色圆形图层(后面统一称为C层),然后在C层上面动态的放大一个与C层上圆形半径相同的灰色的圆环(后面统一称为D层),然后在然后在D层上面动态的绘制一个与D层上圆形半径相同的绿色圆环(后面统一称为E层),接着在E层的中心位置动态绘制一个从小变大的绿色对勾(后面统一称作F层),接着就是显示动画的结束状态。
  • 动画的结束状态:A层的透明度变成0,B层与初始状态一样, C、D、E、F层不在显示。

通过上面的分析可知,上面的动画效果要通过6个图层实现,因此可以通过6个Drawable的叠加来实现,A、B、C层由于没有动画效果(A层只不过是在动画开始和结束时改变了透明度),因此实现起来很简单。

2> 实现A、B、C层

实现代码如下所示:

/*
* A层
*/
float radius = DisplayUtils.dip2px(getContext(), 38f);
GradientDrawable bigBgCircle = new GradientDrawable();
float[] radii = new float[]{radius, radius, radius, radius,
        radius, radius, radius, radius};
bigBgCircle.setColor(0xAAFFFFFF);
bigBgCircle.setCornerRadii(radii);

/*
* B层
*/
int padding = DisplayUtils.dip2px(getContext(), 19f);
InsetDrawable clock = new InsetDrawable(getResources().getDrawable(R.drawable.ic_clock), padding);

/*
* C层
*/
float radius2 = DisplayUtils.dip2px(getContext(), 19f);
GradientDrawable smallBgCircleCenter = new GradientDrawable();
radii = new float[]{radius2, radius2, radius2, radius2,
        radius2, radius2, radius2, radius2};
smallBgCircleCenter.setColor(0xDDFFFFFF);
smallBgCircleCenter.setCornerRadii(radii);
int padding2 = DisplayUtils.dip2px(getContext(), 19f);
InsetDrawable smallBgCircle = new InsetDrawable(smallBgCircleCenter, padding2);

LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{bigBgCircle, clock, smallBgCircle});
animatorDrawableView.setBackground(layerDrawable);

运行截图如下:



怎么只有A层和B层,而没有C层,其实这是LayerDrawable的设计缺陷,padding在LayerDrawable中是累积的,也就是说,在某一层的padding影响所有较高层的bounds,可以通过LayerDrawable的onBoundsChange方法的源码看出来:

@Override
protected void onBoundsChange(Rect bounds) {
    final ChildDrawable[] array = mLayerState.mChildren;
    final int N = mLayerState.mNum;
    int padL=0, padT=0, padR=0, padB=0;
    for (int i=0; i<N; i++) {
        final ChildDrawable r = array[i];
        r.mDrawable.setBounds(bounds.left + r.mInsetL + padL,
                              bounds.top + r.mInsetT + padT,
                              bounds.right - r.mInsetR - padR,
                              bounds.bottom - r.mInsetB - padB);
        padL += mPaddingL[i];
        padR += mPaddingR[i];
        padT += mPaddingT[i];
        padB += mPaddingB[i];
    }
}

因为InsetDrawable用inset作为padding,因此导致在B层上面的C层中的圆的半径被缩小了19dp,因此C层中的圆就不见了。
在API 21的时候,Google意识到了这个设计缺陷,因此在LayerDrawable中添加了setPaddingMode方法,通过此方法可以设置LayerDrawable的PaddingMode为如下两种:

/**
 * 默认的PaddingMode,将每一层嵌入上一层的padding内。
 *
 * @see #setPaddingMode(int)
 */
public static final int PADDING_MODE_NEST = 0;

/**
 * 将每一层直接堆叠在上一层之上。
 *
 * @see #setPaddingMode(int)
 */
public static final int PADDING_MODE_STACK = 1;

上面的注释非常清楚,将LayerDrawable的PaddingMode的PaddingMode设置为PADDING_MODE_STACK就好了;虽然这种方法可以解决问题,但是遗憾的是,为了兼容API 21以下的版本,这个方法是不可行的,因此为了避免这个问题,我自定义了一个PaddingDrawable来取代InsetDrawable,源码如下:

public class PaddingDrawable extends Drawable {
    /**
     * 对应要被设置padding的drawable
     */
    private Drawable drawable = null;
    private Paint paint = null;
    private Rect padding = null;

    public PaddingDrawable(Drawable drawable) {
        this.paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        this.drawable = drawable;
    }

    public Paint getPaint() {
        return paint;
    }

    public void setPadding(Rect padding) {
        if (padding == null) {
            return;
        }
        if (this.padding == null) {
            this.padding = new Rect();
        }
        this.padding.set(padding);
        invalidateSelf();
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        if (null == drawable) {
            return;
        }
        if (null == padding) {
            drawable.setBounds(bounds);
        } else {
            drawable.setBounds(bounds.left, bounds.top,
                    bounds.right - padding.left - padding.right, bounds.bottom - padding.top - padding.bottom);
        }
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        canvas.drawColor(Color.TRANSPARENT);
        drawDrawable(canvas);
    }

    private void drawDrawable(@NonNull Canvas canvas) {
        if (null == drawable) {
            return;
        }
        if (null != padding) {
            canvas.save();
            canvas.translate(padding.left, padding.top);
            drawable.draw(canvas);
            canvas.restore();
        } else {
            drawable.draw(canvas);
        }
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
        this.paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        this.paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

PaddingDrawable是通过自定义Drawable实现的,下面会详细介绍自定义Drawable的,因此大家只关注onBoundsChange和draw方法的实现就行了,在2中Drawable绘制过程源码分析已经详细介绍了onBoundsChange和draw方法的作用,相信大家应该可以理解上面代码的实现;接下来就是对上图的实现代码中的InsetDrawable替换成PaddingDrawable,代码如下:

/*
* A层和上面相同,这里不再重复。
*/

/*
* B层
*/
PaddingDrawable clock = new PaddingDrawable(getResources().getDrawable(R.drawable.ic_clock));
int padding = DisplayUtils.dip2px(getContext(), 19f);
clock.setPadding(new Rect(padding, padding, padding, padding));

/*
* C层
*/
float radius2 = DisplayUtils.dip2px(getContext(), 19f);
GradientDrawable smallBgCircleCenter = new GradientDrawable();
radii = new float[]{radius2, radius2, radius2, radius2,
        radius2, radius2, radius2, radius2};
smallBgCircleCenter.setColor(0xDDFFFFFF);
smallBgCircleCenter.setCornerRadii(radii);
PaddingDrawable smallBgCircle = new PaddingDrawable(smallBgCircleCenter);
int padding2 = DisplayUtils.dip2px(getContext(), 19f);
smallBgCircle.setPadding(new Rect(padding2, padding2, padding2, padding2));

LayerDrawable layerDrawable = new LayerDrawable(new Drawable[] {bigBgCircle, clock, smallBgCircle});
animatorDrawableView.setBackground(layerDrawable);

运行截图如下:



C层出现了,是我们想要的效果。

3> 实现D、E、F层

实现有动画效果的D、E、F层就要用到自定义Drawable了,首先我们应该绘制与D、E、F层对应的圆环和对勾,接着就是通过属性动画让D、E、F层中的圆环和对勾动起来。

绘制与D、E、F层对应的圆环和对勾

对于绘制圆环和对勾我借鉴了ShapeDrawable做法,那就是继承Shape类实现对于圆环和对勾的绘制,代码如下:

/**
 * TrackShape 基本的轨迹图形类
 * 通过轨迹(即Path)来定义Shape,因此任何Shape的绘制过程就是绘制一条Path,
 * 即draw方法是一样的并且在基类TrackShape中实现。
 */
public class TrackShape extends Shape {

    protected Path track = null;

    /**
     * 代表缩放或者选择后的track
     */
    private Path transformTrack = null;

    /**
     * 轨迹的厚度
     */
    protected float thickness = 0;

    /**
     * 设置轨迹为虚线
     */
    private PathEffect pathEffect = null;

    public TrackShape(Path track, float thickness) {
        this(track, thickness, null);
    }

    public TrackShape(Path track, float thickness, PathEffect pathEffect) {
        this.track = track;
        this.thickness = thickness;
        this.pathEffect = pathEffect;
    }

    public void scale(float widthScale, float heightScale) {
        scale(widthScale, heightScale, getWidth() / 2, getHeight() / 2);
    }

    /**
     * 当发生缩放时被调用
     *
     * @param widthScale  横向缩放的比例
     * @param heightScale 纵向缩放的比例
     * @param px          缩放中心点的x轴坐标
     * @param py          缩放中心点的y轴坐标
     */
    public void scale(float widthScale, float heightScale, float px, float py) {
        if (widthScale < 0) {
            return;
        }
        if (heightScale < 0) {
            return;
        }
        Matrix matrix = new Matrix();
        matrix.setScale(widthScale, heightScale, px, py);
        if (null == this.transformTrack) {
            this.transformTrack = new Path();
        }
        this.track.transform(matrix, this.transformTrack);
    }

    public void rotate(float degrees) {
        rotate(degrees, getWidth() / 2, getHeight() / 2);
    }

    /**
     * 当发生旋转时被调用
     *
     * @param degrees 旋转的角度
     * @param px      旋转中心点的x轴坐标
     * @param py      旋转中心点的y轴坐标
     */
    public void rotate(float degrees, float px, float py) {
        Matrix matrix = new Matrix();
        matrix.setRotate(degrees, px, py);
        if (null == this.transformTrack) {
            this.transformTrack = new Path();
        }
        this.track.transform(matrix, this.transformTrack);
    }

    /**
     * 当发生平移时被调用
     *
     * @param dx 横向平移的距离
     * @param dy 纵向平移的距离
     */
    public void translate(float dx, float dy) {
        Matrix matrix = new Matrix();
        matrix.setTranslate(dx, dy);
        if (null == this.transformTrack) {
            this.transformTrack = new Path();
        }
        this.track.transform(matrix, this.transformTrack);
    }

    @Override
    public void draw(Canvas canvas, Paint paint) {
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(thickness);
        if (null != pathEffect) {
            paint.setPathEffect(pathEffect);
        }
        if (null == transformTrack) {
            canvas.drawPath(track, paint);
        } else {
            canvas.drawPath(transformTrack, paint);
        }
    }

    public Path getTrack() {
        return this.track;
    }

    public void setTrack(Path track) {
        this.track = track;
    }
}

/**
 * 用来绘制圆环的轨迹图形
 */
public class RingTrackShape extends TrackShape {

    private float centerX = 0;
    private float centerY = 0;

    /**
     * 内圆的半径
     */
    private float innerRadius = 0;


    /**
     * 弧形起始角度
     */
    private float startAngle = 0;

    /**
     * 弧形扫过的角度(正数代表顺时针扫, 负数代表逆时针扫)
     */
    private float sweepAngle = 0;

    public RingTrackShape(float thickness, float startAngle, float sweepAngle) {
        this(thickness, startAngle, sweepAngle, null);
    }

    public RingTrackShape(float thickness, float startAngle, float sweepAngle, DashPathEffect dashPathEffect) {
        super(null, thickness, dashPathEffect);
        this.startAngle = startAngle;
        this.sweepAngle = sweepAngle;
    }

    @Override
    protected void onResize(float width, float height) {
        super.onResize(width, height);
        this.centerX = width / 2;
        this.centerY = height / 2;
        this.innerRadius = Math.min(centerX - thickness, centerY - thickness);
        this.track = new Path();
        this.track.addArc(new RectF(centerX -  innerRadius - thickness/ 2,
                centerY - innerRadius - thickness / 2,
                centerX + innerRadius + thickness / 2,
                centerY + innerRadius + thickness / 2), startAngle, sweepAngle);
    }
}

D、E层的圆环是通过上面的RingTrackShape绘制的,F层的对勾是通过TrackShape绘制的。

通过属性动画让D、E、F层中的圆环和对勾动起来

上面提到的TrackShape和RingTrackShape将绘制圆环和对勾的过程进行了封装,然后在自定义的TrackShapeDrawable中对TrackShape和RingTrackShape进行绘制,说到自定义的Drawable,必须要了解一下Drawable类:

/**
 * 指定drawable的alpha值。 0表示完全透明,255表示完全不透明。
 */
public abstract void setAlpha(@IntRange(from=0,to=255) int alpha);

/**
 * 为drawable指定可选的color filter。
 *
 * 如果Drawable具有ColorFilter,则Drawables绘图内容的每个输出像素在被混合到
 * Canvas的render目标之前将被color filter进行修改。
 *
 * 通过传递null参数删除任何现有的color filter。
 * 注意: 设置非null的color filter将使{@link #setTintList(ColorStateList)tint}无效。
 * 
 * @param colorFilter 要应用的color filter,或null参数删除现有的彩色滤镜
 */
public abstract void setColorFilter(@Nullable ColorFilter colorFilter);

/**
 * 返回Drawable的不透明度。 返回的值是如下常量之一:
 * {@link android.graphics.PixelFormat}:
 * {@link android.graphics.PixelFormat#UNKNOWN},
 * {@link android.graphics.PixelFormat#TRANSLUCENT},
 * {@link android.graphics.PixelFormat#TRANSPARENT}, or
 * {@link android.graphics.PixelFormat#OPAQUE}.
 *
 * OPAQUE drawable是在其bounds范围内绘制所有内容,完全覆盖了drawable后面的任何内容。 
 * TRANSPARENT drawable是在其bounds范围内不绘制任何内容的,可以让其后面的任何东西显示出来。
 * TRANSLUCENT drawable是在其bounds范围内绘制一些但不是全部的内容,并且至少在drawable后面的一些内容将可见。 
 * 如果无法确定可绘制内容的可见性,则最安全/最佳返回值为TRANSLUCENT。
 *
 * 一般来说,返回值应该尽可能保守(使用resolveOpacity方法可以做到)。
 * 例如,如果它包含多个child drawables,并且一次仅显示其中一个,如果只有一个子项是TRANSLUCENT,
 * 而其他子项是OPAQUE,则应返回TRANSLUCENT。
 *
 * 请注意,返回的值不一定考虑通过setAlpha或setColorFilter方法应用的自定义Alpha或color filter。
 * 某些子类(例如 BitmapDrawable,ColorDrawable和GradientDrawable)确实存在setAlpha的值,
 * 但一般行为取决于子类的实现。
 *
 * @return int  Drawable的不透明度类型。
 *
 * @see android.graphics.PixelFormat
 */
public abstract @PixelFormat.Opacity int getOpacity();

/**
 * 再其边界内绘制(通过setBounds设置),可以使用alpha(通过setAlpha设置)和
 * color filter(通过setColorFilter设置)等可选效果。
 *
 * @param canvas The canvas to draw into
 */
public abstract void draw(@NonNull Canvas canvas);

接着来看一下TrackShapeDrawable是如何对TrackShape和RingTrackShape进行绘制的:

/**
 * 用于绘制TrackShape的Drawable
 */
public class TrackShapeDrawable extends Drawable {

    /**
     * 对应要绘制的轨迹图形
     */
    protected TrackShape shape = null;

    protected Paint paint;

    public TrackShapeDrawable(TrackShape shape) {
        this.shape = shape;
        this.paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
    }

    public Paint getPaint() {
        return paint;
    }

    public Path getTrack() {
        if (null == shape) {
            return null;
        }
        return shape.getTrack();
    }

    public void setTrack(Path track) {
        if (null == shape || null == track) {
            return;
        }
        shape.setTrack(track);
        invalidateSelf();
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        updateShape(bounds);
    }

    private void updateShape(Rect bounds) {
        if (null != shape) {
            shape.resize(bounds.width(), bounds.height());
        }
    }

    public void scale(float widthScale, float heightScale) {
        if (null == shape) {
            return;
        }
        shape.scale(widthScale, heightScale);
        invalidateSelf();
    }

    /**
     * 当发生缩放时被调用
     *
     * @param widthScale  横向缩放的比例
     * @param heightScale 纵向缩放的比例
     * @param px          缩放中心点的x轴坐标
     * @param py          缩放中心点的y轴坐标
     */
    public void scale(float widthScale, float heightScale, float px, float py) {
        if (null == shape) {
            return;
        }
        shape.scale(widthScale, heightScale, px, py);
        invalidateSelf();
    }

    public void rotate(float degrees) {
        if (null == shape) {
            return;
        }
        shape.rotate(degrees);
        invalidateSelf();
    }

    /**
     * 当发生旋转时被调用
     *
     * @param degrees 旋转的角度
     * @param px      旋转中心点的x轴坐标
     * @param py      旋转中心点的y轴坐标
     */
    public void rotate(float degrees, float px, float py) {
        if (null == shape) {
            return;
        }
        shape.rotate(degrees, px, py);
        invalidateSelf();
    }

    /**
     * 当发生平移时被调用
     *
     * @param dx 横向平移的距离
     * @param dy 纵向平移的距离
     */
    public void translate(float dx, float dy) {
        if (null == shape) {
            return;
        }
        shape.translate(dx, dy);
        invalidateSelf();
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (null == shape) {
            return;
        }
        shape.draw(canvas, paint);
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
        this.paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        this.paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

上面代码中的看出scale、rotate、translate、setTrack方法是用来实现对TrackShape和RingTrackShape中的轨迹进行scale、rotate、translate和替换,具体可以参考TrackShape中的scale、rotate、translate、setTrack方法。讲到这里,大家应该有了实现动画的思路了吧,就是通过属性动画来动态调用TrackShapeDrawable的scale、rotate、translate、setTrack方法即可。

接下来为了实现D、E、F层中的圆环和对勾对应的缩放动画和轨迹动画,我实现了ScaleAnimatorDrawable、TrackAnimatorDrawable两个自定义Drawable,这两个自定义Drawable就是对 属性动画动态调用TrackShapeDrawable的scale、setTrack方法 的封装,其中ScaleAnimatorDrawable不仅支持TrackShapeDrawable也支持其它类型的Drawable,实现代码如下:

/**
 * 作为自定义动画Drawable的基类
 */
public abstract class AnimatorDrawable extends Drawable implements Animatable, Drawable.Callback, Animator.AnimatorListener {

    /**
     * 在Drawable绘制区域的基础上设置padding
     */
    Rect padding = new Rect();

    /**
     * 要被动画的drawable
     */
    protected Drawable drawable = null;

    private ValueAnimator valueAnimator = null;

    /**
     * 表示动画是不是已经被启动
     */
    private boolean isFirst = true;

    /**
     * 轨迹动画的时长,默认200毫秒
     */
    protected long duration = 200;

    /**
     * 轨迹动画延迟执行的时长,默认为0,即不延迟
     */
    protected long startDelay = 0;

    /**
     * 代表动画执行完成之后是否停留在最后一帧
     * true  代表停留在最后一帧
     * false 代表不会显示如何东西
     */
    private boolean fillAfter = true;

    public AnimatorDrawable(Drawable drawable, long duration) {
        this(drawable, duration, true);
    }

    public AnimatorDrawable(Drawable drawable, long duration, boolean fillAfter) {
        if (null == drawable) {
            return;
        }
        this.drawable = drawable;
        this.drawable.setCallback(this);// 防止drawable的invalidateSelf方法无法重绘
        if (duration > 0) {
            this.duration = duration;
        }
        this.fillAfter = fillAfter;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        updateDrawable();
    }

    private void updateDrawable() {
        if (null == drawable) {
            return;
        }

        Rect bounds = getBounds();
        if (null == padding) {
            drawable.setBounds(bounds);
        } else {
            drawable.setBounds(bounds.left, bounds.top,
                    bounds.right - padding.left - padding.right, bounds.bottom - padding.top - padding.bottom);
        }
    }

    /**
     * Sets padding for this shape, defined by a Rect object. Define the padding
     * in the Rect object as: left, top, right, bottom.
     */
    public void setPadding(Rect padding) {
        if (padding == null) {
            return;
        }
        this.padding = padding;
        updateDrawable();
        invalidateSelf();
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (isFirst) {
            start();
            isFirst = false;
        } else {
            if (isRunning() || null == valueAnimator) {
                onDraw(canvas);
            }
        }
    }

    public void onDraw(@NonNull Canvas canvas) {
        if (null != padding) {
            canvas.save();
            canvas.translate(padding.left, padding.top);
            canvas.clipRect(0, 0, drawable.getBounds().width(), drawable.getBounds().height());
            drawTrack(canvas);
            canvas.restore();
        } else {
            canvas.save();
            drawTrack(canvas);
            canvas.restore();
        }
    }

    public abstract void drawTrack(@NonNull Canvas canvas);

    /**
     * 获取轨迹动画的时长
     */
    public long getDuration() {
        return duration;
    }

    public void setStartDelay(long startDelay) {
        if (startDelay < 0) {
            return;
        }
        this.startDelay = startDelay;
    }

    public long getStartDelay() {
        return startDelay;
    }

    void setValueAnimator(ValueAnimator valueAnimator) {
        if (null == valueAnimator) {
            this.valueAnimator.cancel();
            this.valueAnimator = null;
        } else {
            this.valueAnimator = valueAnimator;
        }
    }

    @Override
    public void start() {
        if (null != valueAnimator && (valueAnimator.isRunning() || valueAnimator.isStarted())) {
            valueAnimator.cancel();
            valueAnimator = null;
        }
        setupAnimators();
        if (null != valueAnimator) {
            valueAnimator.start();
        }
    }

    public abstract void setupAnimators();

    @Override
    public void stop() {
        if (null != valueAnimator && (valueAnimator.isRunning() || valueAnimator.isStarted())) {
            valueAnimator.cancel();
        }
    }

    @Override
    public boolean isRunning() {
        return null != valueAnimator && valueAnimator.isRunning();
    }

    @Override
    public void invalidateDrawable(@NonNull Drawable who) {
        invalidateSelf();
    }

    @Override
    public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {
        scheduleSelf(what, when);
    }

    @Override
    public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {
        unscheduleSelf(what);
    }

    @Override
    public void onAnimationStart(Animator animation) {
        if (null != this.onAnimatorListener) {
            this.onAnimatorListener.onAnimationStart(this);
        }
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        valueAnimator.removeAllUpdateListeners();
        valueAnimator.removeAllListeners();
        if (fillAfter) {
            setValueAnimator(null);
        }
        if (null != this.onAnimatorListener) {
            this.onAnimatorListener.onAnimationEnd(this);
        }
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {}

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {}

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    private OnAnimatorListener onAnimatorListener = null;

    public void setOnAnimatorListener(OnAnimatorListener onAnimatorListener) {
        this.onAnimatorListener = onAnimatorListener;
    }

    public interface OnAnimatorListener {
        void onAnimationStart(AnimatorDrawable animatorDrawable);
        void onAnimationEnd(AnimatorDrawable animatorDrawable);
    }
}

/**
 * 对Drawable进行Scale动画
 */
public class ScaleAnimatorDrawable extends AnimatorDrawable {

    /**
     * 代表Drawable缩放的比例
     */
    private float scale = 0;

    private Rect initPadding = new Rect();


    public ScaleAnimatorDrawable(Drawable drawable, long duration) {
        super(drawable, duration);
    }

    @Override
    public void setupAnimators() {
        // 在启动动画之前记录最开始的padding
        initPadding = padding;

        final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 1f);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                scale = (float) animation.getAnimatedValue();
                preDraw();
            }
        });
        valueAnimator.addListener(this);
        valueAnimator.setDuration(duration).setStartDelay(startDelay);
        setValueAnimator(valueAnimator);
    }

    private void preDraw() {
        if (drawable instanceof TrackShapeDrawable) {
            ((TrackShapeDrawable) drawable).scale(scale, scale);
        } else {
            Rect bounds = getBounds();
            setPadding(new Rect((int) (initPadding.left + (bounds.width() - initPadding.left - initPadding.right) * 0.5 * (1 - scale)),
                    (int) (initPadding.top + (bounds.height() - initPadding.top - initPadding.bottom) * 0.5 * (1 - scale)),
                    (int) (initPadding.right + (bounds.width() - initPadding.left - initPadding.right) * 0.5 * (1 - scale)),
                    (int) (initPadding.bottom + (bounds.height() - initPadding.top - initPadding.bottom) * 0.5 * (1 - scale))));
        }
    }

    @Override
    public void drawTrack(@NonNull Canvas canvas) {
        drawable.draw(canvas);
    }
}

/**
 * 对TrackShapeDrawable进行轨迹动画
 */
public class TrackAnimatorDrawable extends AnimatorDrawable {

    /**
     * 代表将要被绘制的轨迹片段
     */
    private Path trackSegment = null;

    public TrackAnimatorDrawable(TrackShapeDrawable drawable, long duration) {
        super(drawable, duration);
    }

    @Override
    public void setupAnimators() {
        final ValueAnimator valueAnimator = ValueAnimator.ofObject(new PathEvaluator(), new Path(), ((TrackShapeDrawable) drawable).getTrack());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                trackSegment = (Path) animation.getAnimatedValue();
                preDraw();
            }
        });
        valueAnimator.addListener(this);
        valueAnimator.setDuration(duration).setStartDelay(startDelay);
        setValueAnimator(valueAnimator);
        trackSegment = new Path();
    }

    private void preDraw() {
        ((TrackShapeDrawable) drawable).setTrack(trackSegment);
    }

    @Override
    public void drawTrack(@NonNull Canvas canvas) {
        drawable.draw(canvas);
    }
}

接着就是使用上面自定义的ScaleAnimatorDrawable、TrackAnimatorDrawable实现动画效果了:

// A层除了颜色值变为0xAAFFFFFF其它和2>中相同,B层也和2>中相同,这里不再赘叙。

// C层
float radius2 = DisplayUtils.dip2px(this, 19f);
GradientDrawable smallBgCircleCenter = new GradientDrawable();
radii = new float[]{radius2, radius2, radius2, radius2,
        radius2, radius2, radius2, radius2};
smallBgCircleCenter.setColor(0xDDFFFFFF);
smallBgCircleCenter.setCornerRadii(radii);
PaddingDrawable smallBgCircle = new PaddingDrawable(smallBgCircleCenter);
int padding3 = DisplayUtils.dip2px(this, 19f);
smallBgCircle.setPadding(new Rect(padding3, padding3, padding3, padding3));

// D层
ScaleAnimatorDrawable scaledCircle = (ScaleAnimatorDrawable) AnimatorDrawableFactory.createAnimatorDrawable(this, getResources().getDrawable(R.drawable.ic_drawable_ring), AnimatorDrawableFactory.AnimatorDrawableType.SCALE);
int padding4 = DisplayUtils.dip2px(this, 19f);
scaledCircle.setPadding(new Rect(padding4, padding4, padding4, padding4));

// E层
TrackShapeDrawable scaleRingDrawable = new TrackShapeDrawable(new RingTrackShape(DisplayUtils.dip2px(this, 2), 0, 360));
scaleRingDrawable.getPaint().setColor(Color.GREEN);
TrackAnimatorDrawable trackAnimatorDrawable = (TrackAnimatorDrawable) AnimatorDrawableFactory.createAnimatorDrawable(this, scaleRingDrawable, AnimatorDrawableFactory.AnimatorDrawableType.TRACK);
int padding5 = DisplayUtils.dip2px(this, 20f);
trackAnimatorDrawable.setPadding(new Rect(padding5, padding5, padding5, padding5));

// F层
Path track = new Path();
track.moveTo(0f, DisplayUtils.dip2px(this, 10f));
track.lineTo(DisplayUtils.dip2px(this, 10f), DisplayUtils.dip2px(this, 20f));
track.lineTo(DisplayUtils.dip2px(this, 20f), 0f);
TrackShape trackShape = new TrackShape(track, DisplayUtils.dip2px(this, 2));
TrackShapeDrawable trackShapeDrawable3 = new TrackShapeDrawable(trackShape);
trackShapeDrawable3.getPaint().setColor(Color.GREEN);
ScaleAnimatorDrawable scaleAnimatorDrawable = (ScaleAnimatorDrawable) AnimatorDrawableFactory.createAnimatorDrawable(this, trackShapeDrawable3, AnimatorDrawableFactory.AnimatorDrawableType.SCALE);
int padding6 = DisplayUtils.dip2px(this, 28f);
scaleAnimatorDrawable.setPadding(new Rect(padding6, padding6, padding6, padding6));

TrackAnimatorManager trackAnimatorManager = new TrackAnimatorManager();
trackAnimatorManager.setOnAnimatorListener(this);
LayerDrawable layerDrawable = trackAnimatorManager.createLayerDrawable(TrackAnimatorManager.Order.SEQUENTIALLY,
        bigBgCircle, clock, smallBgCircle, scaledCircle, trackAnimatorDrawable, scaleAnimatorDrawable);
animatorDrawableView.setBackground(layerDrawable);

上面代码中的trackAnimatorManager.createLayerDrawable是将多个Drawable放到一个LayerDrawable中,如果其中有AnimatorDrawable的子类就会将其按照其在数组中顺序依次进行动画,实现代码如下:

public LayerDrawable createLayerDrawable(Order order, Drawable... drawables) {
    if (null == drawables || drawables.length <= 0) {
        return null;
    }
    this.drawables = drawables;
    LayerDrawable layerDrawable = new LayerDrawable(this.drawables);
    int startDelay = 0;
    for (Drawable drawable : this.drawables) {
        if (drawable instanceof AnimatorDrawable) {
            startDelay += ((AnimatorDrawable) drawable).getStartDelay();
            ((AnimatorDrawable) drawable).setOnAnimatorListener(this);
            switch (order) {
                case SEQUENTIALLY: {
                    ((AnimatorDrawable) drawable).setStartDelay(startDelay);
                    break;
                }
            }
            startDelay += ((AnimatorDrawable) drawable).getDuration();
        }
    }
    return layerDrawable;
}

推荐阅读更多精彩内容