介绍：

动态控制vector drawable

运行效果：

使用说明：

dependency

dependencies {
      compile 'com.sdsmdg.harjot:vectormaster:1.0.5'
}

ic_heart.xml (这是原始vector)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="outline"
        android:pathData="M20.84,4.61a5.5,5.5 0,0 0,-7.78 0L12,5.67l-1.06,-1.06a5.5,5.5 0,0 0,-7.78 7.78l1.06,1.06L12,21.23l7.78,-7.78 1.06,-1.06a5.5,5.5 0,0 0,0 -7.78z"
        android:strokeLineCap="round"
        android:strokeColor="#5D5D5D"
        android:fillColor="#00000000"
        android:strokeWidth="2"
        android:strokeLineJoin="round"/>
</vector>

例子 1 (简单的颜色变化)

XML

<com.sdsmdg.harjot.vectormaster.VectorMasterView
        android:id="@+id/heart_vector"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:vector_src="@drawable/ic_heart" />

Java

VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
// find the correct path using name
PathModel outline = heartVector.getPathModelByName("outline");
// set the stroke color
outline.setStrokeColor(Color.parseColor("#ED4337"));
// set the fill color (if fill color is not set or is TRANSPARENT, then no fill is drawn)
outline.setFillColor(Color.parseColor("#ED4337"));

结果

例子 2 (Trim paths)

XML

<com.sdsmdg.harjot.vectormaster.VectorMasterView
        android:id="@+id/heart_vector"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:vector_src="@drawable/ic_heart" />

Java

VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
// find the correct path using name
PathModel outline = heartVector.getPathModelByName("outline");
// set trim path start (values are given in fraction of length)
outline.setTrimPathStart(0.0f);
// set trim path end (values are given in fraction of length)
outline.setTrimPathEnd(0.65f);

结果

例子 3 (使用ValueAnimator做简单的颜色动画)

XML

<com.sdsmdg.harjot.vectormaster.VectorMasterView
        android:id="@+id/heart_vector"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:vector_src="@drawable/ic_heart" />

Java

VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
// find the correct path using name
PathModel outline = heartVector.getPathModelByName("outline");
outline.setStrokeColor(Color.parseColor("#ED4337"));
heartVector.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // initialize valueAnimator and pass start and end color values
        ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(), Color.WHITE, Color.parseColor("#ED4337"));
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // set fill color and update view
                outline.setFillColor((Integer) valueAnimator.getAnimatedValue());
                heartVector.update();
            }
        });
        valueAnimator.start();
    }
});

结果

例子 4 (使用 ValueAnimator 做简单的trim动画)

XML

<com.sdsmdg.harjot.vectormaster.VectorMasterView
        android:id="@+id/heart_vector"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:vector_src="@drawable/ic_heart" />

Java

VectorMasterView heartVector = (VectorMasterView) findViewById(R.id.heart_vector);
// find the correct path using name
PathModel outline = heartVector.getPathModelByName("outline");
outline.setStrokeColor(Color.parseColor("#ED4337"));
outline.setTrimPathEnd(0.0f);
heartVector.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // initialise valueAnimator and pass start and end float values
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // set trim end value and update view
                outline.setTrimPathEnd((Float) valueAnimator.getAnimatedValue());
                heartVector.update();
            }
        });
        valueAnimator.start();
    }
});

结果

复杂动画

上面的例子只是一些基本的使用案例。对于更复杂的动画和用例，比如clip-paths 和 group 请到AnimationExamples。

Using as a Custom Drawable

The library also provide custom drawable implementation in form of VecotrMasterDrawable. It provides the same control over the vector, but allows the user to use the drawable as per its wish, for e.g. as a Compound Drawable in TextView, or as the source drawable in ImageView; basically any use case that involves a Drawable can be replaced by VectorMasterDrawable.

Example

XML

<TextView
    android:id="@+id/text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Heart"
    android:textSize="30sp" />
<ImageView
    android:id="@+id/image_view"
    android:layout_width="75dp"
    android:layout_height="75dp"/>

Java

// Instantiate the custom drawable
VectorMasterDrawable vectorMasterDrawable = new VectorMasterDrawable(this, R.drawable.ic_heart);
// Set top drawable for TextView
TextView textView = (TextView) findViewById(R.id.text_view);
textView.setCompoundDrawablesWithIntrinsicBounds(null, vectorMasterDrawable, null, null);
// Set background drawable for ImageView
ImageView imageView = (ImageView) findViewById(R.id.image_view);
imageView.setImageDrawable(vectorMasterDrawable);
// Set tht stroke color of the drawable
PathModel pathModel = vectorMasterDrawable.getPathModelByName("outline");
pathModel.setStrokeColor(Color.parseColor("#ED4337"));

Result